HTML+CSS 드롭다운 메뉴 튜토리얼
웹 페이지에서 네비게이션 메뉴는 사용자의 여정을 안내하는 매우 중요한 요소입니다. 방문자들이 웹사이트를 탐색할 때, 메뉴의 구조와 사용성은 전반적인 사용자 경험에 큰 영향을 미치게 됩니다. 메뉴가 직관적이고 사용하기 편리하다면 사용자들은 원하는 정보를 쉽게 찾을 수 있겠지만, 그렇지 않다면 사용자 만족도가 떨어질 수밖에 없죠.
이번 튜토리얼에서는 HTML과 CSS를 활용하여 드롭다운 메뉴를 구현하는 방법을 자세히 살펴보겠습니다. 드롭다운 메뉴는 메인 메뉴 아이템을 클릭하면 하위 메뉴가 펼쳐지는 형태로, 제한된 공간에서도 다양한 메뉴 옵션을 제공할 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.
이번 튜토리얼을 통해 웹 페이지의 네비게이션 메뉴의 기본적인 구현 방법을 자세히 알아보도록 하겠습니다.
HTML 구조
먼저 HTML 구조를 만들어 보겠습니다. 기본적인 메뉴와 서브 메뉴 항목을 정의해 줍시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML/CSS 드롭다운 메뉴</title>
<style type="text/css">
/* CSS 스타일은 여기서 추가합니다. */
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">커머스</a>
<ul>
<li><a href="#">쇼핑몰 구축</a></li>
<li><a href="#">쇼핑몰 디자인</a></li>
<li><a href="#">마켓/SNS 판매</a></li>
<li><a href="#">쇼핑몰 운영도구</a></li>
</ul>
</li>
<li><a href="#">유튜브 쇼핑</a>
<ul>
<li><a href="#">서비스 소개</a></li>
<li><a href="#">유튜브 쇼핑 시작</a></li>
<li><a href="#">크리에이터 섭외</a></li>
</ul>
</li>
<li><a href="#">홈페이지</a>
<ul>
<li><a href="#">워드프레스</a></li>
<li><a href="#">도메인</a></li>
<li><a href="#">웹호스팅</a></li>
<li><a href="#">서버호스팅</a></li>
</ul>
</li>
<li><a href="#">마케팅</a>
<ul>
<li><a href="#">국내 마케팅</a></li>
<li><a href="#">해외 마케팅</a></li>
<li><a href="#">광고 컨설팅 신청</a></li>
</ul>
</li>
<li><a href="#">엔터프라이즈</a>
<ul>
<li><a href="#">서비스 소개</a></li>
<li><a href="#">안정적인 인프라</a></li>
<li><a href="#">비즈니스 확장</a></li>
<li><a href="#">편리한 운영</a></li>
<li><a href="#">레몬비타 최고</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
위의 HTML 구조는 메인 메뉴와 서브 메뉴 항목을 포함하고 있습니다. 각 메인 메뉴 항목은 <li> 태그로 감싸져 있으며, 이 안에 서브 메뉴를 정의하는 또 다른 <ul> 태그가 들어 있습니다.
위 메뉴는 카페24 사이트의 메뉴명을 차용하였습니다.
CSS 스타일링
다음으로 HTML 구조를 스타일링하여 드롭다운 메뉴를 완성해보겠습니다. CSS를 통해 메뉴의 모양과 동작 방식을 정의합니다.
/* 여백을 제거한다 */
* {
margin: 0;
padding: 0;
}
/* ul, li 태그의 list 스타일을 제거한다 */
ul li {
list-style: none;
}
/* a 태그에 텍스트 밑줄을 지우고 컬러를 #333으로 지정 */
a {
text-decoration: none;
color: #333;
}
/* 메뉴 박스 스타일 설정 */
/* 글자 크기를 15px로, 글꼴은 맑은 고딕, 굵게 설정 */
/* 넓이는 750px, 높이는 50px로 설정 */
/* 배경색은 #ddd, 글자색은 검정색으로 설정 */
/* 라인 높이를 50px로 설정하여 수직 중앙 정렬 */
/* 메뉴 박스를 가운데 정렬하고, 글자도 가운데 정렬 */
#menu {
font: bold 15px "malgun gothic";
width: 750px;
height: 50px;
background: #ddd;
color: black;
line-height: 50px;
margin: 0 auto;
text-align: center;
}
/* 메뉴의 자식 ul의 자식 li를 왼쪽 정렬 */
/* 각 li의 넓이를 150px로 설정 */
/* position을 relative로 설정하여 서브 메뉴의 위치를 설정할 수 있게 함 */
#menu > ul > li {
float: left;
width: 150px;
position: relative;
}
/* 서브 메뉴 숨기기 */
/* display를 none으로 설정하여 기본적으로 서브 메뉴를 숨김 */
/* position을 absolute로 설정하여 상위 메뉴 기준으로 위치를 설정 */
/* top을 50px로 설정하여 상위 메뉴 바로 아래에 위치 */
/* left를 0으로 설정하여 수평 위치를 상위 메뉴와 맞춤 */
/* 넓이를 150px로 설정하여 상위 메뉴와 동일하게 맞춤 */
/* 배경색을 #eee로 설정하여 메인 메뉴보다 더 밝게 설정 */
#menu ul ul {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 150px;
background: #eee;
}
/* 상위 메뉴에 마우스를 올리면 서브 메뉴 보이기 */
/* 부모 li에 마우스를 올리면 display를 block으로 변경하여 서브 메뉴를 보이게 함 */
#menu ul li:hover > ul {
display: block;
}
/* 서브 메뉴 스타일 */
/* 각 서브 메뉴 항목의 넓이를 150px로 설정하여 상위 메뉴와 동일하게 맞춤 */
/* 텍스트를 가운데 정렬 */
#menu ul ul li {
width: 150px;
text-align: center;
}
/* 서브 메뉴 항목 스타일 */
/* 서브 메뉴 항목의 높이를 맞추기 위해 line-height를 50px로 설정 */
#menu ul ul li a {
line-height: 50px;
}
/* 서브 메뉴 항목에 마우스를 올리면 글자색 변경 */
/* 호버 상태에서 글자색을 파란색으로 변경 */
#menu ul ul li a:hover {
color: blue;
}
위의 CSS 스타일은 드롭다운 메뉴의 모양과 동작 방식을 정의합니다. 각 부분을 분리하여 자세히 살펴보겠습니다.
전체 영역에서 여백 없애기
* {
margin: 0;
padding: 0;
}이 코드는 모든 HTML 요소의 기본 여백과 패딩을 제거하여, 브라우저의 기본 스타일이 적용되지 않도록 합니다.
ul, li 태그의 리스트 스타일 제거
ul li {
list-style: none;
}기본적으로 HTML의 리스트 항목은 불릿 포인트 스타일을 가지는데, 이 스타일을 제거합니다.
a 태그 스타일링
a {
text-decoration: none;
color: #333;
}
링크의 기본 밑줄 스타일을 제거하고, 텍스트 색상을 #333으로 설정합니다.
메뉴 박스 스타일 설정
#menu {
font: bold 15px "malgun gothic";
width: 750px;
height: 50px;
background: #ddd;
color: black;
line-height: 50px;
margin: 0 auto;
text-align: center;
}메뉴 박스의 스타일을 설정합니다. 글자 크기를 15px로 설정하고, 맑은 고딕 글꼴을 사용하며, 글자 색상을 검정색으로 설정합니다. 박스의 넓이를 750px, 높이를 50px로 설정하고, 배경색을 #ddd로 설정합니다. 또한, line-height를 50px로 설정하여 텍스트를 수직으로 가운데 정렬하고, 메뉴 박스를 가운데 정렬합니다.
메인 메뉴 항목 스타일 설정
#menu > ul > li {
float: left;
width: 150px;
position: relative;
}메인 메뉴 항목을 왼쪽으로 정렬하고, 각 항목의 넓이를 150px로 설정합니다. position: relative로 설정하여 서브 메뉴의 위치를 상대적으로 조정할 수 있게 합니다.
서브 메뉴 숨기기
#menu ul ul {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 150px;
background: #eee;
}서브 메뉴를 기본적으로 숨깁니다. position: absolute로 설정하여 상위 메뉴 기준으로 위치를 설정합니다. top: 50px로 설정하여 상위 메뉴 바로 아래에 위치하게 하고, left: 0으로 설정하여 수평 위치를 맞춥니다. 넓이를 150px로 설정하여 상위 메뉴와 동일하게 하고, 배경색을 메인 메뉴보다 더 밝은 #eee로 설정합니다.
상위 메뉴에 마우스를 올리면 서브 메뉴 보이기
#menu ul li:hover > ul {
display: block;
}상위 메뉴 항목에 마우스를 올리면, 서브 메뉴를 보이게 설정합니다. display: block으로 변경하여 서브 메뉴가 나타나도록 합니다.
서브 메뉴 스타일
#menu ul ul li {
width: 150px;
text-align: center;
}서브 메뉴 항목의 넓이를 150px로 설정하고, 텍스트를 가운데 정렬합니다.
서브 메뉴 항목 스타일
#menu ul ul li a {
line-height: 50px;
}서브 메뉴 항목의 높이를 맞추기 위해 line-height를 50px로 설정합니다.
서브 메뉴 항목에 마우스를 올리면 글자색 변경
#menu ul ul li a:hover {
color: blue;
}서브 메뉴 항목에 마우스를 올리면, 글자색을 파란색으로 변경합니다.
드롭다운 메뉴 완성
이상으로 HTML과 CSS를 사용하여 드롭다운 메뉴를 완성했습니다. 드롭다운 메뉴는 사용자가 사이트를 탐색하는 데 있어 매우 유용합니다. 이 튜토리얼을 통해 드롭다운 메뉴를 만드는 기본적인 방법을 알아보았으며, 이를 응용하여 더 복잡하고 다양한 스타일의 메뉴를 만들 수 있습니다.
'vita_Programing' 카테고리의 다른 글
| MSSQL 개별 테이블 사용 용량 확인하는 방법 (0) | 2024.05.27 |
|---|---|
| javascript/jquery 다중 체크박스 값 가져오기 (0) | 2024.05.27 |
| Javascript Input 태그에 추천 입력값 보여주기 (0) | 2024.05.24 |
| 자바스크립트 배열 컨트롤 중급편 2/2 (0) | 2024.05.20 |
| 자바스크립트 배열 컨트롤 중급편 1/2 (1) | 2024.05.19 |
