반응형 웹사이트 만들기 (부트스크랩 프레임 워크 1 - 미디어 쿼리와 그리드 시스템)

부트스크랩에서는 반응형 웹을 구현하기 위해 12칼럼 가변 그리드를 사용합니다. 미리 css가 정의되어 있기 때문에 클래스 스타일만 제대로 이해하면 데스크톱과 태블릿, 모바일 기기에 맞는 반응형 웹 레이아웃을 손쉽게 만들 수 있습니다.

부트스크랩의 미디어 쿼리

대부분의 반응형 웹 디자인이 그렇듯이 부트스크랩 css에서도 모바일 기기를 먼저 고려해 css를 작성합니다. 모바일 기기에서는 콘텐츠 요소를 세로로 배치하기 때문에 미리 모바일 레이아웃을 만들어놓으면 그 위에 다른 요소를 추가로 배치해 태블릿 기기나 데스크톱 기기의 레이아웃을 쉽게 만들 수 있습니다. 부트스크랩의 미디어 쿼리는 스마트폰과 태블릿, 데스크톱, 큰 데스크톱 등 네 가지 기기로 구분하며, bootstrap.css 안에 미리 포함되어 있습니다.

그리드 시스템을 사용하기 위해 알아야 할 클래스 스타일

부트스트랩에서는 12칼럼을 기본으로 하기 때문에 12칼럼에만 맞춘다면 1칼럼씩 세로로 쌓을 수도 있고 가로로 나열할 수도 있습니다. 그리드 시스템을 이용한 레이아웃을 만들 때 .col-이라는 키워드 다음에 화면 종류를 나타내는 키워드와, 하나의 영역으로 묶을 칼럼 개수를 숫자로 표시해서 하나의 클래스 스타일을 만듭니다.

예를 들어 데스크톱에서 3칼럼씩 총 4개의 영역으로 나누고 싶다면, 992px 이상의 데스크톱 크기를 나타내는 키워드 'md'와 칼럼 개수를 나타내는 '3'을 이용해 다음과 같이 표현합니다.

<div class="col-md-3">

부트스크랩에서 제공하는 스타일을 사용할 때 해상도별로 사용하는 키워드는 다음과 같습니다.

	스마트폰	태블릿	데스크톱	큰 데스크톱
너비	768px 미만	768px 이상	992px 이상	1200px 이상
키워드	.col-xs-	.col-sm-	.col-md-	.col-lg-

또한 부트스크랩의 가변 그리드 시스템을 적용하기 위해서는 칼럼을 묶을 대마다 바깥 부분을 <div class="row">로 묶어주어야 하고, 가장 바깥 부분은 <div class="container">로 묶어주어야 합니다.

.container 클래스 스타일은 전체 레이아웃을 감싸고 있는데 아래 표를 보면 부트스트랩 css에서 화면 너비에 따라 .container의 너비가 특정 값으로 고정되어 있는 것을 알 수 있습니다. 화면 너비가 바뀌더라도 화면에 가득 차도록 하고 싶다면 .container 클래스 스타일 대신 .container-fluid 클래스 스타일을 사용하면 됩니다.

아래 예제는, 첫 번째 줄은 각 <div>를 3칼럼씩 묶어서 총 4개 영역으로 표시하고, 두 번째 줄은 6칼럼씩 묶어서 2개 영역으로 표시한 것입니다.

<div class="container"> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> </div> <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div>

화면 크기별 그리드 시스템 감추기

여러 크기의 화면을 고려해 반응형 웹 디자인을 만들 때 편리한 클래스들이 visible- 접두사와 hidden- 접두사가 붙은 것들입니다. 특정 크기의 화면에서만 보이거나 보이지 않게 해주는 것입니다.

	스마트폰 (＜768px )	태블릿 (≥768px )	데스크톱  (≥992px )	큰 화면 ( ≥ 1200px )
.visible-xs-*	표시함	감춤	감춤	감춤
.visible-sm-*	감춤	표시함	감춤	감춤
.visible-md-*	감춤	감춤	표시함	감춤
.visible-lg-*	감춤	감춤	감춤	표시함
.hidden-xs	표시함	감춤	표시함	표시함
.hidden-sm	표시함	표시함	감춤	표시함
.hidden-lg	표시함	표시함	표시함	감춤

오프셋

12칼럼을 기본으로 하는 그리드 시스템은 각 칼럼과 칼럼 사이가 여백 없이 바짝 붙어 있는데 .col-md-offset-* 스타일을 사용하면 지정한 칼럼만큼의 오프넷(offset, 간격)이 생깁니다.

예를 들어, class="col-md-3 col-md-offset-2" 라고 지정하면 전체 5칼럼 중 2칼럼은 오프셋으로, 3칼럼은 콘텐츠 영역으로 사용합니다.

칼럼 위치 바꾸기

그리드 시스템은 소스에 적힌 순서대로 왼쪽에서 오른쪽으로 칼럼이 배치됩니다. 하지만 여기에 .col-md-push-* 스타일이나 .col-md-pull-* 스타일을 사용해서 칼럼의 위치를 바꿀 수 있습니다. 

<div class="row">   <div class="col-lg-2">      <h4>. .. </h4>   </div>   <div class="col-lg-6 col-lg-push-4">     <h2> ... </h2>   </div>   <div class="col-lg-4 col-lg-pull-6">     <ul> ... </ul>   </div> </div>