728x90 css 가상선택자2 [HTML/CSS] 드롭다운 2차메뉴 만들기 [HTML/CSS] 드롭다운 2차메뉴 만들기 홈페이지를 들어가보면 메뉴 탭에 마우스를 가져가면 하위 메뉴가 아래로 내려가면서 보이는 탭이 있다. 위의 메뉴는 디자인이 되지 않아 볼품없지만, 오늘 다룰 코드들을 활용해서 모든 페이지들이 만들어진다고 보면된다. 자바스크립트를 이용해서 더 유연하게 내려온다던지 하는 것을 아래의 코드들을 변형 또는 발전시켜서 만드는 것이다. 아래에서는 html과 css만 사용해서 메뉴를 구현하였다. 코드들을 살펴보자. 1. html 구성 1차 메뉴 아이템 1 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 1차 메뉴 아이템 2 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 1차 메뉴 아이템 3 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메.. 2022. 6. 26. [CSS] 가상선택자, 에밋(emmet) [CSS] 가상선택자, 에밋(emmet) 1. 가상 선택자(가상 클래스 or 추상 클래스) 선택자 뒤에 ':가상이벤트'를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. 가상 선택자를 쓰면 CSS와 HTML의 코드의 양을 줄이며 가독성을 향상시킬 수 있는 장점이 있다. nav > div:nth-child(N){ color: red; } 이렇게 있다고 하면, css는 nav의 N번째 자식만 골라서 효과를 주는 것이다. 만약 N의 자리에 1을 넣는다면, 첫번째 div 엘리먼트만 폰트 색깔이 빨간색으로 바뀐다. 가장 필수적으로 알아야 하는 요소 :nth-child(N) = 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N) = 부모 안에 A라는 요.. 2022. 6. 23. 이전 1 다음 728x90
