기본 html로 dropdown 메뉴 만들기: HTML Dropdown 활용 실습
들어가며
개발자로서 간단한 HTML Dropdown 메뉴를 만들 수 있다면 웹사이트에 다양한 기능을 손쉽게 추가할 수 있습니다. 이번 기사에서는 복잡한 스크립트나 프레임워크를 사용하지 않고, 순수한 HTML만을 사용하여 dropdown 메뉴를 구현하는 방법에 대해 알아보겠습니다.
Dropdown 메뉴란?
Dropdown 메뉴는 사용자의 액션에 반응하여 목록 형태로 표시되는 메뉴입니다. 주로 네비게이션 바나 버튼을 클릭하면 아래로 펼쳐지는 형태로 많이 볼 수 있습니다.
장점
- 간결한 디자인: 화면에 많은 내용을 보여주지 않고 필요한 경우에만 표시되므로 깔끔한 레이아웃 유지 가능.
- 사용자 경험 향상: 원하는 내용에 바로 접근할 수 있어 사용자의 편의성을 증가시킵니다.
HTML, CSS, JS로 Dropdown 메뉴 구성하기
아래는 기본적인 HTML 구조를 사용하여 dropdown 메뉴를 만드는 방법입니다.
결과 미리보기
기본 구조 작성
<div class="dropdown">
<button class="dropbtn">Dropdown 메뉴</button>
<div class="dropdown-content">
<a href="#">링크 1</a>
<a href="#">링크 2</a>
<a href="#">링크 3</a>
</div>
</div>
여기서 .dropdown은 전체 dropdown 메뉴를 감싸는 외부 컨테이너이며, .dropbtn은 dropdown 버튼, .dropdown-content는 펼쳐지는 메뉴의 내용을 담는 컨테이너입니다.
스타일 적용
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
Javascript로 동작 연결하기
순수한 HTML만으로 dropdown을 표현했지만, 실제 동작을 위해서는 JavaScript가 필요합니다.
기본 스크립트 작성
document.querySelector(".dropbtn").addEventListener("click", function() {
document.querySelector(".dropdown-content").style.display =
(document.querySelector(".dropdown-content").style.display === 'none') ? 'block' : 'none';
});
이 스크립트는 .dropbtn 버튼을 클릭할 때 .dropdown-content의 표시 상태를 토글합니다.
Select로 드롭다운 만들기
기본 HTML 요소 중에 select 태그를 활용하면, 간단하게도 매우 효과적인 드롭다운 메뉴를 구현할 수 있습니다. 이 방법은 JavaScript를 사용하지 않고도 웹 페이지에 드롭다운을 쉽게 추가할 수 있는 방법입니다.
결과 미리보기
HTML Select 태그의 구조
HTML에서 select 태그는 옵션을 선택할 수 있는 드롭다운 메뉴를 생성합니다. 각 옵션은 option 태그로 표시되며, 이 태그들은 select 태그 내부에 위치해야 합니다.
<select name="fruits" id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
여기서 select 태그는 드롭다운 메뉴의 전체를 나타내고, 각 option 태그는 메뉴에서 선택할 수 있는 개별 항목입니다.
Select 태그의 속성 활용하기
select 태그는 다양한 속성을 가지고 있습니다. 몇 가지 중요한 속성은 다음과 같습니다:
name: 폼 데이터를 제출할 때 사용되는 이름입니다.id: CSS나 JavaScript에서 요소를 참조할 때 사용되는 고유 식별자입니다.
<select name="fruits" id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
CSS로 스타일링하기
select 태그 또한 CSS를 통해 다양하게 스타일링할 수 있습니다.
select {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
option {
padding: 10px;
}
JavaScript로 동적 처리하기
select 태그는 자체적으로 드롭다운 기능을 제공하지만, 필요한 경우 JavaScript를 사용하여 더 동적인 처리를 할 수 있습니다.
document.getElementById('fruits').addEventListener('change', function() {
alert('You selected: ' + this.value);
});
이 코드는 사용자가 새로운 항목을 선택할 때마다 알림창을 띄우게 됩니다.
요약 및 활용 팁
select 태그를 활용한 드롭다운 메뉴는 간단하고도 빠르게 구현할 수 있는 장점이 있습니다. 속성을 잘 활용하고 필요한 경우 JavaScript로 동적 기능을 추가하여 사용자 경험을 더욱 풍부하게 만들 수 있습니다.
이제 select 태그를 활용한 방법까지 알아봤습니다. 각 방법은 장단점이 있으며, 프로젝트의 요구 사항에 따라 적절한 방법을 선택하면 됩니다. 본격적인 웹 개발에 들어가기 전에 이러한 기본적인 HTML 요소의 활용법을 알아두면 큰 도움이 될 것입니다.
마치며
이 글을 통해 간단하지만 매력적인 dropdown 메뉴를 만들어보았습니다. 기본 HTML만을 활용하여도 다양한 웹 기능을 구현할 수 있음을 알게 되었을 것입니다. 여러분의 프로젝트에 도움이 되길 바랍니다!
함께 읽으면 좋은 글
