Bootstrap의 드롭다운은 사용자 인터페이스에 메뉴나 선택 항목을 제공하는데 유용한 컴포넌트입니다. 드롭다운은 버튼, 링크 또는 기타 요소와 결합하여 다양한 기능을 수행할 수 있습니다. 기본적인 드롭다운을 만들기 위해서는 dropdown 클래스를 사용합니다.
기본 드롭다운 구조
기본적인 드롭다운을 생성하려면 dropdown 클래스와 함께 dropdown-toggle 클래스 및 data-bs-toggle="dropdown" 속성을 사용합니다. 드롭다운 메뉴 항목은 dropdown-menu 클래스로 정의합니다.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운 버튼
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">메뉴 항목 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 2</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 3</a></li>
</ul>
</div>
이 코드에서 btn btn-secondary dropdown-toggle 클래스는 드롭다운 버튼의 스타일을 정의하며, data-bs-toggle="dropdown" 속성은 드롭다운 기능을 활성화합니다. dropdown-menu 클래스는 드롭다운 메뉴를 정의하고, dropdown-item 클래스는 개별 메뉴 항목을 스타일링합니다.
드롭다운 위치 설정
드롭다운 메뉴는 기본적으로 버튼 바로 아래에 표시됩니다. dropup, dropend, dropstart 클래스들을 사용하여 드롭다운 메뉴의 위치를 변경할 수 있습니다.
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
오른쪽 드롭다운
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">메뉴 항목 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 2</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 3</a></li>
</ul>
</div>
드롭다운 메뉴 항목 구분선
드롭다운 메뉴 항목을 시각적으로 구분하기 위해 dropdown-divider 클래스를 사용할 수 있습니다.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운 버튼
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">메뉴 항목 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">메뉴 항목 3</a></li>
</ul>
</div>
드롭다운 메뉴 헤더
드롭다운 메뉴에 헤더를 추가하여 그룹을 나눌 수 있습니다. 이를 위해 dropdown-header 클래스를 사용합니다.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운 버튼
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">그룹 1</h6></li>
<li><a class="dropdown-item" href="#">메뉴 항목 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">그룹 2</h6></li>
<li><a class="dropdown-item" href="#">메뉴 항목 3</a></li>
</ul>
</div>
드롭다운 메뉴 비활성화
특정 메뉴 항목을 비활성화하려면 disabled 클래스를 사용합니다.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
드롭다운 버튼
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">메뉴 항목 1</a></li>
<li><a class="dropdown-item disabled" href="#">비활성화된 항목</a></li>
<li><a class="dropdown-item" href="#">메뉴 항목 2</a></li>
</ul>
</div>
이와 같이 Bootstrap의 드롭다운 컴포넌트는 다양한 옵션과 클래스 조합을 통해 유연하게 사용할 수 있습니다. 드롭다운을 사용하여 웹 애플리케이션의 사용자 인터페이스를 보다 직관적이고 편리하게 만들 수 있습니다.