[TIL] 부트스트랩(Bootstrap) 사용법

냠냠빈·2024년 12월 20일

bootstrap button html 버튼 부트스트랩 트위터 프레임워크

📚📆 프로그래머스 백엔드 부트캠프 TIL

목록 보기

18/28

🎨 부트스트랩(Bootstrap)이란?

부트스트랩(Bootstrap)은 트위터 개발자들이 만든 프론트엔드 개발용 오픈소스 프레임워크로, 웹 페이지와 웹 애플리케이션의 UI(User Interface)를 빠르고 쉽게 개발할 수 있도록 도와줍니다. HTML, CSS, JavaScript로 구성되어 있으며, 반응형 디자인과 재사용 가능한 컴포넌트를 제공합니다.

📜 부트스트랩의 역사

2011년: 트위터의 내부 도구로 개발됨.
2012년: 오픈소스로 공개되며 빠르게 인기를 끌음.
현재: 지속적인 업데이트로 최신 기술을 반영하며 많은 개발자와 디자이너가 사용 중.

🌟 부트스트랩의 주요 특징

반응형 디자인
- 다양한 화면 크기에 맞게 자동으로 조정되는 레이아웃을 제공합니다.
재사용 가능한 컴포넌트
- 버튼, 카드, 네비게이션 바 등 미리 정의된 UI 요소를 제공합니다.
브라우저 호환성
- 주요 브라우저(Chrome, Firefox, Edge 등)에서 일관된 동작을 보장합니다.
확장성과 커스터마이징
- 기본 제공 스타일을 수정하거나 원하는 대로 확장할 수 있습니다.
오픈소스
- 누구나 무료로 사용 가능하며, 커뮤니티에서 활발히 지원합니다.

💡 부트스트랩의 실무 활용 방향

빠른 프로토타입 제작

기본 그리드 시스템과 UI 컴포넌트를 사용하여 빠르게 웹 페이지의 레이아웃을 설계.

예: container와 row, col 클래스를 활용한 기본 구조.

<div class="container">
   <div class="row">
     <div class="col">Header</div>
   </div>
 <div class="row">
   <div class="col-6">Sidebar</div>
   <div class="col-6">Content</div>
 </div>
</div>

팀 프로젝트에서 공통된 스타일 사용
- 동일한 버튼, 카드 디자인을 적용해 UI 일관성을 유지.
- 예: btn, btn-primary 클래스를 사용한 버튼 스타일 통일.
반응형 웹사이트 구축
- 다양한 기기에서 잘 보이는 레이아웃 구현.
- 예: d-none, d-md-block을 사용해 특정 화면 크기에 따라 요소 숨기기/보이기.

🔧 부트스트랩 설치 및 적용 방법

1. CDN 방식 (가장 간단한 방법)
HTML 파일에 다음 코드를 추가합니다:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. NPM 설치
Node.js 환경에서 다음 명령어로 설치:

npm install bootstrap

3. 다운로드 방식
부트스트랩 공식 웹사이트에서 파일을 다운로드하고 프로젝트에 추가합니다. 저는 이 방법으로 진행해봤습니다. v5.3.3버전을 다운받아서 Zip파일에서 bootstrap.min.css 파일을 복사하여 스태틱 디렉터리에 저장해 보았습니다.

구분	파일 위치
압축 파일 내 경로	`bootstrap-5.3.1-dist.zip/bootstrap-5.3.1-dist/css/bootstrap.min.css`
붙여넣기할 폴더 경로	`workspace/sbb/src/main/resources/static/bootstrap.min.css`

bootstrap설치1

그리고 html 템플릿에 밑의 코드로 부트스트랩을 <link></link>태그로 연결해주면 사용할 준비가 다 되었습니다.

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">

✍️ 부트스트랩 사용 방법과 예시

기본 버튼 추가 예시

<button type="button" class="btn btn-primary">Primary Button</button>

반응형 레이아웃 예시

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

🚀 부트스트랩 주요 속성

그리드 시스템

용도: container, row, col 클래스를 사용해 반응형 레이아웃을 구성.

예시:

<div class="container">
 <div class="row">
   <div class="col">Column 1</div>
   <div class="col">Column 2</div>
   <div class="col">Column 3</div>
 </div>
</div>

유용한 클래스

버튼: btn, btn-primary, btn-danger 등 다양한 스타일과 크기의 버튼 제공.

예시:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

텍스트: text-center, text-muted.
배경: bg-light, bg-dark, bg-primary.

컴포넌트

카드: card 클래스를 사용해 콘텐츠를 카드 형식으로 표현.

예시:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

네비게이션 바: navbar 클래스로 상단 메뉴 구성.

예시:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

⚠️📘 작성 시 주의사항

불필요한 클래스 남발 방지
- 불필요하게 많은 클래스를 사용하면 HTML 코드가 복잡해지고 유지보수가 어려워집니다.
- 예: class="btn btn-primary btn-lg btn-block btn-custom" 대신 btn btn-primary btn-lg로 간결
커스터마이징 과도화 주의
- 기본 스타일을 지나치게 변경하면 부트스트랩의 장점인 간편함이 사라질 수 있습니다.
브라우저 호환성 확인
- 부트스트랩은 최신 브라우저를 기본 지원하지만, 오래된 브라우저(예: IE11)에서는 일부 기능이 제대로 동작하지 않을 수 있습니다. 필요 시 폴리필을 사용해 호환성을 확보해야 합니다.
  ⚠️ 호환성 문제
  1. 버전 간 차이
    - 부트스트랩 4에서 5로 업그레이드 시 form 클래스와 같은 몇 가지 요소의 이름과 동작 방식이 변경되었습니다.
    - 예: 부트스트랩 4의 input-group-append는 5에서 더 이상 지원되지 않음.
  2. IE11 지원 중단
    부트스트랩 5는 IE11을 지원하지 않으므로, 오래된 브라우저를 사용하는 환경에서는 부트스트랩 4를 사용하는 것이 좋습니다.
  3. 커스텀 CSS와의 충돌
    사용자 정의 스타일이 부트스트랩 클래스와 충돌할 경우, 의도치 않은 UI 문제가 발생할 수 있습니다. 이를 방지하려면 네임스페이스를 활용하거나 클래스 이름을 명확히 구분하세요.
최신 버전 사용
- 부트스트랩은 지속적으로 업데이트되므로, 최신 버전을 사용하는 것이 좋습니다. 부트스트랩 버전마다 클래스 이름이나 동작 방식이 변경될 수 있으니, 프로젝트에 맞는 버전을 고정해서 사용하는 것이 좋습니다.