웹2 8일차

 

 

2차 메뉴는 헷갈릴 가능성이 있어 따로 css폴더를 만들어서 2차메뉴 구성해야함

2차 메뉴 링크 연결 방법

2차 메뉴는 새로운 폴더를 활용하여 넣는 것이 좋다

 

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

1. absolute가 되어야 하는 구조를 hover까지 생각하면서 html에 배치(이때 구조를 눈으로 확인할 수 있도록 문자를 함께 작성한다.)
ㄴ <div class-"menu-2section">2차메뉴</div>

2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 잡아준다.

3. 크기를 설정한다.

4. 상자(오브젝트) 크기가 큰 순서대로 레이아웃 구현하기
- container
- 왼쪽박스
- nav 태그
- ul 태그
- li 태그
- a 태그

 

---

2차메뉴 만들 때 가장 많이 하는 실수

 

 

그래서~

bottom이 아닌 top 100

 

이거 다시 이해 필요........................

상위 앨리먼트 x 부모 앨리먼트로 작성한다

top:100% = 탑바의 높이만큼 밀었다는 것을 의미한다

 

---

가상요소(/태그를 쓰지 않고 태그만들기)

수업내용 코드펜 바로가기

 

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

 

- 가상요소 적용해보기

---

2차메뉴 여백주는 방법

--

ver.1

 

ver.2 - 텍스트 클릭 했을 때만 사이트 이동

 

ver.3

 

 

3개 정리

 

---

복습-> 2차메뉴 구현 전 파일 다운받아서 2차메뉴 만들어보기

 

수업내용 코드펜 바로가기