Bootstrap 기초 활용 및 프로젝트 적용 방법

Bootstrap을 사용하기 위해서는 먼저 공식 웹사이트에서 프레임워크를 다운로드해야 한다. 주로 사용하는 파일은 dist/css 디렉터리 내의 bootstrap.css와 압축된 버전인 bootstrap.min.css이다. 이 파일들은 레이아웃, 컴포넌트, 반응형 디자인 등을 위한 핵심 스타일을 제공한다.

HTML 문서의 <head> 태그 내에 다음과 같이 CSS 파일을 연결한다:

<link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">

모바일 기기 호환성을 위해 아래와 같은 viewport 메타 태그도 반드시 포함시켜야 한다:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

레이아웃 컨테이너

Bootstrap에서는 콘텐츠 배치를 위한 두 가지 주요 컨테이너 클래스를 제공한다:

.container: 화면 크기에 따라 고정된 너비를 가지며, 중앙 정렬되는 반응형 컨테이너다.
.container-fluid: 뷰포트 전체 폭(100%)을 차지하는 유동적인 컨테이너다.

<div class="container">
  <h1>고정 너비 컨테이너</h1>
</div>

<div class="container-fluid">
  <h1>전체 너비 컨테이너</h1>
</div>

그리드 시스템

Bootstrap의 그리드는 최대 12열로 구성되며, 다양한 화면 크기에 따라 자동 조정된다. 각 행은 .row로 감싸고, 열은 .col-* 클래스로 정의한다. 미디어 쿼리에 따라 다음과 같은 브레이크포인트가 존재한다:

lg: 데스크톱 (≥1200px)
md: 태블릿 (≥992px)
sm: 작은 태블릿 (≥768px)
xs: 모바일 폰 (<768px)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">왼쪽 섹션</div>
    <div class="col-md-6 col-sm-12">오른쪽 섹션</div>
  </div>
</div>

텍스트 및 요소 스타일링

부트스트랩은 텍스트 강조, 정렬, 색상 등 다양한 유틸리티 클래스를 제공한다.

텍스트 강조

<p class="lead">강조된 본문 문단</p>
<p><small>보조 설명 텍스트</small></p>
<p><strong>굵게</strong>, <em>기울임</em>, <s>취소선</s></p>

텍스트 색상 및 정렬

<p class="text-primary">주요 정보 색상</p>
<p class="text-success">성공 상태</p>
<p class="text-danger">오류 메시지</p>

<p class="text-center">가운데 정렬</p>
<p class="text-right">오른쪽 정렬</p>

테이블 디자인

반응형 및 스타일링된 테이블을 쉽게 구현할 수 있다.

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>이름</th>
        <th>나이</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>1</td>
        <td>홍길동</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</div>

폼 요소

입력 필드는 자동으로 일관된 스타일을 가지며, .form-group으로 감싸면 적절한 마진과 레이블 배치가 가능하다.

<form>
  <div class="form-group">
    <label for="email">이메일</label>
    <input type="email" class="form-control" id="email" placeholder="이메일 입력">
  </div>
  <div class="form-group">
    <label for="password">비밀번호</label>
    <input type="password" class="form-control" id="password" placeholder="비밀번호 입력">
  </div>
  <button type="submit" class="btn btn-primary">제출</button>
</form>

버튼 스타일

다양한 컨텍스트에 맞는 버튼 스타일이 제공된다:

<button class="btn btn-default">기본</button>
<button class="btn btn-success">완료</button>
<button class="btn btn-warning">경고</button>
<button class="btn btn-danger">삭제</button>
<button class="btn btn-link">링크처럼</button>

드롭다운 메뉴

클릭 시 목록을 표시하는 드롭다운 메뉴 구성 예시:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    카테고리 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">웹 개발</a></li>
    <li class="divider"></li>
    <li><a href="#">데이터 분석</a></li>
  </ul>
</div>

사용자 정의 확장

기본 제공 스타일 외에 직접 커스텀 스타일을 추가할 수 있다. 별도의 custom.css 파일을 생성하여 Bootstrap 이후에 로드하면 된다. 예를 들어, 새로운 버튼 클래스를 정의할 수 있다:

.btn-custom {
  background-color: #5c4084;
  color: white;
  border-radius: 8px;
}

HTML에서 <button class="btn btn-custom">커스텀 버튼</button>처럼 사용 가능하다.

아이콘 폰트 교체

기본 Glyphicons 대신 IcoMoon이나 Font Awesome 같은 외부 아이콘 라이브러리를 사용할 수 있다. 다운로드한 폰트 파일을 fonts/ 폴더에 넣고, CSS에 @font-face로 선언한 후, 의사 요소(::before)를 이용해 적용한다:

@font-face {
  font-family: 'MyIcon';
  src: url('../fonts/myicon.woff') format('woff');
}

.icon-home::before {
  font-family: 'MyIcon';
  content: '\e901';
}

실제 웹사이트 구조 예시

전체 페이지 기본 골격:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>쇼핑몰 사이트</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/custom.css" />
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 네비게이션 바 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">로고</a>
      </div>
    </div>
  </nav>

  <!-- 캐러셀 -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="slide1.jpg" alt="슬라이드">
      </div>
    </div>
  </div>

  <!-- 스크롤 애니메이션 예시 -->
  <script>
    document.querySelector('a[href="#about"]').addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector('#about');
      window.scrollTo({
        top: target.offsetTop,
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>

태그: bootstrap CSS 반응형웹 프론트엔드 HTML

6월 18일 21:21에 게시됨

괴물 클럽