본문 바로가기
반응형

IT/HTML & CSS & JavaScript47

[CSS] 애니메이션 / 움직이는 강아지 CSS를 이용해서 위아래, 좌우로 움직이는 강아지를 구현하는 예제입니다. 소스코드(HTML) 태그안에 태그를 넣어 dog.png 사진을 넣어줍니다. 2마리의 강아지 이미지가 준비되었습니다. 소스코드(CSS) 애니메이션 CSS를 아래와 같이 만들어 줍니다. 자세한 설명은 주석을 달아 두었으니 값을 변경하면서 확인해 보시기 바랍니다. .container { flex-direction: row; margin-top: 200px; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ border: 2px solid #333333; } .img-concert{ width: 100px;.. 2021. 9. 17.
[CSS] 하트 만들기(div, before, after) 이번 시간에는 CSS를 사용하여 하트를 만들어 보도록 하겠습니다. 사용할 핵심 요소는 CSS의 가상 클레스인 before, after입니다. before : 요소의 앞에 가상의 자식 요소를 생성합니다. after : 요소의 뒤에 가상의 자식 요소를 생성합니다. 소스코드 완성된 소스코드입니다. CSS 옆에 설명을 달아 두었으니 참고하시면 되겠습니다. /*CSS*/ .container { flex-direction: row; margin-top: 200px; border: 2px solid #333333; } .make_heart { margin: 0 auto; width: 100px; height: 100px; background: #ea2027; position: relative; /*부모*/ trans.. 2021. 9. 17.
[CSS] margin, padding 개념 & 사용법 정리 margin, padding은 다은과 같은 속성을 가집니다. margin : 바깥쪽 여백 padding : 안쪽 여백 기본소스코드 1번 컨테이너 /*CSS*/ .container { flex-direction: row; margin-top: 50px; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ border: 2px solid #333333; } div.ma { width: 150px; height: 150px; border: 2px solid #071de2; } 사용법 사용법은 margin과 padding 동일합니다. margin 중점으로 설명하겠습니다. 1. 속성.. 2021. 9. 17.
[CSS] 마우스 hover / 이미지 확대 2가지 방법 이번 시간에는 마우스를 이미지 위에 올렸울 경우 이미지가 확대되는 2가지 방법에 대해서 알아보겠습니다. 1. 이미지 전체 사이즈가 확대되는 경우 2. 이미지가 확대는 되지만 전체 크기는 고정인 경우. 이미지 확대(전쳬) 먼저 이미지 전체가 확대되는 방법입니다. transition 속성은 이미지를 부드럽게 커지게 하기 위해 추가 하였습니다. hover : 마우스를 올렸을 경우를 정의하는 가상 클래스 transform: scale(1.4) : 이미지가 얼마나 확대 될지 정의합니다. Hover 이미지 확대효과 /* CSS */ h1 { color: green; background-color: grey; font-size: 20px; text-align: center; font-family : 'Nanum Go.. 2021. 9. 17.
[CSS] 가상요소(before), 가상클래스(hover) 사용법 가상 요소(Pseudo-elements)란? HTML을 변경하지 않고 CSS구문으로 특정 요소앞에 문자, 이미지를 넣을 수 있는 유용한 선택자 입니다. 가상요소를 사용한 문자입력 가상요소 before를 이용해서 "HTML입력" 앞에 "CSS입력" 문자를 넣을 수 있습니다. 가상요소 문자의 색상은 구분을 위해 빨간색으로 지정하였습니다. //HTML HTML입력 //CSS p:before { content: "CSS입력, "; color: red; } 가상클래스를 사용한 문자색 변경 가상클래스 hover을 사용해서 마우스를 글자위에 올려두었을 시 색상을 파란색으로 변경하는 방법입니다. p:before { content: "CSS입력, "; color: red; } p:hover { color: blue; }.. 2021. 9. 16.
[CSS] !important - 속성값 우선 적용방법 이번 시간에는 속성값 적용 순위를 우선적으로 변경하는 !important 속성에 대해서 알아보겠습니다. 문법 property: value !important; CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 먼저 설정한 속성값 뒤에 !important를 붙여주어야 합니다. 예문 1. 글자의 색상은 가장 마지막에 설정한 blue 색상을 따라가기 때문에 파란색 적용됩니다. p { color: red; } p { color: green; } p { color: blue; } 2. 글자의 색을 빨간색으로 설정하고 싶다면 red 속성 뒤에 important를 추가해 줍니다. p { color: red !important; } p { col.. 2021. 9. 16.
[CSS] 기초 문법 (선택자, 속성, 값) CSS 기본적인 사용법 CSS 문법 /* 속성자 { 속성: 값; } */ h1 { color: green } - 선택자(selector) : 어떤 요소를 꾸밀지 정의합니다. (h1) - 속성(property) : 어떤 모양을 꾸밀지 선택합니다. (color) - 값(value) : 어떻게 꾸밀지 정합니다. (green) CSS 문법 예문 1. 세미콜론(;)으로 값을 구분하여 여러줄을 입력할 수 있습니다. 2. 값에 공백이 있는 경우 따옴표(') 또는 큰따옴표(")로 감쌉니다. 3. 주석은 /*와 */ 사이에 적습니다. h1 { color: green; /* background-color: grey; */ font-size: 20px; font-family : 'Nanum Gothic'; } 사용법은 이정.. 2021. 9. 16.
[CSS] 배경색만 투명하게 만들기 (RGB) CSS RGB속성을 이용하여 배경의 색만 변경하는 방법에 대해서 알아보겠습니다. CSS에서 opacity 속성은 간단하게 배경의 투명도를 변경해주는 옵션입니다. 하지만 배경과 배경안에 적혀있는 문자를 모두 투명하게 만듭니다. [CSS] 투명도 조절 방법 (opacity) 내가 지정한 색상에 CSS 스타일 옵션을 적용하여 투명도를 조절하는 방법에 대해서 알아보겠습니다. 투명도 설정(opacity) 태그에 배경색을 적용합니다. 그리고 투명도 옵션인 opacity 스타일에 추가 bebeya.tistory.com RGB background-color 사용시 RGB을 사용해서 변경하게 되면 문자의 투명도는 유지할 수 있습니다. HTML코드 투명도를 조절해 보자 CSS코드 div { padding: 100px; b.. 2021. 9. 16.
[CSS] 투명도 조절 방법 (opacity) 내가 지정한 색상에 CSS 스타일 옵션을 적용하여 투명도를 조절하는 방법에 대해서 알아보겠습니다. 투명도 설정(opacity) 태그에 배경색을 적용합니다. 그리고 투명도 옵션인 opacity 스타일에 추가합니다. 투명도는 20%로 지정한 상태입니다. HTML코드 CSS코드 div { background-color: green; opacity:0.2; /* 20% 투명도 */ } 결과화면 투명도 적용 전 투명도 20% 적용 후 이상으로 CSS 투명도를 설정하는 opacity 옵션에 대해서 알아보았습니다. [CSS] 배경색만 투명하게 만들기 (RGB) CSS RGB속성을 이용하여 배경의 색만 변경하는 방법에 대해서 알아보겠습니다. CSS에서 opacity 속성은 간단하게 배경의 투명도를 변경해주는 옵션입니다.. 2021. 9. 16.
[HTML] HP 체력바/칸 만들기 HTML과 CSS 그리고 javascript / Jquery를 이용하여 진행바(체력 칸)를 만드는 방법을 알아보겠습니다. 체력바 칸 버튼 생성 먼저 HTML로 HP 칸을 표현할 버튼을 생성합니다. 부트스트랩 링크로 버튼의 CSS가 자동적용되어서 색상이 파란색으로 표시되고있습니다. 일반 버튼을 하셔도 무방합니다. HTML코드 시작 HP + + + 이벤트 만들기 이제 이벤트를 만들어 보도록 하겠습니다. 진행 순서는 다음과 같습니다. 1. 처음은 "시작" 버튼과 HP 문자만 표시되도록 설정합니다. 2. 시작 버튼을 누를시 HP문자 밑에 체력바 칸이 1칸씩 증가하게 설정합니다. 3. 모두 증가했다면 버튼을 안보이게 만들도록 합니다. 아래는 자바스크립트 소스코드입니다. 주석을 달아두었으니 참조하시면 되겠습니다. .. 2021. 9. 14.
반응형

티스토리툴바