Bootstrap 3.3.7 | 그리드 시스템 | 그리드 시스템이란?

Bootstrap 사용의 가장 큰 장점은 “화면 크기에 따라 레이아웃을 자동으로 조정할 수 있다’라는 점에 있을 것이다. 레이아웃에 큰 핵심이 되는 것은 “그리드 시스템"이다.

그리드 시스템이라는 것은 표시하는 내용을 몇 블록으로 나누어 정리하고 이를 “그리드"라는 종횡으로 분할한 영역에 끼워 표시하는 방법이다. 알기 쉽게 말하면, “표"와 같은 것에 콘텐츠를 집어 넣어 표시하는 것이라고 생각하면 좋을 것이다.

이 그리드 시스템의 가장 큰 특징은 “옆으로 늘어선 블록을 자동 조정한다"라는 점에 있다. 예를 들어 폭이 넓은 컴퓨터 화면에서는 두 블록을 나란히 표시하지만, 스마트 폰과 같은 폭이 좁은 화면에는 두 블록을 세로로 나란히 된다.

이 자동 조정은 태그에 설정되는 CSS 클래스에 의해 실현하고 있다. 그리드 시스템에 의한 콘텐츠 작성법을 정리하면 아래와 같은 소스 코드가 된다.

<div class="container">
 
<div class="container-fluid">
 
    <div class="row">
        <div>내용</div>
        <div>내용</div>
        ……
    </div>
     
    <div class="row">
        ……필요한 row을 준비……
    </div>
</div>
 
</div>

포인트를 몇 가지 정리한다.

<div class="container">

이것은 이미 이전에 등장 했다. Bootstrap의 콘텐츠는 항상 class="container"태그 내에 기술한다. 이것에 의해 폭이 자동 조정이 된다.

<div class="container-fluid">

이것이 그리드 시스템의 컨테이너가 되는 부분이다. class="container-fluid"에 의해 이중으로 작성된 태그가 폭에 따라 자동 조정되게 된다.

(.container 와 .container-fluid 에 대해서는 후에 다시 자세히 설명하겠다.)

<div class="row">

이것은 콘텐츠의 row(가로 열)를 작성하기 위한 컨테이너이다. 그리드 시스템에서는 이 class="row" 태그 안에 표시할 내용을 준비한다. 그로 인해, 이 class="row" 태그 안에 포함된 콘텐츠의 태그가 자동으로 가로로 나란히 정렬되거나, 세로로 정렬되거나 한다.

class="row"을 지정한 태그는 여러가지가 있다. 그것들은 수직으로 정렬된다. 이 “row 안에 가로로 콘텐츠를 준비하고, 그 row를 얼마든지 쓰고 나란히 정렬한다"라는 기본적인 구조를 제대로 이해해 두도록 한다.