공부했던 자료 정리하는 용도입니다.
재배포, 수정하지 마세요.
drop down navigation bar
: 메인 메뉴 위로 마우스 포인터를 올려놓으면 서브메뉴가 펼쳐지는 방식
오늘은 html과 css만 사용하여 메뉴바를 만드는 방법에 대해서 정리했습니다.
먼저 <body>안에 <ul>과 <li>를 이용해서 리스트를 만들어 줍니다.
전체 메뉴를 <ul>로 묶은 다음 <li>안에 메인 메뉴 항목들을 넣으면 됩니다.
서브메뉴를 넣고 싶다면 <li>안에 다시 <ul>을 이용해서 리스트를 만들어 주시면 됩니다.
나중에 메뉴에 스타일을 적용할 것이기 때문에 가장 바깥 <ul>에 "nav"라는 id를 만들어 줍니다.
입력하고 페이지를 열어보면 기본적인 리스트가 나오는 것을 확인할 수 있습니다.
이제 메인 메뉴부터 차근차근 설정해 주시면 됩니다.
메인 메뉴 스타일을 지정하기 위해서 <head>안에 #nav로 스타일을 지정합니다.
list-style을 이용해서 불릿을 없앴고 height으로 네비게이션의 높이를 지정했습니다.
배경색과 기타 여백 등을 설정합니다.
다음은 메인 메뉴의 리스트 속성입니다.
#nav 뒤에 #nav li를 추가해서 메인 메뉴의 리스트에 대한 스타일을 설정합니다.
float과 position속성을 이용해서 메인 메뉴의 항목들이 가로로 배치되도록 설정했습니다.
페이지를 열어서 확인해보면 메뉴 항목들이 가로로 배치된 것을 확인할 수 있습니다.
다음으로는 메인 메뉴의 링크 스타일입니다.
#nav li a을 추가하고 위의 설정을 추가합니다.
메뉴 칸을 블록 레벨로 설정하고 글자와 기타 설정, 그림자 설정 등을 해주었습니다.
#nav li:hover > a는 메뉴 항목 위로 마우스 포인터를 올려놓았을 때의 스타일입니다.
메뉴에 마우스를 올리면 배경색과 글자색이 변하도록 설정했습니다.
페이지를 열어 확인해보면 링크 스타일이 적용된 것을 확인할 수 있습니다.
이제 메인 메뉴가 끝났으니 서브메뉴를 설정합니다.
#nav ul을 추가해서 서브메뉴 스타일을 지정해 줍니다.
여백이나 배경색 등은 취향에 맞게 설정해주시면 됩니다.
#nav ul li를 이용해서 서브메뉴 각 항목들의 스타일도 설정해 줍니다.
이전에 부모 요소인 메인 메뉴를 float:left로 설정했기 때문에 서브메뉴도 가로로 나오는 상태인데,
float:none으로 설정하면 서브메뉴들은 세로로 나오게 됩니다.
페이지를 열어 확인해보면 서브메뉴가 세로로 나오는 것을 확인할 수 있습니다.
#nav ul a를 추가해서 서브메뉴의 링크 스타일을 지정해줍니다.
글자 굵기를 보통으로 하고 글자색을 검은색으로 바꿔주었습니다.
페이지를 열어 확인해보면 서브메뉴의 글자색이 바뀐 것을 확인할 수 있습니다.
#nav ul li:hover a로 서브메뉴 위로 마우스 포인터를 올려놓았을 때의 스타일을 설정해 줍니다.
서브메뉴에 마우스 포인터를 올리면 배경색이 진해지고, 글자색이 굵어지도록 설정했습니다.
페이지를 열어 확인해보면 서브메뉴에 마우스 포인터를 올려놓았을 때
4-3처럼 색이 진해지고 글자색이 굵어지는 것을 확인할 수 있습니다.
지금 상태에서는 메뉴에 마우스 포인터를 올리지 않았는데도 서브메뉴가 나오는 상태입니다.
아까 설정한 #nav ul에 opacity속성을 추가하면 서브메뉴들을 투명하게 설정해서 평상시에는 안 보이도록 설정할 수 있습니다.
이제 메인 메뉴에 마우스 포인터를 올렸을 때 서브메뉴가 나타나도록 해야 합니다.
#nav ul과 #nav ul li사이에 위의 설정을 추가하면 메뉴 화면 만드는 과정이 끝납니다.
이제 평상시에는 메뉴 화면이 안 보이다가
메인 메뉴에 마우스 포인터를 올려놓으면 위의 화면과 같이 서브메뉴가 등장합니다.
'Front end > 문제 & 실습' 카테고리의 다른 글
| [Javascript] 클릭하면 사진 바뀌게 만들기 (2) | 2020.01.10 |
|---|---|
| [HTML, CSS, Javascript] D-day 계산기 만들기 (2) | 2020.01.06 |
| [HTML, CSS, Javascript] 간단한 구구단 만들기 (1) | 2019.10.29 |
| [HTML] 이미지 맵(image map) 사용하기 (1) | 2019.05.11 |