한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 드롭다운: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 드롭다운의 fascinierende 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 여러분을 안내해 드리는 것을 기대하고 있습니다. 코드를 한 줄도 작성해 본 적이 없으신 걱정 마세요 - 우리는 처음부터 시작하여 차곡차곡 올라갈 테니까요. 그럼 커피(또는 차, 당신이 좋아하는 것이라면)를 한 잔 마시고, 시작해 보겠습니다!

Bootstrap - Dropdowns

드롭다운이란?

코드로 들어가기 전에, 드롭다운이 무엇인지 이야기해 보겠습니다. 상상해 보세요, 식당에 앉아 있고, 웨이터가 메뉴를 건네주는 것을. 그 메뉴는 드롭다운과 같습니다 - 선택肢을 제공해 주는 것입니다. 웹 디자인에서도 드롭다운은 비슷하게 작동합니다. 여러 가지 선택肢를 사용자에게 제공하는 compact한 방법으로, 웹 페이지를 복잡하게 만들지 않습니다.

기본 드롭다운

가장 기본적인 드롭다운에서 시작해 보겠습니다. 부트스트랩에서 보이는 것은 다음과 같습니다:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

이를 해부해 보겠습니다:

  1. <div> 태그에 dropdown 클래스를 추가하여 컨테이너를 만듭니다.
  2. 내부에 <button> 태그가 있으며, 드롭다운을 트리거합니다. dropdown-toggle 클래스와 data-bs-toggle="dropdown" 속성에 주목하세요.
  3. <ul> 태그에 dropdown-menu 클래스를 추가하여 실제 드롭다운 콘텐츠를 만듭니다.
  4. <ul> 내부의 각 <li> 태그는 드롭다운 메뉴의 항목입니다.

드롭다운 버튼 vs. 드롭다운 링크

드롭다운을 버튼 또는 링크를 사용하여 만들 수 있습니다. 이들이 어떻게 다른지 살펴보겠습니다:

드롭다운 버튼

이미 기본 예제에서 보았습니다. <button> 요소를 사용합니다:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

드롭다운 링크

링크를 사용한 드롭다운을 만드는 것은 <a> 태그를 사용합니다:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Menu items -->
</ul>
</div>

주요 차이는 사용된 HTML 요소(<button> vs. <a>)입니다만, 기능은 비슷합니다.

변형

부트스트랩은 드롭다운에 다양한 색상 변형을 제공합니다. btn-secondary 클래스를 다음 중 하나로 변경할 수 있습니다:

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

예를 들어:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Danger Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

스플릿 버튼

스플릿 버튼 드롭다운은 버튼 액션과 드롭다운 트리거를 분리합니다:

<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Menu items -->
</ul>
</div>

여기서 왼쪽 부분의 버튼을 클릭하면 액션을 수행하고, 오른쪽 부분을 클릭하면 드롭다운을 엽니다.

사이즈 조정

드롭다운 버튼을 더 크거나 더 작게 만들 수 있습니다. btn-lg 또는 btn-sm 클래스를 추가하세요:

대형 드롭다운 버튼

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Large Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Menu items -->
</ul>
</div>

소형 드롭다운 버튼

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Small Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Menu items -->
</ul>
</div>

다크 드롭다운

스leek하고 다크 테마의 드롭다운을 만들기 위해 dropdown-menu-dark 클래스를 추가하세요:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dark Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

방향 조정

부트스트랩은 드롭다운의 방향을 변경할 수 있습니다. 다음 옵션을 탐구해 보겠습니다:

중앙 정렬 드롭다운

드롭다운 메뉴를 중앙 정렬하려면 dropdown-center 클래스를 컨테이너에 추가하세요:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Menu items -->
</ul>
</div>

상향 드롭다운

드롭다운이 위로 열리도록 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">
<!-- Menu items -->
</ul>
</div>

중앙 정렬 상향 드롭다운

dropup과 dropdown-center를 결합하여 중앙 정렬 상향 드롭다운을 만듭니다:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Menu items -->
</ul>
</div>

오른쪽 방향 드롭다운

드롭다운이 오른쪽으로 열리도록 dropend 클래스를 사용하세요:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Menu items -->
</ul>
</div>

왼쪽 방향 드롭다운

드롭다운이 왼쪽으로 열리도록 dropstart 클래스를 사용하세요:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Menu items -->
</ul>
</div>

메뉴 항목

이제 드롭다운 메뉴 내부에 무엇을 넣을지 이야기해 보겠습니다. 여러 가지 옵션을 가지고 있습니다:

헤더

메뉴 항목을 그룹화하려면 헤더를 추가하세요:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

구분선

관련된 메뉴 항목을 분리하려면 구분선을 사용하세요:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

텍스트

비인터랙티브 텍스트를 포함할 수도 있습니다:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><span class="dropdown-item-text">Dropdown item text</span></li>
</ul>

양식

드롭다운에 양식을 포함할 수도 있습니다:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>

메뉴 정렬

기본적으로 드롭다운 메뉴는 왼쪽 정렬됩니다. 이를 변경할 수 있는 정렬 클래스가 있습니다:

오른쪽 정렬 메뉴

드롭다운 메뉴를 오른쪽 정렬하려면 dropdown-menu-end 클래스를 추가하세요:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

반응형 정렬

정렬을 반응형으로 만들 수 있습니다:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

이 드롭다운은 기본적으로 왼쪽 정렬되지만, 대형 화면에서는 오른쪽 정렬됩니다.

드롭다운 옵션

부트스트랩 드롭다운은 몇 가지 추가 옵션을 제공합니다:

자동 닫기 행동

드롭다운이 닫히는 방식을 data-bs-auto-close 속성으로 제어할 수 있습니다:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

data-bs-auto-close의 옵션:

  • true (기본): 드롭다운이 외부 또는 내부 클릭 시 닫습니다.
  • false: 드롭다운이 외부 또는 내부 클릭 시 닫히지 않습니다.
  • inside: 드롭다운이 내부 클릭 시 닫습니다.
  • outside: 드롭다운이 외부 클릭 시 닫습니다.

이제 부트스트랩 드롭다운에 대한 심화된 내용을 완료했습니다. 연습이 성공의 열쇠이니, 이 예제들을 실험해 보세요. 행복한 코딩 되세요, 여러분의 드롭다운이 항상 올바른 방향으로 열리기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:
Bootstrap - 내려띄우기
다음 튜토리얼:
Bootstrap - 목록 그룹