Bootstrap 5 | 반응형 CSS 프레임워크

📖 상세 설명

Bootstrap은 Twitter에서 개발한 세계에서 가장 인기 있는 오픈소스 CSS 프레임워크입니다. 2011년 Mark Otto와 Jacob Thornton이 내부 도구의 UI 일관성을 위해 만들었으며, 출시 후 폭발적인 인기를 얻어 프론트엔드 개발의 표준 도구가 되었습니다. GitHub에서 16만 개 이상의 스타를 보유하고 있습니다.

Bootstrap의 핵심은 12컬럼 그리드 시스템과 사전 정의된 UI 컴포넌트입니다. 버튼, 폼, 카드, 모달, 네비게이션, 알럿 등 웹 애플리케이션에 필요한 거의 모든 컴포넌트를 제공합니다. 반응형 유틸리티 클래스로 모바일, 태블릿, 데스크톱에서 자동으로 레이아웃이 조정됩니다.

Bootstrap 5(2021년 출시)에서는 jQuery 의존성을 제거하고, CSS 커스텀 속성(변수)을 도입했습니다. Sass 변수를 통해 색상, 폰트, 간격 등을 쉽게 커스터마이징할 수 있으며, PurgeCSS로 사용하지 않는 스타일을 제거해 번들 크기를 최적화합니다.

실무에서 Bootstrap은 빠른 프로토타이핑, 관리자 대시보드, 내부 도구 개발에 널리 사용됩니다. 디자인 시스템이 없는 프로젝트에서 일관된 UI를 빠르게 구축할 때 유용합니다. 다만 요즘은 Tailwind CSS 같은 유틸리티 퍼스트 프레임워크가 인기를 얻고 있어, 프로젝트 특성에 맞게 선택합니다.

💻 코드 예제

<!-- Bootstrap 5 반응형 레이아웃 예제 -->
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- 반응형 네비게이션 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">My App</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 12컬럼 그리드 시스템 -->
<div class="container mt-4">
  <div class="row">
    <!-- 모바일: 12칸, 태블릿: 6칸, 데스크톱: 4칸 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Some quick example text.</p>
          <button class="btn btn-primary">Go somewhere</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🗣️ 실무에서 이렇게 말하세요

💬 회의에서

"이번 관리자 페이지는 디자인 리소스 없이 진행해야 하니까 Bootstrap으로 빠르게 만들면 좋겠어요. 기본 컴포넌트만 조합해도 충분히 깔끔하고, 반응형도 자동으로 지원되니까요."

💬 면접에서

"Bootstrap은 12컬럼 그리드 기반 CSS 프레임워크입니다. col-md-6 같은 클래스로 브레이크포인트별 레이아웃을 지정하고, 버튼, 모달, 알럿 같은 컴포넌트를 제공해서 빠른 UI 개발이 가능해요. 최신 버전은 jQuery 의존성이 없습니다."

💬 코드 리뷰에서

"여기 !important 남발하지 말고 Bootstrap의 Sass 변수를 오버라이드하세요. _variables.scss에서 $primary 색상 바꾸면 전체 테마가 일관되게 바뀝니다."

⚠️ 흔한 실수 & 주의사항

❌

전체 CSS를 CDN에서 로드

필요한 컴포넌트만 import하거나 PurgeCSS로 사용하지 않는 스타일을 제거하세요. 전체 번들은 150KB 이상입니다.

❌

CSS 직접 오버라이드

!important 남발하면 유지보수가 어려워집니다. Sass 변수를 통해 커스터마이징하세요.

✅

올바른 패턴

npm으로 설치해서 필요한 컴포넌트만 import하고, Sass 변수로 테마를 커스터마이징하세요. React 프로젝트면 react-bootstrap을 고려하세요.

🔗 관련 용어

📚 더 배우기

📄 Bootstrap 공식 사이트 🎓 Bootstrap 5 문서 🐙 Bootstrap GitHub