Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 드롭다운 메뉴 만들기: HTML과 CSS로 구현하는 완벽 가이드

오늘날 드롭다운 메뉴는 대부분의 현대적인 웹사이트에서 흔히 볼 수 있는 필수 기능입니다. 드롭다운 메뉴를 활용하면 더욱 세련되고 맞춤화된 내비게이션을 구현할 수 있어, 방문자가 원하는 콘텐츠를 손쉽게 찾을 수 있습니다.

HTML만으로도 드롭다운 메뉴의 기본 구조를 만들 수 있지만, CSS를 함께 사용하면 사용자가 메뉴에 마우스를 올렸을 때(hover)에만 콘텐츠가 표시되는 인터랙티브한 드롭다운 메뉴를 완성할 수 있습니다.

이 글에서는 실제 예제와 함께 CSS로 드롭다운 메뉴를 만드는 방법을 단계별로 살펴보겠습니다. 끝까지 읽고 나면 직접 드롭다운 메뉴를 구현할 수 있는 코드와 지식을 갖추게 될 것입니다.

CSS 드롭다운 메뉴의 기본 개념

HTML에는 드롭다운 메뉴를 만들기 위한 전용 태그가 따로 존재하지 않습니다.

하지만 CSS를 활용하면 사용자가 메뉴 위에 마우스를 올렸을 때 텍스트나 링크 목록이 나타나는 메뉴를 만들 수 있습니다. 따라서 이 튜토리얼에서는 HTML과 CSS를 함께 사용해 드롭다운 메뉴를 구현해 보겠습니다.

예제 시나리오

한 지역 배드민턴 동호회에서 온라인으로 동호회 정보를 공유할 수 있는 웹사이트 제작을 의뢰했습니다. 이 웹사이트에는 동호회 소개, 역사, 가입 방법 등 여러 페이지가 포함될 예정입니다.

동호회 측은 사용자가 메뉴에 마우스를 올렸을 때 펼쳐지는 드롭다운 메뉴를 추가해 달라고 요청했습니다. 이 메뉴에는 '장비(Equipment)', '시작하기(Getting Started)', '회원 정보(Membership Information)' 세 개의 페이지로 연결되는 링크가 표시되어야 하며, 메뉴 라벨은 "신규 회원(New Members)"이어야 합니다.

CSS 드롭다운 메뉴 예제

지금부터 이 드롭다운 메뉴를 CSS로 어떻게 만들 수 있는지 살펴보겠습니다.

1단계: HTML로 기본 메뉴 구조 만들기

먼저 HTML로 기본 메뉴 구조를 작성합니다. 다음 코드를 사용합니다:

<div class="menu">
	<button class="dropdown_button">New Members</button>
	<div class="content">
		<a href="equipment.html">Equipment</a>
		<a href="gettingstarted.html">Getting Started</a>
		<a href="membership.html">Membership Information</a>
	</div>
</div>

위 코드에서 수행한 작업은 다음과 같습니다:

  • menu 클래스를 가진 <div> 태그를 만들어 메뉴 전체 코드를 담습니다.
  • "New Members"라는 텍스트가 표시되는 버튼을 생성합니다.
  • 링크 목록이 들어갈 새로운 <div>를 만듭니다.
  • 세 개의 <a> 태그를 사용해 장비, 시작하기, 회원 정보 페이지로 이동하는 링크를 만듭니다.

이 시점에서는 아직 스타일이 적용되지 않았기 때문에 메뉴가 평범한 HTML 형태로 화면에 표시됩니다.

2단계: CSS로 스타일 적용하기

이제 배드민턴 동호회 웹사이트의 드롭다운 메뉴에 적용할 CSS 코드입니다:

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

코드 상세 분석

dropdown_button 클래스는 드롭다운 버튼의 스타일을 담당합니다. 버튼 배경색을 연한 녹색(#90EE90)으로 설정하고, 텍스트 색상을 흰색으로 변경하며, 10px의 안쪽 여백(padding)을 추가하고, 글꼴 크기를 15px로 지정한 뒤, 버튼 테두리를 제거합니다.

content 클래스는 드롭다운 메뉴 콘텐츠의 스타일을 저장합니다. 이 클래스는 기본적으로 숨겨져 있고(display: none), 연한 회색 배경을 가집니다. 또한 최소 너비가 150px로 설정되어 있으며, position: absolute로 절대 위치에 배치됩니다. z-index 값이 1이기 때문에 웹페이지의 다른 모든 요소 위에 표시됩니다.

menu 클래스는 메뉴 전체의 스타일을 담당합니다. <div class="menu"> 태그의 내용을 웹페이지의 다른 요소들을 기준으로 상대적으로 배치하고(position: relative), display: inline-block을 사용해 요소를 인라인 블록 컨테이너로 표시합니다.

.content a 스타일은 드롭다운 메뉴 내부의 링크를 꾸미는 데 사용됩니다. text-decoration: none으로 링크의 밑줄을 제거하고, display: block으로 각 링크를 블록 형태로 표시하며, 링크 색상을 검은색으로, 안쪽 여백을 16px로 설정합니다.

코드 마지막 부분의 .content a:hover 규칙은 사용자가 커서로 메뉴 내 링크 위에 마우스를 올렸을 때의 동작을 정의합니다. 이 경우 해당 링크의 배경색이 연한 회색(#f7f7f7)으로 변경됩니다.

또한 .menu:hover .content 규칙은 사용자가 메뉴 위에 마우스를 올리고 있을 때 메뉴 콘텐츠를 블록 형태로 표시하도록 지정합니다. 바로 이 규칙이 드롭다운 효과의 핵심이라 할 수 있습니다.

CSS :hover 선택자의 작동 방식을 더 깊이 이해하고 싶다면 관련 가이드 문서를 추가로 참고하는 것도 좋은 방법입니다.

오른쪽에 열리는 드롭다운 메뉴 만들기

앞선 예제에서 만든 드롭다운 메뉴는 화면 왼쪽을 기준으로 펼쳐집니다. 하지만 상황에 따라 드롭다운 메뉴가 화면 오른쪽에서 열리기를 원할 수도 있습니다.

이럴 때는 위 코드에 다음 CSS 규칙을 추가하기만 하면 됩니다:

.content {
	right: 0;
}

이 규칙을 적용하면 드롭다운 메뉴와 그 콘텐츠가 화면 오른쪽을 기준으로 정렬되어 표시됩니다.

마무리

HTML로 드롭다운 메뉴의 기본 구조를 만들고, CSS로 스타일을 적용하면 완성도 높고 미려한 드롭다운 메뉴를 구현할 수 있습니다.

이 글에서는 실제 예제를 통해 HTML과 CSS로 드롭다운 메뉴를 만드는 방법을 알아보았습니다. 소개한 코드를 응용하면 자신만의 스타일로 드롭다운 메뉴를 자유롭게 만들 수 있을 것입니다.