Day6(211227) - CSS 애니메이션 효과

0.햄버거 박스를 만들었다.

checkbox속성을 띤 input태그를 기초로 한다.

#HTML

#CSS

위에 수평막대 3개 아이콘을 '햄버거 아이콘(버튼)'이라고 하는데 누르면 카테고리를 보여준다는 사실을 품고있다. 카테고리 화면을 접었다 폈다 할 때 주로 쓴다.

1.html

input태그와 label, div태그, ul태그로 틀을 잡는다.

2.아이콘 위치와 모양 잡기

3.체크 액션에 반응하게 아이콘 설정

속성 선택자

엘리먼트 중 특정 속성을 가지고 있는 요소만 선택하여 css를 부여할 수 있다.

선택자[속성]
특정한 속성이 있는 태그를 선택한다.

인접 결합자

동위 선택자. 앞에서 지정한 요소의 바로 다음 형제 요소만, 바로 뒤에 위치하는 선택자를 선택한다.

애니메이션 효과

transition: all 0.15s
효과를 주려는 요소의 움직임에 0.15s의 시간을 준다. 움직임을 눈으로 확인할 수 있다.

transform: translateY(-50%) rotate(45deg);
요소가 스스로의 y축 길이 대비 50%를 이동한다. (+는 아랫방향, -는 윗방향)

4.메뉴목록 좌측에서 나오게 하기

id선택자와 유사 속성 선택자를 구분해 좌측 메뉴단을 설정했다.
미리 메뉴를 만들고 브라우저 왼쪽으로 밀어 보이지 않게 했다가 checked되면 다시 오른쪽으로 오면서 보이도록 하는 식이다.

clear: both;를 사용한 레이아웃

clear: both를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화할 수 있다.

<!-- 가볍게 했던거 정리하고 오늘 목표, 햄버거 버튼 만들기, 메뉴 나오게 하기 . -->
<!--인풋 박스를 배운 적이 있다. 복습  -->

memo

선택자
element name(div, body, a, ul, li ...)
속성선택자; 좀 더 상세하게 적는 선택자
선택자 끝에다가 :를 썼을 때 쓸 수
인접접근자(+); 조그만 아이콘, 버튼 만들 때 씀
nth-child() # 이름...
Tip. 내가 봤을 떄 구현할 수 있겠다 싶은 것만 시도해라
큰 레이아웃이 만들기 쉽지 작은 건 어렵다