목록2024/04/25 (1)
사이먼's 코딩노트
[HTML & CSS] 풀 다운 메뉴 만들기
[풀 다운 메뉴 만들기]이번에는 position: absolute; 속성을 응용해서 풀 다운 메뉴를 만들어 봅시다.풀 다운 메뉴란 아래 사진과 같은 메뉴 구성을 의미합니다.기본적으로 4개의 1차 메뉴가 존재하고, 각 1차 메뉴별로 하단에 4개씩의 2차 메뉴가 존재한다.마찬가지로 2차 메뉴별로 이번에는 하단이 아닌 좌측에 3차 메뉴가 존재한다.모든 기능은 hover를 적용하여 마우스 커서를 올려 놓았을 때만 2차, 3차 메뉴가 보이게 된다. HTML 마크업 시 ul 태그 안에는 오직 li 태그만 들어갈 수 있는 점을 주의하여 마크업 해야한다.해당 메뉴를 구성할 때는 ul, li, a 태그가 모두 포함되기 때문에 노멀라이즈 작업을 필수로 진행해야한다.2차 메뉴를 생성할 때는 2차 메뉴 ul 태그에 posi..
HTML & CSS
2024. 4. 25. 11:42