Bootstrap 시작하기: 설치 방법과 사용법

Bootstrap은 간단하고 강력한 웹 개발 프레임워크로, HTML, CSS, JavaScript를 활용해 반응형 웹사이트를 빠르고 손쉽게 만들 수 있습니다. 이 글에서는 Bootstrap을 처음 시작하는 방법과 기본 설정, 중요 구성 요소에 대해 설명합니다. 빠르게 사용해보고 싶은 분들은 이 가이드를 따라 Bootstrap을 직접 구현해 보세요.

1. Bootstrap이란 무엇인가?

Bootstrap은 프런트엔드 웹 개발을 위한 오픈 소스 프레임워크로, 반응형 디자인과 모던한 UI를 지원합니다. 이를 통해 모든 기기에서 최적화된 웹 페이지를 제작할 수 있으며, 다양한 UI 컴포넌트를 제공하여 개발 시간을 크게 단축시킬 수 있습니다.

2. Bootstrap 빠르게 시작하기 (CDN 사용)

Bootstrap을 사용하기 위해 별도의 파일을 다운로드하지 않고, CDN(Content Delivery Network) 링크를 통해 쉽게 웹페이지에 적용할 수 있습니다. CDN 방식은 간단하게 HTML 파일에 링크를 추가하는 것만으로 Bootstrap의 CSS와 JavaScript를 사용할 수 있는 방법입니다.

기본 HTML 템플릿

아래는 Bootstrap을 적용하기 위한 기본 HTML 템플릿입니다. index.html로 저장한 후 브라우저에서 열어보세요.

html코드 복사<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 시작하기</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap Bundle JS (with Popper) CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

각 요소 설명

<meta name="viewport" content="width=device-width, initial-scale=1">: 반응형 웹사이트를 위해 모바일 기기에서 적절한 화면 비율로 렌더링하도록 설정합니다.
<link>: Bootstrap CSS 파일을 포함하여 기본 스타일을 적용합니다.
<script>: Bootstrap JavaScript 번들 파일을 포함합니다. 이 파일에는 Popper.js도 포함되어 있어, 드롭다운이나 툴팁 같은 UI 요소의 위치를 조정할 수 있습니다.

3. 필수 설정과 글로벌 스타일

Bootstrap에서는 웹페이지의 일관성을 위해 몇 가지 글로벌 설정을 포함합니다. 다음 설정들을 통해 모든 기기에서 웹페이지가 최적화될 수 있도록 구성하세요.

HTML5 Doctype

Bootstrap을 사용하기 위해 HTML5 문서 유형을 설정합니다. <doctype html>을 최상단에 추가해야 브라우저가 HTML5 문법을 올바르게 해석할 수 있습니다.

박스 크기 설정 (Box Sizing)

Bootstrap은 box-sizing: border-box를 기본으로 설정합니다. 이는 요소의 패딩과 보더를 포함한 크기를 지정하여 레이아웃을 좀 더 쉽게 구성할 수 있게 해줍니다.

css코드 복사*,
*::before,
*::after {
  box-sizing: border-box;
}

이 설정을 통해 패딩이나 보더가 요소의 총 너비와 높이에 포함됩니다.

4. Bootstrap의 주요 구성 요소

Bootstrap의 강점 중 하나는 다양한 UI 컴포넌트를 제공한다는 점입니다. 드롭다운, 모달, 탭 등 JavaScript와 함께 사용할 수 있는 구성 요소가 많아 웹사이트의 상호작용성을 크게 향상시킵니다.

주요 구성 요소

드롭다운: 메뉴를 펼치기 위해 사용합니다. Popper.js가 필요합니다.
모달: 팝업 창을 구현할 때 유용합니다.
탭: 여러 섹션을 하나의 페이지에서 전환하여 표시할 수 있습니다.
토스트: 사용자에게 알림을 제공하는 데 사용됩니다.
툴팁과 팝오버: 추가 정보를 제공하기 위해 마우스 오버 시 보여주는 툴팁으로, Popper.js가 필요합니다.

JavaScript 번들 파일과 Popper.js

Bootstrap의 JavaScript 번들 파일에는 기본적인 상호작용을 위한 기능이 포함되어 있습니다. 하지만 드롭다운, 팝오버, 툴팁과 같은 위치가 중요한 UI 요소에는 Popper.js가 필요합니다. 만약 해당 기능을 사용하지 않는다면 Popper.js를 생략하여 파일 크기를 줄일 수 있습니다.

html코드 복사<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

위 코드처럼 Popper와 Bootstrap JS 파일을 별도로 추가할 수 있으며, Popper.js가 필요 없는 경우 생략 가능합니다.