0. 목차
1. 복습
2. 선택자
3. display:none
4. cursor:pointer
5. transform
6.transition
7. 햄버거 메뉴 만들기
1. 복습
input의 타입을 checkbox로 지정해주고 id를 지정해준 뒤에
label 엘리먼트의 for 속성에 input의 id를 지정 해주면,
label의 텍스트컨텐트를 클릭해도 체크박스에 체크가 되는 것을 확인할 수 있다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
2. 선택자
tag 선택자
id 선택자
class 선택자
이외에도 다양한 선택자들이 있다.
2-1. 속성선택자
'[]' 를 이용해 엘리먼트에 부여된 속성을 통해서도 CSS선택자를 지정할 수 있다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
위의 코드는 div 엘리먼트중 id가 box인 것을 선택해서 background를 dodgerblue로 변경했다.
id 뿐만 아니라 다른 속성도 이용 가능하다.
2-2. 가상선택자 checked
':' 를 이용해 가상선택자를 선택할 수 있다.
저번에 다뤘던 :hover 역시 가상선택자 중 하나이다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
그 중 checked는 체크박스에 체크가 됐을 때 수행 될 스타일을 지정해 줄 수 있는 선택자이다.
2-3. 인접선택자
'+' 를 이용해 선택한 엘리먼트와 인접한 형제의 엘리먼트를 선택할 수 있다.
예를 들어, A + B 의 경우에는 A와 인접한 엘리먼트인 B를 선택한다
See the Pen A + B by donghunlee (@dev_kong_dh) on CodePen.
위의 코드는 id 속성이 check_box로 부여된 input 엘리먼트와 인접한 label 엘리먼트를 선택한 것이다.
3. display: none;
display: none; 속성을 사용하면
선택된 엘리먼트는 화면에서 사라진다.
단, 화면에서 보이지 않을 뿐 기능적으로는 살아있어서,
엘리먼트가 삭제된 것은 아니다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
4. cursor : pointer;
cursor: pointer; 속성을 사용하면,
선택된 엘리먼트에 커서가 올라갈 때 커서의 모양이 포인터 모양으로 바뀐다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
div 영역에 커서가 올라가면 pointer로 모양이 바뀐다.
pointer 이외에도 많은 속성이 있으니 참고하면 좋을 듯 하다.
5. transform: translate();
transform: translate() 속성을 이용하면,
현재위치에서 엘리먼트를 이동시켜 줄 수 있다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
6. transition
원래라면 순식간에 동작하는 스타일을
지정해준 시간동안 동작하는 과정을 보여주는 속성이다.
코드를 보면 조금 더 이해가 빠르다.
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
위 결과물에선 동작이 순식간에 진행 되지만
See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.
이 결과물에선 동작하는 과정을 350ms(=0.35s) 동안 보여준다.
7. 햄버거 메뉴 만들기
이제 햄버거 메뉴를 만들기 위해 필요한 것들은 다 배웠다.
만들어 보자.
마크업을 하고
<body>
<input type="checkbox" id="icon" />
<label for="icon">
<span></span>
<span></span>
<span></span>
</label>
<div id="header"></div>
</body>스타일도 지정해주면
#check_box {
display: none;
}
#check_box + label {
position: relative;
display: block;
width: 60px;
height: 40px;
cursor: pointer;
}
#check_box + label > span {
position: absolute;
display: block;
width: 100%;
height: 5px;
background: black;
border-radius: 5px;
transition: all 300ms;
}
#check_box:checked + label > span:nth-child(1) {
top: 50%;
transform: translate(0, -50%);
transform: rotate(45deg);
}
#check_box + label > span:nth-child(2) {
top: 50%;
transform: translate(0, -50%);
}
#check_box:checked + label > span:nth-child(2) {
opacity: 0;
}
#check_box + label > span:nth-child(3) {
bottom: 0;
}
#check_box:checked + label > span:nth-child(3) {
top: 50%;
transform: translate(0, -50%);
transform: rotate(-45deg);
}이렇게 하면 잘 동작 하는 걸 아래에서 확인 할 수 있다.
See the Pen hamburger menu by donghunlee (@dev_kong_dh) on CodePen.
아직 끝이 아니다.
이제 저 햄버거 메뉴를 클릭 했을 때,
메뉴가 튀어 나오게 해보자.
side_menu를 추가 해주고
<body>
<input type="checkbox" id="check_box" />
<label for="check_box">
<span></span>
<span></span>
<span></span>
</label>
<div id="side_menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</body>스타일을 추가해주면
#check_box + label {
position: relative;
display: block;
width: 60px;
height: 40px;
cursor: pointer;
/* z-index 추가 */
z-index: 2;
}
#side_menu {
position: fixed;
width: 300px;
height: 100%;
background-color: tomato;
left: -300px;
transition: all 300ms;
z-index: 1;
top: 0px;
padding: 60px 20px 20px 20px;
box-sizing: border-box;
}
#check_box:checked + label + #side_menu {
left: 0;
}See the Pen ham by donghunlee (@dev_kong_dh) on CodePen.
기가 막히게 작동을 한다.
끝
'경일 > HTML & CSS' 카테고리의 다른 글
| 페이지 이동 원리/form 태그 사용 (0) | 2021.12.29 |
|---|---|
| 레이어팝업/모달팝업 이용해서 회원가입 창 만들기 (0) | 2021.12.28 |
| html, css 클론코딩 (0) | 2021.12.23 |
| block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 (1) | 2021.12.22 |
| HTML 기초 / CSS기초 (0) | 2021.12.21 |
댓글