Bootstrap

Bootstrap은 UI 프레임워크로 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JavaScript 프레임워크입니다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지 보수할 수 있도록 도와줍니다.

Bootstrap도 많은 기능을 지원하고 있으며, 간단하게나마 자주 사용되는 기술에 대해 학습하는 시간을 가져보려 합니다. 특히, 최근 버전인 5.0 버전에서는 SCSS 문법을 적극적으로 활용할 수 있으며, Tree Shaking(단일 번들을 최적화할 때 사용되는 필요하지 않은 코드를 제거) 기술도 지원하게 되었습니다.

1. Bootstrap 환경 설정

이번에는 실제로 프로젝트를 생성하여 프로젝트 환경에서 Bootstrap을 사용하는 방법에 대해 알아보도록 합니다.

1.1 Bootstrap 설치

부트스트랩 설치에 대한 정보는 아래 링크인 홈페이지에 자세히 나와있으니 참고 부탁드립니다.
부트스트랩 홈페이지

1.2 index.html copy-paste

위의 주소로 들어가셨다면, 아래에 나와있는 링크 태그를 보실 수 있습니다. 해당 링크 태그를 index.html에 명시해준다면 Bootstrap 연결이 완료됩니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

1.3 Bootstrap 연결 확인

연결이 원활히 완료되었는지를 확인하기 위해 Bootstrap에서 제공하는 Components의 dropdown 버튼을 만들어봅시다. html 파일에 아래 dropdown 버튼의 코딩 내용을 복사, 붙여넣기 해줍니다.

index.html을 열어보았을 때, 아래의 그림과 같이 dropdown 버튼이 잘 작동한다면 연결히 잘 되었음을 알 수 있습니다.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

출처: 위키백과