[Bootstrap] 그리드 시스템 (Grid System)




01 그리드 시스템


그리드(Grid)란 사전적인 의미로 격자, 눈금 등을 의미한다.

그리드 시스템은 정적, 동적, 반응형 그리드 시스템으로 나누어 볼 수 있겠다. 여기서 정적인 그리드 시스템은 웹 페이지의 레이아웃의 폭이 고정되어 있는 시스템이며 동적인 그리드 시스템은 레이아웃의 폭이 브라우저의 크기에 따라 바뀌는 시스템이다. 반응형 그리드 시스템은 이용하는 기기에 따라 변경되는 화면 폭에 반응형으로 레이아웃이 바뀌는 시스템을 말한다.

부트스트랩에서 그리드 시스템은 디바이스나 뷰포트 크기가 증가함에 따라 반응형으로 배열되는 최대 12개의 칼럼을 통해 쉽고 효율적으로 동적인 페이지의 레이아웃을 만들 수 있도록 도와준다. 이 12개의 열은 개별적으로 나타낼 수도 있으며 열을 그룹화하여 더 넓게 나타내게 할 수도 있다.





02  컨테이너 (Container)


웹 페이지의 컨텐츠를 감싸고 그리드 시스템을 사용하기 위해서는 컨테이너 요소가 필요하다.

컨테이너 요소는 반응형 고정 폭 컨테이너를 만드는 .container 클래스나 뷰포트의 전체 폭까지 늘어나는 .container-fluid 클래스를 이용해 만들 수 있다. 


아래 이미지의 초록색 영역은 div 태그에 container 클래스를 적용한 것이고 하늘색 영역은 div 태그에 container-fluid 클래스를 적용한 것이다. 

브라우저의 가로 폭을 변경하면 초록색 영역은 브라우저 크기에 따라 정해진 폭으로 바뀌며(fixed-width), 하늘색 영역은 항상 전체 폭(full-width)을 차지하고 있다.






03  그리드 클래스


  • 매우 작은 기기(모바일) - 너비가 768px 미만인 화면 .col-xs-*
  • 작은 기기(태블릿) - 너비가 768px 이상인 화면 .col-sm-*
  • 중간 기기(노트북) - 너비가 992px 이상인 화면 .col-md-*
  • 큰 기기(노트북/데스크탑)너비가 1200px 이상인 화면 .col-lg-*





04  예제


1) 수평으로 쌓기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
cs



위의 소스 코드를 보면 .col-md-* 클래스를 사용한 것을 볼 수 있다. 이는 너비가 992px 이상인 화면에서 그리드 시스템을 이용해 레이아웃을 배치하겠다는 의미이다.

크롬의 개발자 모드(F12)를 통해 아래의 두 결과를 보면 너비가 992px일 때는 의도한 대로 레이아웃이 적용되었지만, 992px 이하일 때는 그리드에 따른 레이아웃이 적용되고 있지 않는 모습을 볼 수 있었다.

소스 코드에 대한 설명을 더 해보자면, 이 코드에는 .row로 나타낸 행이 4개가 있고, 각 행마다 .col-md-*로 나타낸 열들을 가지고 있는 거다. 열의 합계는 행마다 최대 12개가 되어야 하는데, 코드에서도 12개의 열로 맞춰 주고 있는 걸 확인할 수 있다. .col-md-1은 화면에서 1/12만큼을 차지한다는 것을 의미하고, .col-md-4는 화면에서 1/3을 차지한다는 것을 의미한다. 



2) 기기마다 다른 레이아웃 적용하기


1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
cs


화면 너비에 따라 (768px 미만/768px 이상/992px 이상) 레이아웃이 다르게 적용된다.



3) 줄 바꿈(개행)


1
2
3
4
5
6
<body>
  <div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-8">.col-xs-8<br>Subsequent columns continue along the new line.</div>
</div>
cs


만일 한 행에 12열보다 많은 행이 오게 된다면, 남은 열은 새로운 행에 묶이게 된다.



4) 컬럼 오프셋(offset)


1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
cs


.col-md-offset-* 클래스를 이용해 컬럼을 우측으로 옮길 수 있다. * 컬럼 수 만큼 한 컬럼의 좌측 마진을 증가시킨다.

예를 들어 .col-md-offset-4.col-md-4를 4컬럼만큼 우측으로 이동시킨다는 의미이다.




5) 컬럼 중첩


1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
cs


컬럼 내에 또 다른 컬럼을 오도록 하기 위해선, .col-md-* 컬럼 내에 새로운 .row.col-md-* 컬럼을 추가하면 된다.

중첩된 새로운 행 또한 컬럼 갯수의 합이 12개여야 한다.



6) 컬럼 순서 정하기


1
2
3
4
<div class="row">
    <div class="col-sm-9 col-sm-push-3">.col-sm-9 .col-sm-push-3</div>
    <div class="col-sm-3 col-sm-pull-9">.col-sm-3 .col-sm-pull-9</div>
</div>
cs 


.col-md-push-*.col-md-pull-* 클래스로 컬럼의 순서를 변경할 수 있다.

위의 코드를 예로 들면 화면 너비가 768px 미만일 때는 아래 사진에서 초록색 영역이 먼저 나왔지만, 너비가 768px 이상으로 바뀌자 하늘색 영역이 먼저 나오도록 변경된 것을 확인할 수 있다.




7) 반응형 컬럼 초기화


1
2
3
4
5
6
7
8
9
10
<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3<br>Resize your viewport or check it out on your phone for an example.</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-xs-block"></div>
 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
cs


특정 컬럼이 다른 컬럼들보다 길이가 길 경우 줄 바꿈이 원치 않는 대로 일어날 수 있다. 이러한 경우에 .clearfix를 활용해 고칠 수가 있다. 

위 코드에서는 .clearfix.visible-xs-block을 함께 사용해 이 다음에 나타나는 열은 새로운 행에 나타나도록 하였다. 여기서 .visible-*-block이란 해당하는 영역의 display 속성을 block 값으로 설정한다는 것과 같은 의미이다. (display:block; ) 이와 관련된 자세한 설명은 이곳에서 확인할 수 있으며, display 속성과 관련된 설명은 이 포스트에 정리되어 있다.

아래 첫 번째 이미지는 .clearfix, .visible-xs-block을 사용하지 않은 경우이고, 두 번째 이미지는 사용한 경우이다.








더보기

댓글, 1

violet quartz