Bootstrap - 드롭다운 데모

드롭다운이란?

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 Bootstrap 드롭다운의 fascinational 세계로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는, 여러분이 코드를 한 줄도 적어본 적이 없더라도 이 여정을 안내해 드리는 것을 기대하고 있습니다. 믿어 주세요, 이 튜토리얼이 끝나면 여러분은 프로처럼 드롭다운을 만들 수 있을 거예요!

Bootstrap - Dropdowns Demo

드롭다운은 사용자가 목록에서 하나의 옵션을 선택할 수 있게 해주는 사용자 인터페이스 요소입니다. 마치 클릭할 때 나타나는 디지털 메뉴처럼 생각해 보세요. 여러분이 레스토랑에 있을 때, 종이 메뉴 대신 마법의 단추를 주는 웨이터를 상상해 보세요. 그 단추를 누르면 공중에 떠 있는 맛있는 요리 목록이 나타납니다. 웹페이지에서 드롭다운이 하는 일은 바로 그거입니다!

왜 드롭다운을 사용할까요?

드롭다운은 다음과 같은 이유로 매우 유용합니다:

웹페이지 공간 절약
관련 옵션을 정리
깨끗하고 직관적인 사용자 인터페이스 제공

이제 코드로 손을 더러 만들어 보겠습니다!

Bootstrap 설정

우리가 첫 드롭다운을 만들기 전에 HTML 파일에 Bootstrap을 설정해야 합니다. 걱정 마세요, 새 스마트폰 설정하는 것보다 쉽습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 드롭다운 데모</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 여러분의 콘텐츠가 여기 들어갈 거예요 -->

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이 코드는 기본적인 HTML 구조를 설정하고 필요한 Bootstrap 파일을 포함합니다. 요리하기 전에 주방을 준비하는 것과 같은 이치입니다!

기본 드롭다운 만들기

이제 간단한 드롭다운을 만들어 보겠습니다. 클릭할 때 목록을 보여주는 버튼을 만들어 보겠습니다.

<div class="dropdown">
  <button class="btn btn-primary 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="#">사과</a></li>
    <li><a class="dropdown-item" href="#">바나나</a></li>
    <li><a class="dropdown-item" href="#">자두</a></li>
  </ul>
</div>

이를 좀 더 자세히 설명하자면:

<div class="dropdown">: 드롭다운의 컨테이너입니다.
<button class="btn btn-primary dropdown-toggle" ...>: 사용자가 클릭하여 드롭다운을 열 수 있는 버튼입니다.
data-bs-toggle="dropdown": 이 버튼이 드롭다운을 토글하는 것을 Bootstrap에 알립니다.
<ul class="dropdown-menu">: 버튼을 클릭할 때 나타나는 목록입니다.
<li><a class="dropdown-item" href="#">...: 드롭다운 목록의 각 항목입니다.

드롭다운 방향

요리 buffest에서 다양한 방향으로 음식을 내는 것처럼, Bootstrap은 드롭다운의 방향을 변경할 수 있습니다. 몇 가지 옵션을 탐구해 보겠습니다:

Dropup

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
    <li><a class="dropdown-item" href="#">동작</a></li>
    <li><a class="dropdown-item" href="#">다른 동작</a></li>
    <li><a class="dropdown-item" href="#">여기에 다른 것</a></li>
  </ul>
</div>

여기서의 유일한 차이는 dropup 클래스 대신 dropdown 클래스를 사용하는 것입니다. 메뉴를 뒤집은 것과 같습니다!

Dropright와 Dropleft

<div class="dropend">
  <button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
    <li><a class="dropdown-item" href="#">동작</a></li>
    <li><a class="dropdown-item" href="#">다른 동작</a></li>
    <li><a class="dropdown-item" href="#">여기에 다른 것</a></li>
  </ul>
</div>

<div class="dropstart">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
    <li><a class="dropdown-item" href="#">동작</a></li>
    <li><a class="dropdown-item" href="#">다른 동작</a></li>
    <li><a class="dropdown-item" href="#">여기에 다른 것</a></li>
  </ul>
</div>

dropend를 사용하면 오른쪽에 정렬된 드롭다운을, dropstart를 사용하면 왼쪽에 정렬된 드롭다운을 만들 수 있습니다. 그릇의 양쪽에 식기를 두는 것과 같은 이치입니다!

드롭다운 메뉴 항목

이제 드롭다운 메뉴에 몇 가지 추가 기능을 더해 보겠습니다:

<div class="dropdown">
  <button class="btn btn-success 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">드롭다운 헤더</h6></li>
    <li><a class="dropdown-item" href="#">동작</a></li>
    <li><a class="dropdown-item" href="#">다른 동작</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">여기에 다른 것</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">비활성화된 동작</a></li>
  </ul>
</div>

이 예제에서 우리는 다음을 추가했습니다:

헤더 (dropdown-header)
구분선 (dropdown-divider)
비활성화된 항목 (dropdown-item disabled)

메뉴에 섹션을 만들고 품절된 항목을 회색으로 표시하는 것과 같은 이치입니다!

드롭다운 크기

마치 작은, 중간, 큰 음료를 주문할 수 있는 것처럼, 드롭다운 버튼의 크기를 변경할 수 있습니다:

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    큰 버튼
  </button>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 항목 -->
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    작은 버튼
  </button>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 항목 -->
  </ul>
</div>

btn-lg를 사용하면 큰 버튼을, btn-sm를 사용하면 작은 버튼을 만들 수 있습니다. 이렇게 간단합니다!

드롭다운 메서드

Bootstrap은 드롭다운을 프로그래밍적으로 제어할 수 있는 여러 메서드를 제공합니다. 다음은 이 메서드의 표입니다:

메서드	설명
show	드롭다운 표시
hide	드롭다운 숨기기
toggle	드롭다운 토글
update	요소의 드롭다운 위치 업데이트
dispose	요소의 드롭다운 제거

이 메서드를 사용하려면 JavaScript를 사용할 수 있습니다. 예를 들어:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

// 드롭다운 표시
dropdownList[0].show()

// 드롭다운 숨기기
dropdownList[0].hide()

// 드롭다운 토글
dropdownList[0].toggle()

이렇게 하면 Bootstrap 드롭다운에 대한 crash course를 완료했습니다. 연습이 완벽을 이루기 때문에, 여러분의 웹사이트에서 이 요소를 실험해 보지 마세요.

알고 보면, 여러분이 만든 드롭다운 메뉴는 심지어 가장 고급스러운 레스토랑도 부러워할 만큼 멋질 거예요. 행복한 코딩을 하시고, 여러분의 드롭다운이 항상 올바른 방향으로 떨어지길 바랍니다!

Credits: Image by storyset