부트스트랩의 그리드 시스템

부트스트랩은 http://getbootstrap.com/에서 현재 버전은 3이며 4가 나올 예정이다. 부트스트랩은 사실 좀 무거운 프레임워크에 해당한다. 이 사이트도 부트스트랩 3의 초기 버전을 도입해 구성했으나 최근 버전업 된 부트스트랩을 적용하니 레이아웃이 망가져서 쉽게 변환 하지 못하고 있다. 이후 많은 프레임워크가 쏟아져 나왔는데 Semantic UI(https://semantic-ui.com/)가 그리드에서 좀 더 단순하고 사용하기 편리하게 만들어진 것 같다. 향후에는 바꿔볼 필요가 있을 것 같지만 일단 부트스트랩을 들어내면 테마가 상당히 망가지므로 다음 기회에 하도록 하고 사용하기 약간은 까다로운 그리드 시스템에 대해 살펴 보겠다.

부트스트랩 그리드 시스템은 반응형 웹사이트 레이아웃을 만들 수 있도록 그리드 시스템이 있다. 폰, 태블릿, 데스크톱처럼 여러 디바이스 레이아웃에 대응하도록 미리 정의된 그리드 클래스가 있다. 다음 테이블을 살펴 보자.

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	750px	970px	1170px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Max column width	Auto	~62px	~81px	~97px
Gutter width	15px on each side of a column (i.e. 30px)

2개의 컬럼 구성 (Two Columns)

부트 스트랩은 12개의 컬럼이 있다고 생각하고 숫자를 따져보면 이해하기 쉽다. 예를 들어 Small Device에서 반을 나누거나(6+6) 비율(4+8 혹은 3+9)에 따라 화면을 구성할 수 있다.

See the Pen Grid Ex 01 by youngdeok (@medusakiller) on CodePen.

3개의 컬럼 구성 (Three Columns)

.col-md-*를 이용해 화면을 구성해 보았다. 이런 경우 데스크톱에서 992px 이하의 경우 정의되어 있지 않기 때문에 3개의 컬럼이 화면이 유지 되지 않는다.

See the Pen Bootstrap 3 Grid Ex 02 by youngdeok (@medusakiller) on CodePen.

다양한 디바이스에 맞춰 설계하기

화면 사이즈에 따라 유연한 레이아웃을 구성하려면 몇가지 클래스 지정자를 함께 사용하면 된다. 작은 화면비율과 중간 화면 비율에서 모양을 다르게 하려면 배치할 값을 변경해 구성하면 된다.

예제에서 보는 것처럼 col-sm-*의 그리드 합이 3 + 9 + 12 = 24 즉 12가 넘기 때문에 .col-sm-12는 새로운 행(row)를 가지고 새로운 컬럼에 배치 되고 레이아웃은 변하게 된다. .col-sm-*은 992픽셀 이하에서 적용된다. 여전히 아주 작은 화면인 xs의 고려를 되어 있지 않으므로 768픽셀 이하로 줄어들면 레이아웃은 없어진다.

See the Pen Bootstrap 3 Grid Ex 03 by youngdeok (@medusakiller) on CodePen.

이제 큰 화면부터 랩톱, 태블릿, 스마트폰 화면 사이즈에 맞춰 4, 3, 2, 1 형태의 그리드 시스템을 만들려면 어떻게 해야할까? 일단 화면에 따라 레이아웃을 구성할 수 있도록 예제와 같이 클래스 조합으로 구성하고 각각의 개수 블록은 .clearfix를 통해 컬럼을 구분해 주게 되면 된다. 각 화면별 .clearfix 클래스를 숨기려면 예를 들어 .visible-md-block의 조합으로 클래스를 구성하면 된다.

See the Pen Bootstrap 3 Grid Ex 04 by youngdeok (@medusakiller) on CodePen.

이 사이트에 적용된 갤러리 티져를 다음과 같이 적용하였다.