Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 드롭다운(dropdown)


버튼을 클릭하면 메뉴가 드롭다운 되는 인터페이스는 응용 프로그램에서 일반적으로 사용된다. HTML에서는 <select>를 사용하여, 하나의 행만 표시시키면 비슷한 것을 만들 수 있다. 하지만 <select>는 어디 까지나 여러개 중에서 항목을 선택하는 것이다. 일반적인 메뉴처럼 뭔가를 실행시키거나 하는 사용법이 아니다(JavaScript를 써서 대응시킬 수 있지만…).

드롭다운

이렇게 “클릭하여 메뉴가 나타나고, 선택해서 뭔가 실행"하는 인터페이스를 간단히 만들 수 있는 것이 Bootstrap의"드롭다운"이다. 이것은 아래와 같은 형태로 작성한다.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        버튼의 표시 텍스트
        <span class="caret"> </ span>
    </ button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation">
            <a href="#">메뉴 항목</a>
        </ li>
        ...... <li> 메뉴 항목을 준비 ...
    </ ul>
</ div>

매우 복잡해 보이지만, <div class="dropdown"> 태그 안에 버튼의 태그와 표시되는 메뉴의 내용이 되는 <ul>태그가 포함되어 있는 것을 알 수 있을 것이다. 대충 각 태그를 정리해 설명한다.

드롭 다운 태그

<div class = "dropdown">

가장 바깥 쪽의 베이스가 되는 태그이다. 이것은 dropdown를 클래스에 지정해야 한다.

버튼 태그

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

버튼의 표시 부분이 되는 태그이다. 이는 매우 까다롭다. 먼저, class 속성에 표시되는 버튼에 대한 클래스와 “dropdown-toggle"라는 클래스를 지정한다. 그리고 data-toggle="dropdown"라는 속성을 추가한다. 이것으로 버튼의 준비가 완료된다.

다만, 잘 보면 <button> 태그 안에 <span class="caret"></ span>와 같은 태그가 추가되어 있다. 이것은 뭐냐하면 버튼 이름의 끝에 붙이는 ▼를 표시하기 위한 것이다. 아무튼, 없어도 드롭 다운 동작에 지장은 없다.

메뉴의 <ul> 태그

<ul class="dropdown-menu" role="menu">

표시하는 메뉴는 <ul> 태그를 사용한 목록으로 준비한다. 이 <ul> 태그에는 “dropdown-menu"라는 클래스를 설정해야 한다. 거기에 더해 role="menu"라는 속성을 준비해 둔다.

메뉴 항목 <li> 태그

<li role="presentation">

<ul> 태그 안에 포함하는 메뉴 항목은 <li> 태그를 사용하여 준비한다. 이 태그는 role="presentation"이라는 속성을 추가해야 한다.

<li> 태그 안에 포함하는 메뉴 항목의 텍스트는 <a> 태그를 사용하여 작성한다. 이것을 잊으면 메뉴를 선택할 수 없게되어 버린다.

그럼 아래에 실제 사용 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>Dropdown</h2>
        </div>
         
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Number
                <span class="caret"></span>
                </button>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#">One</a>
                </li>
                <li role="presentation">
                    <a href="#">Two</a>
                </li>
                <li role="presentation">
                    <a href="#">Three</a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>

“Number"라는 버튼을 표시하고, 이를 클릭하면 3개의 메뉴 항목이 드롭다운으로 표시된다.