[Bootstrap] CSS - Grid System (화면 나누기)

Bootstrap 에서 제공하는 Grid System (그리드 시스템) 활용 방법입니다.

그리드를 가지고 반응형 화면을 구성 가능합니다. 

화면을 가로 12개의 사이즈로 나누어 화면 해상도에 따라서 자동으로 맞추어 줍니다.

프로그램 개발자 입장에서 간략히 어떻게 작동되는지 알아두면 간단하게 추가나 수정이 가능합니다.

간단하게 기본 Grid 를 그려봤습니다.

<div class="container show-grid"> <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> </div>

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

소스를 웹화면에서 보면 이렇게 나옵니다.

총 12개의 칸을 가지고 숫자값을 가지고 나누어서 쓸 수 있습니다.

또한 화면 해상도의 변화에 따라 Grid 위치가 자동적으로 바뀌게 됩니다.

스마트폰, PC, 태블릿 등 각각의 화면에 맞추어 자동으로 바뀌기 때문에 반응형 웹으로 구성하기 좋습니다.

다양한 Grid System 의 옵션들입니다.

다양한 class 옵션들로 화면 구성이 가능합니다.

Offset 옵션으로 중간에 빈칸을 만들 수도 있습니다.

사이즈를4 주었지만 offset 4의 값을 주면서 중간에 4 사이즈 만큼 빈칸이 생기게 됩니다.

<div class="container show-grid" style="width: 600px;"> <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> </div>

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

또한 Grid 안에 또다른 Grid 로 구성하여 중첩 할 수 있습니다.

바깥쪽 Grid 안에 row 영역을 넣고 Grid 를 나누어 주면됩니다.

<div class="container show-grid" style="width: 600px;"> <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> </div>

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

이러한 방법으로 몇개의 옵션들로 화면을 분할하여 반응형 웹을 구성 할 수 있습니다.

Grid System 을 적용 가능한 부분들은 다양합니다. 

예를 들면 PC 웹화면에서는 3개의 라인으로 넓게 보이게 구성했다가 모바일이나 태블릿처럼 작은 화면에서는 한줄로 나오게되는거죠.

간단하게 쇼핑몰의 경우에도 PC 화면에서 5열씩 보이는 것이 모바일에서는 한줄로 보이는 것처럼 자동으로 변하게 되는 것입니다.

Grid System 에 대해서 좀 더 다양한 예제는 아래의 URL 에서 확인하시면 됩니다

http://getbootstrap.com/css/#grid