[CSS-06] Bootstrap

Comely·2025년 6월 6일

CSS

목록 보기

6/12

🎯 Bootstrap이란?

Bootstrap은 프론트엔드 Component Library로, 웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등을 미리 만들어놓은 CSS 프레임워크입니다.

장점

빠른 개발: 복붙식 HTML/CSS 개발 가능
반응형 레이아웃: 클래스만으로 쉽게 구현
일관된 디자인: 통일된 UI 요소 제공

버전별 호환성

버전	IE 호환성	특징
Bootstrap 3	IE9+	구버전
Bootstrap 4	IE11+	중간 버전
Bootstrap 5	Edge+	최신 버전 (권장)

📦 설치 방법

1. 간단 설치 (CDN)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 안정적 설치 (파일 다운로드)

<!-- head 태그 안에 CSS 첨부 -->
<link href="bootstrap.min.css" rel="stylesheet">

<!-- body 태그 끝나기 직전에 JS 첨부 -->
<script src="bootstrap.bundle.min.js"></script>

🛠️ Utility Classes

CSS를 직접 작성하지 않고 클래스만으로 스타일링이 가능합니다.

여백 조절

<!-- Margin -->
<div class="m-5">margin: 3rem</div>
<div class="mt-3">margin-top: 1rem</div>
<div class="mb-2">margin-bottom: 0.5rem</div>
<div class="mx-auto">margin: 0 auto</div>

<!-- Padding -->
<div class="p-4">padding: 1.5rem</div>
<div class="pt-2">padding-top: 0.5rem</div>
<div class="ps-3">padding-left: 1rem</div>
<div class="pe-3">padding-right: 1rem</div>

텍스트 스타일

<div class="text-center">가운데 정렬</div>
<div class="text-start">왼쪽 정렬</div>
<div class="text-end">오른쪽 정렬</div>
<div class="fw-bold">굵은 글씨</div>
<div class="fs-1">큰 글씨</div>
<div class="text-muted">회색 글씨</div>

컨테이너

<div class="container">고정폭 컨테이너</div>
<div class="container-fluid">전체폭 컨테이너</div>

📐 Grid 시스템 (핵심!)

Bootstrap의 핵심 기능으로, 12 Column 레이아웃을 사용합니다.

기본 구조

<div class="row">
  <div class="col-4">4칸 차지</div>
  <div class="col-4">4칸 차지</div>
  <div class="col-4">4칸 차지</div>
</div>

다양한 비율

<!-- 반반 나누기 -->
<div class="row">
  <div class="col-6">50%</div>
  <div class="col-6">50%</div>
</div>

<!-- 불균등 나누기 -->
<div class="row">
  <div class="col-4">33.3%</div>
  <div class="col-8">66.7%</div>
</div>

<!-- 자동 크기 -->
<div class="row">
  <div class="col">자동</div>
  <div class="col">자동</div>
  <div class="col">자동</div>
</div>

📱 반응형 Grid

Breakpoint 종류

클래스	화면 크기	기기
`col-`	< 576px	모바일
`col-sm-`	≥ 576px	모바일 (가로)
`col-md-`	≥ 768px	태블릿
`col-lg-`	≥ 992px	데스크톱
`col-xl-`	≥ 1200px	대형 데스크톱

반응형 예제

<!-- PC: 4열, 태블릿: 2열, 모바일: 1열 -->
<div class="row">
  <div class="col-lg-3 col-md-6">카드 1</div>
  <div class="col-lg-3 col-md-6">카드 2</div>
  <div class="col-lg-3 col-md-6">카드 3</div>
  <div class="col-lg-3 col-md-6">카드 4</div>
</div>

동작 원리:

lg 이상 (≥992px): col-lg-3 → 4열 (3×4=12)
md 이상 (≥768px): col-md-6 → 2열 (6×2=12)
md 미만 (<768px): 기본 블록 → 1열

🎨 실전 예제

카드 레이아웃

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card shadow">
        <img src="img/photo1.jpg" class="card-img-top">
        <div class="card-body">
          <span class="badge rounded-pill bg-primary">News</span>
          <h4 class="mt-2">Blog Post Title</h4>
          <p class="card-text">Some quick example text...</p>
        </div>
        <div class="d-flex p-3">
          <div class="flex-shrink-0">
            <img src="img/author.png" width="50px">
          </div>
          <div class="flex-grow-1 ms-3 mt-1">
            <h6 class="fw-bold mb-0">Kelly Rowan</h6>
            <p class="text-muted">March 12, 2021</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

타임라인 레이아웃

<div class="container">
  <div class="row">
    <!-- 모바일: 이미지 2칸, 텍스트 10칸 -->
    <!-- PC: 이미지 2칸, 텍스트 5칸, 빈공간 5칸 (순서 변경) -->
    <div class="col-2 col-md-2 order-md-2">
      <img src="img/author.png" width="100%">
    </div>
    <div class="col-10 col-md-5 order-md-1">
      <p>타임라인 내용입니다...</p>
    </div>
    <div class="col-md-5 order-md-3"></div>
  </div>
</div>

🔧 고급 Grid 기능

순서 변경

<div class="row">
  <div class="col order-3">첫 번째 (순서: 3)</div>
  <div class="col order-1">두 번째 (순서: 1)</div>
  <div class="col order-2">세 번째 (순서: 2)</div>
</div>

<!-- 반응형 순서 변경 -->
<div class="col order-md-2">데스크톱에서만 순서 변경</div>

오프셋 (여백)

<div class="row">
  <div class="col-4">내용</div>
  <div class="col-4 offset-4">4칸 띄우고 내용</div>
</div>

중첩 Grid

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">중첩 1</div>
      <div class="col-6">중첩 2</div>
    </div>
  </div>
  <div class="col-6">일반 컬럼</div>
</div>

💡 개발 팁

모바일 퍼스트 접근

<!-- 좋은 예: 작은 화면부터 설계 -->
<div class="col-12 col-md-6 col-lg-4">
  모바일 1열 → 태블릿 2열 → PC 3열
</div>

<!-- 나쁜 예: PC부터 설계 -->
<div class="col-lg-4 col-md-6 col-12">
  순서가 비논리적
</div>

디버깅 도구

<!-- 개발 중 Grid 확인용 -->
<div class="row border">
  <div class="col border bg-light">컬럼 1</div>
  <div class="col border bg-light">컬럼 2</div>
</div>

사용 시기

Bootstrap 추천:

빠른 프로토타이핑
관리자 페이지
반응형 레이아웃 중심 사이트
팀 프로젝트

Bootstrap 비추천:

완전 커스텀 디자인
경량화가 중요한 사이트
독특한 레이아웃

실무 활용

일반적인 페이지 구조

<div class="container-fluid">
  <!-- 헤더 -->
  <div class="row">
    <div class="col">
      <nav class="navbar">...</nav>
    </div>
  </div>
  
  <!-- 메인 컨텐츠 -->
  <div class="row">
    <div class="col-md-3">사이드바</div>
    <div class="col-md-9">메인 컨텐츠</div>
  </div>
  
  <!-- 푸터 -->
  <div class="row">
    <div class="col">
      <footer>...</footer>
    </div>
  </div>
</div>

Bootstrap Grid 시스템을 활용하여 복잡한 반응형 레이아웃도 클래스만으로 쉽게 구현할 수 있습니다

Comely

App, Web Developer

이전 포스트

[CSS-05] 웹 레이아웃 & 애니메이션

다음 포스트