Bootstrap Grid System 이해하기

부트스트랩을 사용할 떄에는 부트스트랩에서 기본적으로 채택하고 있는

Grid System을 이해하는 것이 가장 중요하다.

Grid System이란,

 하나의 페이지 화면을 여러 개의 행과 열 단위로 분할하여 각각의 페이지 요소를 배치하는 방식이다.

Grid System에서 중요한 것은, 기본적으로 페이지의 폭(가로)을 총 12개의 가상의 열로 분할하여 접근한다는 것이다.

그리드 시스템 예시 페이지를 보자.

http://getbootstrap.com/examples/grid/

[0] container

모든 HTML요소는 박스 형태로 구성되어 있다. 부트스트랩에서도 마찬가지이다. 부트스트랩을 사용하기 위해서 가장 먼저 할 일은 "container"라는 이름의 클래스를 가지는 div요소를 만드는 것이다.

<div class="class">

...

</div>

이렇게 부트스트랩에서는 가장 먼저 컨테이너를 만든다.

이 안에서 12개의 가상의 열을 기본으로 하는 Grid System이 구현된다.

[1] row

컨테이너를 만든 다음 "row"라는 이름의 클래스를 가지는 div요소를 만들어 Grid System을 본격적으로 구현한다.

<div class="row">

...

</div>

이렇게 로우 하나를 만들면 이것이 Grid System에서 하나의 행이 되며, 이 행 안에서 12개의 가상의 열이 만들어진다. 이들을 자유롭게 합칠 수 있게 된다.

   
 hello world 
   

   ...
   

[2] column

row를 만들면 그 안에 12개의 가상의 열이 만들어진다.

로우 안에서 "col"로 시작하는 이름의 클래스를 가지는 div요소를 만들면 이 12개의 가상의 열을 마음대로 합칠 수 있다.

이렇게 가상의 열이 합쳐진 형태의 div요소를 column이라고 한다.

3+6+3 = 12

하나의 로우 안에 컬럼이 차곡차곡 쌓이게 된다.

  

      
 Grid System Example 
   

   

      .col-md-3
   
   

   .col-md-6
   
   

   .col-md-3