부트스트랩

틀 만들기

반응형 12개 열 격자와 레이아웃 그리고 화면 구성요소들을 기반으로 삼는다.

주의! 더 이상 공식지원하지 않는 v2.3.2 문서입니다. 최신 버전 부트스트랩을 확인하세요!

전체 설정

HTML5 doctype 필요

부트스트랩은 HTML5 doctype이 필요한 일부 HTML 태그와 CSS 속성을 사용한다. 그래서 모든 프로젝트 제일 앞에 써준다.

<!DOCTYPE html>
<html lang="ko">
  ...
</html>

타이포그래피와 링크

부트스트랩은 기본적인 전체 표시 스타일과 글꼴 스타일과 링크 스타일을 설정한다. 구체적으로,

  • body에서 margin 제거
  • body에 background-color: white; 설정
  • 글꼴의 기본으로 삼을 @baseFontFamily, @baseFontSize, @baseLineHeight 속성 사용
  • @linkColor로 전체 링크 색깔을 설정하고, :hover할 때만 링크 밑줄 적용

이 스타일은 scaffolding.less 안에 있다.

Normalize로 초기화

부트스트랩 버전 2에서 예전 초기화 블록이 사라지고 대신 Normalize.css를 사용한다. Normalize.css는 HTML5 Boilerplate를 만들기도 한 Nicolas Gallagher와 Jonathan Neal이 시작한 프로젝트이다. reset.less에서 Normalize의 많은 부분을 사용하지만, 부트스트랩을 위해 일부분을 제외했다.

기본 격자 방식

격자 예제

부트스트랩의 기본 격자는 반응형 기능 없이 940px 폭의 공간에 열 12개를 만든다. 반응형 CSS 파일을 추가하면, 화면에 따라 724px과 1170px 폭으로 격자를 맞춘다. 767px 미만 화면에서 열은 유동적이 되어 수직으로 쌓인다.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

기본 격자 HTML

간단한 열 두개 레이아웃을 만들려면, .row 안에 .span* 열들을 적절히 추가한다. 12개 열 격자이기 때문에 .span* 들은 이 12개 열의 일부를 차지하고, 항상 행마다 합이 12가 (열 안에 열의 경우 감싼 열의 폭만큼) 되야 한다.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

이 예제에는 .span4 와 .span8 이 있다. 총 12 열이 되어 완전한 행을 이룬다.

열 위치 이동

.offset* 클래스를 사용하여 열을 오른쪽으로 이동한다. 클래스는 숫자만큼 열의 왼쪽 여벽을 늘린다. 예를 들어, .offset4는 .span4를 열 4개만큼 옮긴다.

4
3 offset2
3 offset1
3 offset2
6 offset3
<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

열 안에 열

기본 격자 안에 내용을 감싸려면, 기존의 .span* 열 안에 새로운 .row와 .span* 열들을 추가한다. 안에 포함된 행의 열들을 합하면 감싸는 열의 숫자가 되야 한다.

1단계 열
2단계
2단계 
<div class="row">
  <div class="span9">
    1단계 열
    <div class="row">
      <div class="span6">2단계</div>
      <div class="span3">2단계</div>
    </div>
  </div>
</div>

유동 격자 방식

유동 격자 예제

유동 격자 방식은 열의 폭으로 픽셀 대신 비율을 사용한다. 고정 격자 방식과 마찬가지로, 중요한 화면해상도와 장치에서 제대로 된 균형을 보여주는 반응형 기능이 있다.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

기본 유동 격자 HTML

행을 "유동"으로 만들려면, .row를 .row-fluid로 변경한다. 열의 클래스는 동일하게 유지되어 고정 격자와 유동 격자 사이를 쉽게 오갈 수 있다.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

유동 열 위치 이동

고정 격자 방식의 열 위치 이동과 동일하다. 열에 .offset*을 붙여서 그만큼 열을 이동한다.

4
4 offset4
3 offset3
3 offset3
6 offset6
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

유동 열 안에 열

유동 격자에서 열 안에 열은 다르게 동작한다. 어떤 단계의 열도 합이 12 열이 되야 한다. 유동 격자가 픽셀이 아니라 비율로 폭을 설정하기 때문이다.

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
<div class="row-fluid">
  <div class="span12">
    유동 12
    <div class="row-fluid">
      <div class="span6">
        유동 6
        <div class="row-fluid">
          <div class="span6">유동 6</div>
          <div class="span6">유동 6</div>
        </div>
      </div>
      <div class="span6">유동 6</div>
    </div>
  </div>
