최종 업데이트
2026-02-14
Bootstrap의 그리드 시스템과 다양한 컴포넌트를 활용해 빠르고 손쉽게 반응형 웹사이트를 구축하는 방법을 살펴봅니다.
Bootstrap은 트위터(Twitter) 개발자들이 시작한 오픈 소스 프론트엔드 프레임워크로,
HTML/CSS/JavaScript로 구성되어 있습니다. 이미 정의된 스타일과 컴포넌트를
제공하므로, 복잡한 코드를 일일이 작성하지 않아도 기본적인 반응형 디자인이 적용된
웹사이트를 빠르게 만들 수 있습니다.
CDN 방식을 사용하면 head 태그에 link를 추가하는 것만으로
Bootstrap을 바로 쓸 수 있고, 필요에 따라 npm을 통해 설치해 번들러 환경에서
사용할 수도 있습니다.
HTML head에 다음 CSS 링크를 추가합니다:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-9ndCyUaKZ7+3pr6GVR3vBhxa1hq/m/Q5r6p7AxW+OECbAyHr6p5mqfJQ5p2/ckTZ"
crossorigin="anonymous"
/>
그리고 body 태그 바로 위쪽 등에 JS 파일을 로드합니다:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7l+6UfclCFfPeBvKnnkBMOzJp3A1T1x"
crossorigin="anonymous"></script>
npm install bootstrap
이후 Webpack, Vite 등의 번들러 환경에서 import 'bootstrap/dist/css/bootstrap.min.css';
형태로 가져와 사용할 수 있습니다.
Bootstrap은 12개의 가상 컬럼을 기반으로 레이아웃을 구성합니다. 한 줄에 최대 12개의 컬럼을 배치할 수 있으며, 브레이크포인트에 따라 컬럼 폭을 쉽게 조절합니다.
.container, .container-fluid: 콘텐츠를 담는 컨테이너.row: 행(Row)을 의미.col-{size}-{number}: 열(Column)을 의미.col-md-6 은 md(768px 이상)에서 컬럼 폭 6/12를 의미
브레이크포인트(Breakpoints) 예시:
sm : 576px 이상md : 768px 이상lg : 992px 이상xl : 1200px 이상xxl: 1400px 이상
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 반응형 그리드 예시</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container">
<!-- 1. 간단한 그리드 -->
<div class="row">
<div class="col-12 col-md-6 bg-primary text-white p-3">컬럼1</div>
<div class="col-12 col-md-6 bg-secondary text-white p-3">컬럼2</div>
</div>
<!-- 2. 다양한 브레이크포인트 지정 -->
<div class="row mt-3">
<div class="col-sm-4 col-md-3 col-lg-2 bg-info text-white p-3 mb-2">A</div>
<div class="col-sm-4 col-md-3 col-lg-2 bg-danger text-white p-3 mb-2">B</div>
<div class="col-sm-4 col-md-3 col-lg-2 bg-warning text-white p-3 mb-2">C</div>
<div class="col-sm-4 col-md-3 col-lg-2 bg-success text-white p-3 mb-2">D</div>
<div class="col-sm-4 col-md-3 col-lg-2 bg-dark text-white p-3 mb-2">E</div>
<div class="col-sm-4 col-md-3 col-lg-2 bg-primary text-white p-3 mb-2">F</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
화면 크기에 따라 자동으로 컬럼 배열이 변경되는 원리를 쉽게 확인할 수 있습니다.
내비게이션 바는 작은 화면(모바일)에서는 햄버거 메뉴 아이콘으로, 큰 화면(데스크톱)에서는 풀 메뉴로 표시하는 것이 일반적입니다.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">로고</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
aria-controls="mainNavbar"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">소개</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">서비스</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">문의</a>
</li>
</ul>
</div>
</div>
</nav>
.img-fluid 클래스를 사용하면 이미지가 자동으로 컨테이너 너비에 맞춰 축소/확대됩니다.
<img src="images/sample.jpg" class="img-fluid" alt="반응형 예시 이미지" />
간단한 게시글, 상품 정보, 프로필 등을 반응형으로 예쁘게 정리할 수 있는 컴포넌트입니다.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="images/card-sample.jpg" class="img-fluid rounded-start" alt="..." />
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">카드 제목</h5>
<p class="card-text">
여기에는 카드 본문 텍스트가 들어갑니다. 설명이나 요약 정보를 표시할 수 있습니다.
</p>
<p class="card-text">
<small class="text-muted">마지막 업데이트 3분 전</small>
</p>
</div>
</div>
</div>
</div>
간단한 랜딩 페이지 구성을 예시로 들어봅니다. 다양한 섹션(헤더, 히어로 섹션, 피처, 푸터 등)을 Bootstrap 컴포넌트와 그리드 시스템으로 구성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 반응형 랜딩 페이지</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
</head>
<body>
<!-- 1) Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- 2) Hero Section -->
<section class="bg-light text-center p-5">
<div class="container">
<h1 class="display-4">반응형 웹사이트를 손쉽게 만들기</h1>
<p class="lead">Bootstrap과 함께라면 반응형 디자인은 어렵지 않습니다.</p>
<button class="btn btn-primary btn-lg">시작하기</button>
</div>
</section>
<!-- 3) Feature Section -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/feature1.jpg" class="card-img-top" alt="기능 1" />
<div class="card-body">
<h5 class="card-title">기능 1</h5>
<p class="card-text">
이 텍스트는 부트스트랩 카드 컴포넌트를 통해 깔끔하게 꾸며집니다.
</p>
<a href="#" class="btn btn-outline-primary">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/feature2.jpg" class="card-img-top" alt="기능 2" />
<div class="card-body">
<h5 class="card-title">기능 2</h5>
<p class="card-text">
카드 레이아웃으로 반응형 기능을 손쉽게 적용할 수 있습니다.
</p>
<a href="#" class="btn btn-outline-secondary">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="images/feature3.jpg" class="card-img-top" alt="기능 3" />
<div class="card-body">
<h5 class="card-title">기능 3</h5>
<p class="card-text">
모바일, 태블릿, 데스크톱에서도 최적화된 UI를 제공합니다.
</p>
<a href="#" class="btn btn-outline-success">자세히 보기</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 4) Footer -->
<footer class="bg-dark text-white text-center p-3">
<p>© 2025 MySite. All rights reserved.</p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
.col-12)으로 잡고, 화면이 커질수록 세분화(예: .col-md-6)하여 레이아웃을 조정합니다.
.img-fluid 등 반응형 클래스를 적용해, 어느 화면 크기에서든 내용이 어색하지 않도록 합니다.
.mt-3, .mb-4 등)이나 텍스트 색상, 반응형 속성 등을 빠르게 조정할 수 있어 편리합니다.
이처럼 Bootstrap을 사용하면 복잡한 미디어 쿼리를 직접 작성하지 않고도 간편하게 반응형 웹사이트를 만들 수 있습니다.
제공된 예시 코드를 기반으로 프로젝트를 확장하거나, 부트스트랩 공식 문서를 참고해 더 많은 기능을 적용해보세요.
추가 자료:
Bootstrap 공식 문서 ·
공식 예제 페이지
성공적인 반응형 웹사이트 구축을 응원합니다!
본인의 웹호스팅 계정을 이용하여 사용합니다.
홈페이지 오류 및 버그 발견시 1:1문의를 남겨주시면 확인 후 바로 무상 처리해드립니다.
다운받는 홈페이지라는 특성상 단순변심으로 인한 환불은 불가합니다.
사진 및 컨텐츠는 사용자의 이해를 돕기위해 사용된것이며 실사용은 가능하나 재배포를 금지합니다.
1도메인당 1카피를 원칙으로 하고있습니다.
티로그 × 단비웹 호스팅 이용시 공급원가(800,000 원)로 구매를 하실수도 있습니다.
설치대행의 경우 기본 셋팅비 10,000원 이며 디자인 변경 요청시 추가금액이 발생될 수 있습니다.
호스팅 만료시 사용하신 홈페이지 ,도메인은(는) 영구 삭제 되며, 타사 호스팅 이용시 공급원가(800,000 원) - 제공가격(400,000 원) 의 나머지 금액을 지불 하여야합니다.
| 홈페이지 오류 수정요청시 | 홈페이지 디자인 변경 요청시 |
|---|---|
| 무료수정 | 별도협의 |
