순수한 HTML, CSS, JavaScript로 드롭다운 리스트 만들기
드롭다운 리스트는 사용자 인터페이스에서 자주 사용되는 요소 중 하나로, 다양한 옵션을 깔끔하게 제공할 수 있습니다. 이번 아티클에서는 순수한 HTML, CSS, JavaScript만을 사용하여 드롭다운 리스트를 구현하는 방법을 설명합니다.
최종 완성된 결과는 다음 그림과 같습니다.
실행 데모는 다음 경로에서 확인할 수 있습니다.
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만을 사용하여 간단한 드롭다운 리스트를 구현하는 방법을 설명했습니다. 이 코드를 기반으로 드롭다운 디자인을 더욱 개선하거나 기능을 확장할 수 있습니다.
예를 들어, 애니메이션 효과를 추가하거나 여러 개의 드롭다운을 제어하는 기능을 추가할 수도 있습니다. 필요에 따라 이 코드를 활용하여 프로젝트에 맞게 커스터마이징해 보세요!
추천 자료: ASP.NET Core 인증 및 권한 부여
추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!