HTML 드롭다운 메뉴 구현 - 기본부터 응용까지 완벽 정리

서론

웹사이트를 개발하다 보면 사용자 인터페이스(UI)를 개선하기 위해 다양한 기능을 추가해야 합니다. 그중에서도 드롭다운(dropdown) 메뉴는 네비게이션을 효율적으로 구성하는 필수적인 요소입니다. 드롭다운을 활용하면 한정된 공간에서도 여러 개의 메뉴를 깔끔하게 정리할 수 있어 사용자 경험(UX)을 크게 향상시킬 수 있습니다.

이 글에서는 HTML, CSS, 그리고 JavaScript를 활용하여 드롭다운 메뉴를 구현하는 방법을 다루겠습니다. 기초적인 정적 드롭다운부터 동적인 애니메이션 효과가 들어간 드롭다운까지 다양한 방식의 예제를 제공합니다. 직접 따라 해보면서 여러분의 프로젝트에 맞는 방법을 찾아보세요!

본론

1. 기본적인 HTML 드롭다운 구현

드롭다운을 가장 간단하게 구현하는 방법은 <select> 태그를 활용하는 것입니다. 이는 기본적인 폼 요소이며 브라우저가 자동으로 스타일을 적용해 줍니다.

예제 1: 기본 드롭다운 메뉴

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본 드롭다운</title>
</head>
<body>
    <label for="survey">설문조사 선택:</label>
    <select id="survey">
        <option value="ongoing">진행 중 설문조사</option>
        <option value="closed">마감된 설문조사</option>
    </select>
</body>
</html>

이 코드는 <select> 태그를 사용하여 드롭다운을 구성하는 기본적인 방법입니다. 하지만 디자인의 제약이 있어 커스터마이징이 어렵습니다.

2. CSS를 활용한 커스텀 드롭다운

CSS를 사용하면 브라우저 기본 스타일이 아닌, 원하는 스타일을 적용하여 더 세련된 드롭다운을 만들 수 있습니다.

예제 2: CSS로 꾸민 드롭다운 메뉴

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 드롭다운</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            padding: 10px;
            min-width: 150px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>설문조사 선택</button>
        <div class="dropdown-content">
            <p>진행 중 설문조사</p>
            <p>마감된 설문조사</p>
        </div>
    </div>
</body>
</html>

위 코드에서는 display: none;으로 숨겨둔 드롭다운 메뉴를 hover 이벤트를 통해 나타나도록 만들었습니다.

3. JavaScript를 활용한 동적 드롭다운

이번에는 JavaScript를 이용하여 클릭 시 드롭다운이 열리고 닫히도록 구현해 보겠습니다.

예제 3: 클릭으로 열리는 드롭다운

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 드롭다운</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            padding: 10px;
            min-width: 150px;
        }
        .dropdown-content.show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button onclick="toggleDropdown()">설문조사 선택</button>
        <div id="dropdown-menu" class="dropdown-content">
            <p>진행 중 설문조사</p>
            <p>마감된 설문조사</p>
        </div>
    </div>

    <script>
        function toggleDropdown() {
            document.getElementById("dropdown-menu").classList.toggle("show");
        }
    </script>
</body>
</html>

위 코드에서는 toggleDropdown() 함수를 사용하여 버튼 클릭 시 .show 클래스를 추가/제거하여 드롭다운을 열고 닫습니다.

마치며

HTML 드롭다운 메뉴는 다양한 방법으로 구현할 수 있습니다. 기본적인 <select> 태그 사용법부터 CSS를 활용한 커스텀 스타일 적용 그리고 JavaScript를 활용한 동적인 드롭다운까지 살펴보았습니다.

✅ 빠르고 간단한 방법: <select> 태그 사용 ✅ 디자인을 개선하고 싶다면: CSS로 커스텀 스타일 적용 ✅ 더욱 동적인 드롭다운이 필요하다면: JavaScript 활용

웹사이트의 목적과 디자인에 맞게 적절한 방법을 선택하여 적용하면 더욱 깔끔하고 효율적인 드롭다운 메뉴를 만들 수 있습니다. 이제 여러분도 직접 다양한 방식으로 드롭다운을 구현해 보세요! 😊