$$config title: [HTML/CSS] HTML - 2차메뉴 만들기 및 선택자 훈련 keywords: - HTML - 2차메뉴 $$ # 2차메뉴 마크업 [참고 사항] - `ul > li > a` 는 불변의 패턴이다. - ul은 ul을 자식으로 둘 수 없다. - li는 li를 자식으로 둘 수 없다. - a는 대부분의 경우 오직 텍스트만 가질 수 있다. - `ul의 자식은 무조건 li` 여야 한다. - li는 그 어떤 것도 자식으로 가질 수 있다. ? 마크업 방식 => li의 자식으로 a와 ul을 두고 2차메뉴 마크업 --- menu-bar (nav) > 1차메뉴(ul) > 1차메뉴 아이템(li) > 1차메뉴 텍스트(a) + 2차메뉴(ul) > 2차메뉴 아이템(li) > 2차메뉴 텍스트(a) ```html ``` ## 선택자 튜토리얼 단계 1. 2차메뉴까지 마크업해주세요.(즉 아래 메뉴들을 하나로 합쳐주세요.) 2. 2차메뉴까지 마크업해주세요.(즉 아래 메뉴들을 하나로 합쳐주세요.) 3. 2차메뉴아이템을 모두 숨겨주세요. 4. CSS 를 전부 초기화 하고 2차 메뉴를 숨겨주세요. 5. CSS 를 전부 초기화 하고 2차 메뉴아이템 텍스트를 숨겨주세요. 6. CSS 를 전부 초기화 하고 1차 메뉴아이템 텍스트를 숨겨주세요. 7. 기존 CSS를 전부 지우고, 1차 메뉴아이템 텍스트에 마우스를 올렸을 때 인접동생인 ul의 배경색을 red로 변경해주세요. (힌트 : 인접동생선택자 : `+`) 8. CSS 를 전부 초기화 하고 2차 메뉴를 숨긴 상태에서 1차 메뉴 아이템에 마우스를 올렸을 때 자식인 메뉴(2차메뉴)를 보여주세요. 9. CSS 를 전부 초기화 하고 2차 메뉴를 숨긴 상태에서 1차 메뉴 아이템에 마우스를 올렸을 때 자식인 메뉴(2차메뉴)를 보여주세요. 10. 기존 CSS를 전부 지우고, 서브메뉴(1차 메뉴를 제외한 모든 메뉴)를 숨긴 상태에서 메뉴 아이템에 마우스를 올렸을 때 자식인 메뉴를 보여주세요. ### 선택자 튜토리얼 예제 $$codepen https://codepen.io/hoyeol0513/embed/poLvyXE?default-tab=css%2Cresult $$