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

3/13/2025
4 minutes to read

드롭다운 리스트는 사용자 인터페이스에서 자주 사용되는 요소 중 하나로, 다양한 옵션을 깔끔하게 제공할 수 있습니다. 이번 아티클에서는 순수한 HTML, CSS, JavaScript만을 사용하여 드롭다운 리스트를 구현하는 방법을 설명합니다.

최종 완성된 결과는 다음 그림과 같습니다.

dul-dropdown 구현 결과

실행 데모는 다음 경로에서 확인할 수 있습니다.

http://www.hawaso.com/html/dul/dul-dropdown.html

프로젝트 폴더 구조

이 튜토리얼에서는 다음과 같은 폴더 구조를 사용합니다.

/html/dul/dul-dropdown.html
/css/dul/dul-dropdown.css
/lib/dul/dul-dropdown.js
/images/dul/dul-dropdown/

각 파일이 담당하는 역할은 다음과 같습니다:

dul-dropdown.html : 드롭다운 리스트를 포함하는 HTML 파일
dul-dropdown.css : 드롭다운 스타일을 정의하는 CSS 파일
dul-dropdown.js : 드롭다운 동작을 제어하는 JavaScript 파일
images/dul/dul-dropdown/ : 드롭다운 리스트에 표시될 아이콘 저장 폴더

1. HTML 코드 작성 (`/html/dul/dul-dropdown.html`)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드롭다운 리스트 예제</title>
    <link rel="stylesheet" href="/css/dul/dul-dropdown.css">
    <link href="/css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <span class="navbar-brand">
                <!-- dul-dropdown 시작 -->
                <span class="dul-dropdown">
                    <button class="dul-btn">
                        <i class="oi oi-grid-three-up dul-icon" style="font-size: medium;"></i>
                    </button>
                    <span class="dul-dropdown-content">
                        <a href="https://www.dotnetnote.com" target="_blank">
                            <img src="/images/dul/dul-dropdown/dul-dropdown-dotnetnote.png" style="width: 20px; height: 20px;" />
                            <span>DotNetNote</span>
                        </a>
                        <a href="https://www.dotnetkorea.com" target="_blank">
                            <img src="/images/dul/dul-dropdown/dul-dropdown-visualacademy.png" style="width: 20px; height: 20px;" />
                            <span>DotNetKorea</span>
                        </a>
                    </span>
                </span>
                <!-- dul-dropdown 종료 -->
                <a class="navbar-brand" href="/Home">Hawaso</a>
            </span>
        </div>
    </nav>

    <script src="/lib/dul/dul-dropdown.js"></script>
</body>
</html>

2. CSS 코드 작성 (`/css/dul/dul-dropdown.css`)

/* 드롭다운 버튼 스타일 */
.dul-btn {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

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

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

/* 드롭다운 링크 스타일 */
.dul-dropdown-content a {
    color: black;
    padding: 10px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.dul-dropdown-content a img {
    margin-right: 8px;
}

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

/* 드롭다운이 열렸을 때 */
.dul-show {
    display: block;
}

/* 아이콘 스타일 조정 */
.dul-icon {
    display: inline-block;
    max-width: 100%;
}

3. JavaScript 코드 작성 (`/lib/dul/dul-dropdown.js`)

document.addEventListener("DOMContentLoaded", function () {
    // 모든 dul-btn 버튼에 클릭 이벤트 추가
    document.querySelectorAll(".dul-btn").forEach(button => {
        button.addEventListener("click", function (event) {
            event.stopPropagation(); // 이벤트 전파 방지

            // 현재 버튼과 연결된 드롭다운 찾기
            let dropdown = this.nextElementSibling;
            if (dropdown && dropdown.classList.contains("dul-dropdown-content")) {
                // 모든 드롭다운 닫기 (하나만 열도록)
                document.querySelectorAll(".dul-dropdown-content").forEach(d => {
                    if (d !== dropdown) {
                        d.classList.remove("dul-show");
                    }
                });

                // 현재 드롭다운 토글
                dropdown.classList.toggle("dul-show");
            }
        });
    });

    // 문서 클릭 시 모든 드롭다운 닫기 (외부 클릭 감지)
    document.addEventListener("click", function () {
        document.querySelectorAll(".dul-dropdown-content").forEach(dropdown => {
            dropdown.classList.remove("dul-show");
        });
    });
});

4. 실행 방법

위의 HTML, CSS, JS 파일을 해당 경로에 저장합니다.
브라우저에서 /html/dul/dul-dropdown.html 파일을 열어 확인합니다.
드롭다운 버튼을 클릭하면 메뉴가 나타나고, 다시 클릭하면 사라지는지 확인합니다.
드롭다운 외부를 클릭하면 메뉴가 자동으로 닫혀야 합니다.

5. 결론

이 아티클에서는 순수한 HTML, CSS, JavaScript만을 사용하여 간단한 드롭다운 리스트를 구현하는 방법을 설명했습니다. 이 코드를 기반으로 드롭다운 디자인을 더욱 개선하거나 기능을 확장할 수 있습니다.

예를 들어, 애니메이션 효과를 추가하거나 여러 개의 드롭다운을 제어하는 기능을 추가할 수도 있습니다. 필요에 따라 이 코드를 활용하여 프로젝트에 맞게 커스터마이징해 보세요!

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