5/3 - 웹2 (8강)

5/3 - 8강

디자인삼성 2차메뉴 구현

코드펜 : 이동

디자인 삼성 2차메뉴

 

[ css파일 2개 생성, html 연결]

1. 탐색기에서 style 폴더 생성 
2. 기존 style.css 파일 폴더로 이동
3. 새로운 menu2.css 파일 생성
4. html의 head에 css파일 기존 연결 삭제 후 재연결

 

 

[2차메뉴 구현하는 순서 (추천)]

1. absolute가 되어야 하는 구조를 hover까지 생각하며 html에 배치 이때 구조를 눈으로 확인할 수 있도록 문자를 함께 작성한다.
   <div class="menu-2-section">2차메뉴</div>
2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 먼저 잡아준다.
3. 크기를 설정한다.
4. 오브젝트 크기가 큰 순서대로 레이아웃 구현하기 
  > container - 왼쪽박스 - nav태그 - ul - li - a 순서

나머지 내용은 코드에 순서대로 정리되어 있음. 코드로 복습하기!

 

[가상요소]

코드펜: 이동

가상요소

1. 텍스트를 사용하지 않더라도 content: "";라는 코드는 꼭 필요하다.
2. content 속성값인 ""안에 원하는 텍스트를 작성할 수 있다.
3. 적용한 태그(section)의 자식요소로 작동한다.
   ::before -> 첫째자식
   html에 구현된 태그 -> 중간
   ::after -> 마지막자식
4. 가상요소는 display가 inline이다. block이나 flex-item으로 만들어서 사용하는 일이 많다.