간단한 원페이지 포트폴리오 사이트든, 대기업용 대형 애플리케이션이든, 블로그나 커뮤니티 포럼이든 프로젝트를 만들다 보면 드롭다운 메뉴가 필요한 순간이 반드시 옵니다.
드롭다운 메뉴는 링크나 실행할 동작이 많은데 페이지 공간은 부족할 때 특히 유용합니다. 화면을 어수선하게 만들지 않으면서도 여러 항목을 깔끔하게 정리해 보여줄 수 있기 때문입니다.
보통 드롭다운을 직접 구현하려면 자바스크립트(JavaScript) 지식이 어느 정도 필요합니다. 하지만 아직 자바스크립트를 배우지 않았거나 빠르게 해결책이 필요하다면 부트스트랩(Bootstrap)이 최고의 선택입니다.
부트스트랩이란 무엇인가?
프런트엔드 개발 이야기에서 수도 없이 들어본 단어일 텐데, 부트스트랩은 정확히 무엇일까요?
부트스트랩은 CSS 기반(약간의 자바스크립트 포함) 프런트엔드 프레임워크입니다. 쉽게 말해 개발 속도를 크게 높여주기 위해 미리 만들어 둔 '설계 도면' 같은 것입니다. 개발자들이 일정 시간을 들여 표준 규격을 정하고, 매번 반복해야 하는 초기 설정 작업까지 프레임워크 안에 모두 담아 둔 덕분에 우리는 그 과정을 생략할 수 있습니다.
버튼(button), 버튼 그룹(btn-group), 내비게이션 바(navbar)처럼 자주 사용되는 컴포넌트에는 표준화된 스타일이 적용되어 있습니다. 덕분에 수십 줄의 CSS 코드를 반복해서 작성하는 대신, 미리 정의된 클래스 몇 개만 붙이면 동일한 스타일을 얻을 수 있습니다.
이것은 팀 단위 개발에서 일관성(consistency) 확보에도 큰 도움이 됩니다. 여러 개발자가 함께 큰 애플리케이션을 만들 때 각자 스타일을 맞추느라 고민할 필요가 없습니다. 모든 스타일이 이미 프레임워크 안에 정의되어 있기 때문입니다.
부트스트랩 설치하기
부트스트랩을 사용하려면 HTML 문서에 몇 줄의 코드만 추가하면 됩니다. 여기서는 가장 빠르고 간단한 방법인 CDN 방식을 사용하겠습니다.
먼저 기본적인 HTML5 템플릿이 필요합니다. VSCode 같은 최신 코드 에디터라면 아주 쉽게 만들 수 있습니다. VSCode에서 느낌표(!)를 입력하고 Enter 또는 Tab 키를 누르면 다음과 같은 HTML5 문서 구조가 자동 생성됩니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
이제 <head> 태그 안에 다음 코드를 다른 스타일시트보다 위쪽에 붙여 넣습니다.
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>부트스트랩은 내부적으로 몇 가지 자바스크립트 라이브러리에 의존하므로, </body> 태그를 닫기 직전에 아래 <script> 태그들도 추가해야 합니다.
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>설정은 끝났습니다! 이제 프로젝트에 부트스트랩을 활용할 준비가 되었습니다.
부트스트랩 활용하기
부트스트랩의 강력함은 HTML 태그의 class 속성에 부트스트랩 키워드를 넣는 것만으로 발휘됩니다. 이 방식을 사용하면 CSS 파일을 하나도 만들지 않고도 페이지 전체를 스타일링할 수 있습니다.
예를 들어, 간단한 버튼 그룹은 다음과 같이 만듭니다.
<div class="btn-group">
<button class="btn btn-primary">button 1</button>
<button class="btn btn-secondary">button 2</button>
<button class="btn btn-info">button 3</button>
<button class="btn btn-success">button 4</button>
<button class="btn btn-danger">button 5</button>
<button class="btn btn-light">button 6</button>
<button class="btn btn-dark">button 7</button>
<button class="btn btn-white">button 8</button>
<button class="btn btn-warning">button 9</button>
</div>실행 결과는 다음과 같습니다.
부트스트랩에 미리 정의된 모든 색상(muted는 텍스트 전용이라 제외)으로 버튼 그룹을 완성했습니다. 이제 본격적으로 드롭다운으로 넘어가 보겠습니다.
부트스트랩 드롭다운, 다양한 방법
구버전 부트스트랩에서는 드롭다운을 만들 때 <a> 태그만 사용할 수 있었지만, 버전 4부터는 <button> 태그도 허용됩니다.
링크와 버튼, 어떤 걸 써야 할까?
링크(<a>)는 오직 '이동(navigation)' 목적으로만 사용해야 합니다. 현재 페이지 내 이동이든 다른 페이지로의 이동이든, 링크의 역할은 페이지를 옮겨 주는 것뿐입니다.
반대로 로그인, 회원가입, 폼 제출, 섹션 접기, 테마 변경 같은 모든 '동작(action)'은 버튼으로 처리해야 합니다. 자바스크립트 클릭 이벤트와 관련된 작업은 모두 버튼으로 하는 것이 원칙입니다.
접근성(accessibility) 관점에서도 차이가 있습니다. 링크는 엔터 키로만 접근할 수 있지만, 버튼은 엔터 키와 스페이스바 모두로 조작할 수 있어 키보드 사용자에게 더 친절합니다.
어떤 태그를 선택하든 드롭다운이 동작하려면 data-toggle="dropdown" 속성이 반드시 필요합니다.
버튼으로 만드는 드롭다운
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Button menu
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This dropdown</a>
<a href="#" class="dropdown-item">Uses</a>
<a href="#" class="dropdown-item">Buttons</a>
</div>
</div>전체 구조를 class="dropdown"을 가진 요소(보통 <div>)로 감싸고, 첫 번째 요소로 class="btn dropdown-toggle"과 data-toggle="dropdown"을 가진 버튼을 만듭니다. 이 버튼이 드롭다운 메뉴를 열고 닫는 토글 역할을 합니다.
그다음 실제 메뉴가 담긴 컨테이너를 만듭니다. 이 역시 보통 <div>나 <ul>을 사용하며 class="dropdown-menu"를 지정합니다.
마지막으로 메뉴 안에 들어갈 항목들을 class="dropdown-item"으로 만들어 넣습니다. 항목은 보통 다른 페이지로 연결되는 링크이거나 현재 페이지의 특정 섹션으로 향하는 링크입니다.
결과물은 다음과 같습니다.
축하합니다! 부트스트랩으로 첫 번째 드롭다운 메뉴를 완성했습니다.
링크로 만드는 드롭다운
<div class="dropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Link menu
</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">This dropdown</a>
<a class="dropdown-item" href="#">Uses</a>
<a class="dropdown-item" href="#">Links</a>
</ul>
</div>동일한 구조를 <a> 태그로도 만들 수 있습니다. 이번에는 메뉴 컨테이너로 <ul>을 사용했는데, 결과는 완전히 같습니다.
메뉴와 항목 스타일링하기
메뉴와 항목에도 부트스트랩 스타일을 자유롭게 적용할 수 있습니다. 메뉴에 색상을 입혀 보겠습니다. 배경색을 지정하려면 부트스트랩 색상 이름 앞에 background를 뜻하는 bg-를 붙이면 됩니다.
<div class="dropdown">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Styled menu
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item bg-primary">This is a</a>
<a href="#" class="dropdown-item bg-warning">Styled</a>
<a href="#" class="dropdown-item bg-success">Dropdown</a>
</div>
</div>결과는 다음과 같습니다.
스플릿 버튼(Split Button) 드롭다운
흥미로운 변형으로 스플릿 버튼이 있습니다. 이 방식은 하나의 요소에 두 가지 기능을 담습니다. 버튼 자체는 하나의 목적을 수행하고, 옆의 캐럿(caret) 영역은 드롭다운을 엽니다. 예를 들어 버튼 클릭 시 메뉴의 모든 항목을 모아 둔 페이지로 이동하고, 개별 링크는 각각의 전용 페이지로 연결되도록 구성할 수 있습니다.
<div class="dropdown">
<div class="btn-group">
<a href="#" class="btn btn-danger">All Menu Items</a>
<a
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item bg-primary">Item #1</a>
<a href="#" class="dropdown-item bg-warning">Item #2</a>
<a href="#" class="dropdown-item bg-success">Item #3</a>
</div>
</div>
</div>이 경우 버튼과 토글을 함께 감싸는 class="btn-group" 컨테이너가 필요하고, 토글 버튼에는 dropdown-toggle-split 클래스를 추가합니다.
드롭다운 안에 폼 넣기
드롭다운 메뉴 안에 HTML 폼(form)을 넣을 수도 있습니다.
<div class="dropdown" data-toggle="dropdown">
<button class="dropdown-toggle btn-danger btn">Dropdown Form</button>
<div class="dropdown-menu">
<form>
<div class="form-group">
<label for="dropdown-form-name">Your name</label>
<input
type="text"
class="form-control"
id="dropdown-form-name"
/>
</div>
<div class="form-group">
<label for="dropdown-form-password">Your password</label>
<input
type="password"
class="form-control"
id="dropdown-form-password"
/>
</div>
<input type="button" class="btn" value="Press Me!" />
<span class="sr-only">Submit Form</span>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
방법은 간단합니다. dropdown-menu 컨테이너 안에 평범한 폼을 만들면 됩니다. 가장 흔한 활용 사례는 예제처럼 간단한 로그인 폼입니다.
참고: sr-only 클래스
예제에 등장한 sr-only 클래스는 '스크린 리더 전용(screen-readers only)'을 의미합니다. 이 클래스가 적용된 요소는 화면에서는 숨겨지지만 스크린 리더(시각장애인용 화면 낭독 프로그램)만 인식합니다. 웹 접근성을 위해 꼭 알아두어야 할 중요한 클래스입니다.
드롭업(Dropup), 드롭레프트(Dropleft), 드롭라이트(Dropright)
기본 드롭다운 메뉴에는 몇 가지 방향 변형이 있습니다.
드롭업 메뉴
페이지 하단에 고정된 내비게이션 바에서는 메뉴가 위쪽으로 펼쳐지는 드롭업을 사용할 수 있습니다.
<div class="dropup">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Dropup menu
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This is a</a>
<a href="#" class="dropdown-item">Bootstrap</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropup menu</a>
</div>
</div>
드롭레프트 메뉴
드롭다운을 여는 버튼이 화면 오른쪽 끝에 붙어 있어 메뉴가 화면 밖으로 나가는 경우에는 왼쪽으로 펼쳐지는 드롭레프트를 사용합니다.
<div class="dropleft">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Dropleft menu
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This is a</a>
<a href="#" class="dropdown-item">Bootstrap</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropleft menu</a>
</div>
</div>
드롭라이트 메뉴
드롭라이트는 드롭레프트와 동일하지만 화면 반대편(왼쪽 끝)에서 오른쪽으로 메뉴가 펼쳐집니다.
<div class="dropright">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Dropright menu
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This is a</a>
<a href="#" class="dropdown-item">Bootstrap</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropright menu</a>
</div>
</div>
위 세 예제에는 부트스트랩의 또 다른 기능이 포함되어 있습니다. 비어 있는 <div>에 dropdown-divider 클래스를 지정하면 메뉴 안에 깔끔한 구분선이 생겨 항목들을 섹션별로 나눌 수 있습니다.
제목(헤더)이 있는 드롭다운
dropdown-header 클래스를 가진 요소를 추가하면 드롭다운 메뉴에 제목 텍스트를 넣을 수 있습니다.
<div class="dropdown m-4" data-toggle="dropdown">
<button class="dropdown-toggle btn-info btn">Entitled Dropdown</button>
<div class="dropdown-menu">
<h2 class="dropdown-header">I'm a title</h2>
<a class="dropdown-item" href="#">We are</a>
<a class="dropdown-item" href="#">Items</a>
</div>
</div>문단(p), span 등 다른 텍스트 태그가 아니라 굳이 제목 태그(h1~h6)를 쓰는 이유가 무엇일까요?
제목 태그는 검색 엔진 최적화(SEO)에 영향을 주기 때문에 적절한 위치에 배치해 두는 것이 좋습니다. 드롭다운이 사이트의 중요한 섹션을 담고 있다면 제목을 달아 주는 것이 합리적입니다. 또한 부트스트랩은 제목 태그에 기본 서식을 적용해 두어, 예제에서 확인할 수 있듯이 별도 스타일 없이도 보기 좋게 표시됩니다.
오른쪽 정렬 드롭다운
기본적으로 부트스트랩의 드롭다운 메뉴는 토글 버튼을 기준으로 왼쪽에 정렬됩니다.
디자인상 오른쪽 정렬이 더 어울리거나 단순히 취향에 따라, dropdown-menu-right 클래스를 추가하면 메뉴를 오른쪽으로 정렬할 수 있습니다.
<div class="dropdown">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Right-aligned
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">This is a</a>
<a href="#" class="dropdown-item">right-aligned</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropdown menu</a>
</div>
</div>
활성(active) 및 비활성(disabled) 항목
드롭다운 항목에 해당 클래스만 추가하면 비활성 또는 활성 상태로 만들 수 있습니다.
먼저 비활성 항목입니다.
<div class="dropdown m-4">
<button
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
>
Disabled button menu
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This is a</a>
<a href="#" class="dropdown-item disabled">Disabled</a>
<a href="#" class="dropdown-item">Button</a>
</div>
</div>
언제 비활성 항목이 필요할까요? 예를 들어 해당 옵션이 현재 이용 불가능한 경우입니다. 해외 배송이 잠시 중단되었거나 상품이 품절된 경우 등이 대표적입니다.
다음은 활성 항목입니다.
<div class="dropdown m-4">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Active button menu
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">This is</a>
<a href="#" class="dropdown-item active">An active</a>
<a href="#" class="dropdown-item">Button</a>
</div>
</div>active 클래스는 방문자의 시선을 끌기 위해, 현재 선택되었거나 초점이 맞춰진 요소를 강조하는 용도입니다. 이 클래스를 고정적으로 적용하는(요소 간에 옮기지 않는) 대표적인 사례는 구매, 회원가입, 구독 같은 행동 유도(call-to-action) 버튼이거나, 사용자의 주의를 특정 요소로 유도하고 싶을 때입니다.
이제 부트스트랩을 마음껏 활용하세요
부트스트랩은 프로젝트마다, 컴포넌트마다 반복해야 하는 설정 작업을 추상화하여 빠른 개발을 돕기 위해 만들어진 강력한 프레임워크입니다.
오늘은 자바스크립트를 한 줄도 직접 작성하지 않고(적어도 우리 몫의 JS는요) 다양한 유형의 드롭다운을 만드는 방법을 배웠습니다. 버튼 드롭다운부터 시작해 스플릿 버튼, 폼 삽입, 드롭업·드롭레프트·드롭라이트, 헤더, 정렬, 활성/비활성 처리까지 살펴보았습니다.
이제 직접 프로젝트에 부트스트랩을 적용해 보세요!