부트스트랩4 - #2. 그리드 시스템

 

부트스트랩의 그리드 시스템은 반응형으로 동작하므로, 반응형 화면을 설계할 때 부트스트랩의 그리드 시스템을 이용하면 수월하다.

 

부트스트랩의 그리드 시스템에서는 가로 전체를 12칸으로 가정한다.

 

이 12칸을 이용해서 모바일화면, 태블릿화면, PC화면 등 해상도에 따라 어떻게 공간을 차지할지에 대해 정의를 할 수가 있다.

 

기본 예)

 

<div class="row">
    <div class="col-2 border">왼쪽영역</div>
    <div class="col-8 border">가운데영역</div>
    <div class="col-2 border">오른쪽영역</div>
</div>

 

2:8:2 비율

 

( 위 예에서는 경계선을 주어(border 클래스) 눈으로 확인하기 쉽게 하였다. )

 

전체를 div.row 로 감싸고 그 안에 위와 같이 div로 영역을 정의한다.

 

부여된 클래스의 의미는 다음과 같다.

 

col-숫자 : 숫자에는 1부터 12까지의 숫자가 들어갈 수 있다. 전체 12중에서 지정된 숫자만큼의 가로폭을 가지게 된다.

 

위 예는 2칸씩의 공간을 좌우에 두고, 가운데 영역으로 8칸을 차지하게 하였다. (총 12칸)

 

위 예는 브라우져의 크기를 조절해봐도 항상 2:8:2 의 비율을 유지하게 된다.

 

그런데, 모바일화면같이 작은 화면인 경우 항상 2:8:2의 비율로 유지가 되면, 오히려 비효율적이다.

이때는 비율을 1:10:1 로 한다던지 아니면 아예 좌우를 제거하고 가운데 영역만 12의 공간을 차지하게 하고 싶을 것이다.

또는, 세개의 영역을 세로로 그냥 나열하고 싶을 것이다.

 

모바일 화면에서 세개의 영역을 세로로 배치하고 싶다면 클래스를 아래와 같이 지정해야 한다.

 

<div class="row">
    <div class="col-sm-2 border">왼쪽영역</div>
    <div class="col-sm-8 border">가운데영역</div>
    <div class="col-sm-2 border">오른쪽영역</div>
</div>

 

클래스를 위와 같이 col-sm-숫자 와 같은 형식으로 주게 되면, 이 클래스는 지정된 사이즈(sm)보다 큰 경우에만 효력을 발휘하게 된다.

즉, sm 사이즈일 때는 해당 클래스가 무용지물이 되어 원래의 div특성인 block 으로 동작하게 되어 그냥 세로로 나열이 되게 된다. ( sm 사이즈 이하일 때는 col-sm-숫자 클래스가 없는것과 같다. sm 사이즈보다 클 경우에만 적용되는 클래스이다. )

 

 

모바일 이하 사이즈에서는 세로로 나열

 

 

위 예는 큰 사이즈에서는 2:8:2를 유지하게 하고, sm 사이즈 이하일 경우에는 그냥 세로로 나열하겠다는 의미가 된다.

 

sm은 스마트폰 정도의 사이즈를 뜻한다.

화면 사이즈는 아래와 같은 종류가 있다.

 

sm(576px) < md(768px) < lg(992px) < xl(1200px)

 

화면 사이즈별로 각각 다른 비율로 요소들을 배치하려면 아래와 같이 한다.

<div class="row">
	<div class="col-xl-4 col-lg-3 col-md-2 col-sm-1">왼쪽영역</div>
	<div class="col-xl-4 col-lg-6 col-md-8 col-sm-10">가운데영역</div>
	<div class="col-xl-4 col-lg-3 col-md-2 col-sm-1">오른쪽영역</div>
</div>

 

해석을 하면

 

xl 사이즈보다 큰 경우 => 4:4:4

lg 사이즈보다 큰 경우 => 3:6:3

md 사이즈보다 큰 경우 => 2:8:2

sm 사이즈보다 큰 경우 => 1:10:1

sm 사이즈 이하 => 단순 세로 나열

 

이런 식으로 다양한 사이즈에 해당하는 반응형 웹의 프레임을 설계할 수 있다.