Bootstrap 기본 사용 법 - dropdown 예제 1

프런트 쪽에서 일하는 개발자라면 많이 활용했을 부트스트랩에 대해 차근차근 알아보고자 한다.

 

쓴이의 경험에서는 디자이너가 없는 경우가 많아 프런트 개발자가 만든 부트스트랩을 많이 활용했었다. 기본적인 클래스에 대해 잘 이해하고 

 

클래스의 역할이 무엇인지 숙달이 되면 별도의 디자이너의 도움 없이 원하는 디자인을 구상할 수 있었다.

 

부트스트랩은 무료도 많이 배포되어 있지만 유료로 구매한다고 해도 그렇게 부담되는 가격은 아닌 것 같다. 

 

보통 개발 환경에 따라 다양한 부트스트랩 디자인을 제공하고 있어서 개발환경이 무엇이든 다양하게 활용할 수 있는 장점이 있는 것 같다.

 

서론이 길어졌는데 기본적으로 dropdown에 대한 간략한 예제를 살펴보자.

 

먼저 부트스트랩을 설치하면 아래와 같다

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

가장 기본적인 dropdown 소스는 아래와 같다

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownBtn">
    dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">dropdown item 1</a>
    <a class="dropdown-item" href="#">dropdown item 2</a>
    <a class="dropdown-item" href="#">dropdown item 3</a>
  </div>
</div>

dropdown 버튼의 사이즈를 클래스를 추가해서 사용할 수도 있고 드롭 다운되는 버튼들의 위치를 어디로 들지도 설정할 수 있다.

 

다양한 설정 방법에 대해서는 아래 링크를 참조하면 된다.

getbootstrap.com/docs/4.5/components/dropdowns/

Dropdowns

서버에서 데이터를 가져와서 드랍다운 이벤트를 실행하거나 또는 드롭다운이 실행되기 전에 데이터를 가져와서 확인할 필요가 있을 때는 jquery를 이용해서 이벤트를 캐치하면 된다.

 

$('#dropdownBtn').on('show.bs.dropdown', function () {
  //클릭하는 순간 하위 버튼들이 보여질 때
})

$('#dropdownBtn').on('shown.bs.dropdown', function () {
  //하위 버튼들이 다 보여지고 난 뒤
})

$('#dropdownBtn').on('hide.bs.dropdown', function () {
  //하위 버튼이 닫혔을 때
})

$('#dropdownBtn').on('hidden.bs.dropdown', function () {
  //하위 버튼이 닫힌 후
})

기본적인 요소들과 클래스를 사용법과 이벤트 및 메소드 사용법을 조금만 익히면 원하는 ui를 쉽게 구상할 수 있을 것이다.

 

개인적인 생각이지만 보통 성급한 사람(특히 쓴이)은 소스 코드부터 가져와 그대로 복붙 해서 빨리 처리하고 넘기려고 하는 안 좋은 습관이 있었다.

 

document에 명시된 내용을 조금만 시간을 투자해서 숙지하면 더 빠르게 원하는 걸 개발할 수 있었을텐데..라는 생각이 들었다.

 

이번 포스팅에서는 dropdown 사용법에 대해 알아보았다. 

 

다음 포스팅에서는 navigation tab에 대해 알아보고자 한다.