</div>

레이아웃

고정 레이아웃

<div class="container"> 만으로 평범한 고정폭 (반응형 여부는 선택적) 레이아웃이 만들어진다.

<body>
  <div class="container">
    ...
  </div>
</body>

유동 레이아웃

<div class="container-fluid">로 어플리케이션과 문서로 사용하기 좋은 유동적인 열 두개 페이지를 만든다.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--사이드바 내용-->
    </div>
    <div class="span10">
      <!--본문 내용-->
    </div>
  </div>
</div>

반응형 디자인

반응형 기능 사용

문서의 <head> 안에 적절한 메타 태그와 스타일시트를 더하면 반응형 CSS가 동작한다. 맞춤 다운로드 페이지에서 부트스트랩을 컴파일했다면, 메타 태그만 추가하면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

주의! 모두가 반응형일 필요가 없기 때문에 현재 부트스트랩은 반응형 기능을 기본으로 포함하지 않는다. 개발자가 이 기능을 제거하도록 안내하기 보다는 필요할 때 사용하는게 최선이라고 판단했다.

반응형 부트스트랩이란?

Responsive devices

미디어선택(media query)를 통해 화면비율, 폭, 디스플레이 종류 등 다양한 조건에 따른 맞춤 CSS가 가능하지만, 보통 min-width와 max-width만 사용한다.

  • 격자에서 열의 폭 변경
  • 필요하다면 요소들을 유동 대신 위아래로 쌓음
  • 장치에 적합하게 제목과 본문 크기 조절

미디어선택을 단지 모바일 사용자 지원의 첫걸음으로 자제하여 사용하라. 큰 프로젝트라면 미디어선택을 층층이 쌓기 보다는 각각을 위한 전용 코드를 고려하라.

장치 지원

부트스트랩은 프로젝트가 여러 장치와 화면해상도에 적합하도록 한 파일에 여러 미디어선택을 지원한다. 이는 다음과 같다.

라벨 레이아웃 폭 열 폭 열들 사이 폭
큰 디스플레이 1200px 이상 70px 30px
기본값 980px 이상 60px 20px
세로 방향 타블렛 768px 이상 42px 20px
전화기부터 타블렛까지 767px 이하 유동 열, 고정폭 없음
전화기 480px 이하 유동 열, 고정폭 없음 
/* 큰 데스크탑 */
@media (min-width: 1200px) { ... }

/* 세로 방향 타블렛부터 가로 방향 타블렛과 데스크탑까지 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 가로 방향 전화기부터 세로 방향 타블렛까지 */
@media (max-width: 767px) { ... }

/* 가로 방향 전화기 이하 */
@media (max-width: 480px) { ... }

반응형 도움 클래스

빠르게 모바일을 지원하도록 개발하려면, 아래 도움 클래스들을 사용하여 장치에 따라 내용을 보이거나 숨긴다. 다음은 제공되는 클래스와 미디어선택 레이아웃에 따른 효과를 정리한 표이다. 이 설정은 responsive.less 안에 들어있다.

클래스 전화기 767px 이하 타블렛 979px ~ 768px 데스크탑 기본값
.visible-phone 보임
.visible-tablet 보임
.visible-desktop 보임
.hidden-phone 보임 보임
.hidden-tablet 보임 보임
.hidden-desktop 보임 보임

조언

제한된 경우에 사용하고, 같은 사이트를 완전히 다르게 만드는 일을 피하라. 장치별 화면을 보완하기위해 사용하라. 반응형 기능은 지원하지 않기 때문에 표에 사용하면 안된다.

반응형 기능 시연

위의 클래스들을 시험해보려면 웹브라우저 크기를 변경하거나 다른 장치에서 페이지를 읽어봐라.

...에서는 보인다

녹색 체크부호는 현재 화면에 어떤 클래스가 보일지 알려준다.

  • 전화기✔ 전화기
  • 타블렛✔ 타블렛
  • 테스크탑✔ 테스크탑

...에서는 안보인다

여기서 녹색 체크부호는 현재 화면에 어떤 클래스가 안보일지 알려준다.

  • 전화기✔ 전화기
  • 타블렛✔ 타블렛
  • 테스크탑✔ 테스크탑