최종 업데이트
2025-03-31
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 원) 의 나머지 금액을 지불 하여야합니다.
| 홈페이지 오류 수정요청시 | 홈페이지 디자인 변경 요청시 |
|---|---|
| 무료수정 | 별도협의 |