헤더와 드롭다운 메뉴

Header

쓰는 이유 : 많은 div에서 헤더를 구분짓기 위해서이다. 기능적으로는 div와는 다른 게 없다.

검색 & 서브메뉴

• body 태그에 sub-menu 클래스를 만든다.
• ul과 li 태그를 이용하여 서브메뉴 요소들을 만든다.
• 구글 아이콘을 이용하여 검색 아이콘을 생성한다.
• input type= "text"를 작성하여 입력창을 만든다.

• 정렬과 배치를 사용하여 원하는 위치에 서브메뉴를 구성한다.
• hover, focus, transition를 이용하여 검색을 꾸민다.
• 그리고 돋보기 아이콘을 눌러도 반응할 수 있도록 JS를 사용한다.

focus와 blur는 서로 반대라고 생각하면 된다.

이러면 얼추 원하는 서브 메뉴가 완성된다.

메인 메뉴

• ul태그와 li태그를 이용하여 기본 소스들을 만든다
• hover와 display를 사용하여 드롭 메뉴를 만든다.
• 여기서도 배치와 정렬을 중요시 여기고 색깔포인트도 신경쓰면 된다.

BEM

Block Element Modifier
BEM이란 HTML 클래스 속성의 작명법을 의미한다.

• 방법1 : 요소__일부분
• 방법2 : 요소--상태

선택자를 지정할 때 중복을 막고 정확하게 선택자를 지정하기 위해서 사용한다.

Section

순차적 애니메이션