클릭 드롭다운 리스트 구현하기

3/13/2025
5 minutes to read

이 아티클에서는 HTML, CSS, JavaScript를 활용하여 클릭으로 작동하는 간단한 드롭다운 리스트를 만들어보겠습니다. 드롭다운 리스트는 사용자가 버튼을 클릭할 때 나타나고, 리스트 외부를 클릭하면 자동으로 닫히는 구조를 가지고 있습니다. 이와 같은 드롭다운 기능은 내비게이션 메뉴, 설정 옵션 등 다양한 곳에서 유용하게 활용됩니다.

이 아티클의 업그레이드된 버전 강좌는 다음 링크를 참고하세요.

순수한 HTML, CSS, JavaScript로 드롭다운 리스트 만들기

1. 드롭다운 리스트의 전체 코드

아래는 HTML, CSS, JavaScript로 구성된 드롭다운 리스트의 완성된 코드입니다. 이 코드는 클릭으로 메뉴가 열리고, 외부 클릭 시 자동으로 닫히도록 동작합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>클릭 드롭다운 리스트</title>
  <style>
    /* 드롭다운 버튼 스타일 */
    .dul-btn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dul-btn:hover, .dul-btn:focus {
      background-color: #2980B9;
    }

    /* 드롭다운 컨테이너 */
    .dul-dropdown {
      position: relative;
      display: inline-block;
    }

    /* 드롭다운 내용 */
    .dul-dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    /* 드롭다운 링크 스타일 */
    .dul-dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dul-dropdown-content a:hover {
      background-color: #ddd;
    }

    /* 드롭다운이 열렸을 때 표시 */
    .dul-show {
      display: block;
    }
  </style>
</head>
<body>

  <!-- 드롭다운 버튼과 리스트 -->
  <div class="dul-dropdown">
    <button onclick="dulToggleDropdown()" class="dul-btn">Dropdown</button>
    <div id="dulDropdownContent" class="dul-dropdown-content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </div>

  <script>
    /* 드롭다운 열고 닫기 함수 */
    function dulToggleDropdown() {
      document.getElementById("dulDropdownContent").classList.toggle("dul-show");
    }

    // 드롭다운 외부를 클릭하면 리스트 닫기
    window.onclick = function(event) {
      if (!event.target.matches('.dul-btn')) {
        var dropdowns = document.getElementsByClassName("dul-dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('dul-show')) {
            openDropdown.classList.remove('dul-show');
          }
        }
      }
    }
  </script>

</body>
</html>

2. 코드 설명

(1) HTML 구조

<div class="dul-dropdown">: 드롭다운 전체를 감싸는 컨테이너입니다.
<button>: 사용자가 클릭하는 버튼입니다. 버튼을 클릭하면 드롭다운 리스트가 나타나도록 설계했습니다.
<div class="dul-dropdown-content">: 드롭다운에 표시될 리스트 항목입니다. 링크 형태로 구성하여 클릭 시 다른 페이지로 이동할 수 있습니다.

(2) CSS 스타일

버튼 스타일: dul-btn 클래스는 버튼의 배경색과 폰트 크기, 패딩을 설정합니다. 마우스를 올리거나 클릭하면 배경색이 변하도록 호버 효과도 추가했습니다.
드롭다운 리스트 스타일: dul-dropdown-content 클래스는 드롭다운의 기본 상태를 display: none으로 설정해 숨겨 둡니다. 드롭다운이 열리면 dul-show 클래스가 추가되어 display: block으로 전환됩니다.
드롭다운 항목: 각 링크에 마우스를 올리면 배경색이 변하도록 설정해 시각적 피드백을 제공합니다.

(3) JavaScript 기능

dulToggleDropdown(): 버튼을 클릭하면 드롭다운 리스트의 표시 여부를 토글(toggle)합니다.
외부 클릭 시 닫기 기능:
- window.onclick 이벤트를 사용하여 페이지 어디든 클릭했을 때 발생하도록 설정했습니다.
- 클릭한 대상이 드롭다운 버튼이 아닌 경우, 열린 드롭다운 리스트를 모두 닫습니다.

3. 동작 방식

사용자가 "Dropdown" 버튼을 클릭하면, 드롭다운 리스트가 열립니다.
사용자가 드롭다운 외부를 클릭하면, 리스트가 자동으로 닫힙니다.
리스트 내의 항목을 클릭하면 해당 링크로 이동할 수 있습니다.

4. 결론

이와 같은 클릭 드롭다운 리스트는 웹사이트에서 사용자 경험을 개선하는 데 큰 역할을 합니다. 간단한 내비게이션 메뉴부터 설정 옵션에 이르기까지 다양한 곳에 적용할 수 있습니다. 이번 예제에서는 기본적인 구조와 스타일을 적용했지만, 필요에 따라 CSS와 JavaScript를 확장하여 더욱 정교하게 커스터마이즈할 수 있습니다.

이제 이 코드를 기반으로 자신의 프로젝트에 맞게 응용해 보세요!

추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!