트위터 부트스트랩 3.0 버전이 출시됐지만 거의 매일 수정이 이뤄지고 있습니다. 폰트 아이콘도 당초 180개에서 200개로 늘어났고 소소한 내용은 지속적으로 수정이 진행되고 있습니다. 아래의 파일은 10월 26일 현재의 부트스트랩 3.0 버전으로 파일을 바로 열어서 확인할 수 있도록 일반 html파일로 변환한 것입니다. 부트스트랩 원본을 내려받아서는 바로 열어볼 수 없고 Jekyll이라는 Ruby 기반의 프로그램을 설치하고 로컬호스트에서 가동해야 하죠.
bootstrap3-1026.zip부트스트랩의 그리드 시스템에서는 여러 가지 그리드 선택자가 있어서 이해하기 어려운데 이것에 대해 간략하게 알아보겠습니다. 이전에 부트스트랩 3.0이 업데이트 될 때마다 10일 단위로 파일을 업데이트하고 수정된 내용에 대해서 설명을 드린 바 있습니다만 선택자도 바뀌어서 여기서 새롭게 만들어보겠습니다.
우선 파일을 압축해제하고 그리드 시스템에 관한 내용을 보면 다음과 같습니다. 폴더에서 index.html을 클릭하면 웹브라우저에 열립니다. CSS를 선택하고 Grid system --> Grid options를 차례로 클릭하면 아래와 같은 화면이 나타납니다.
2.0 버전에서는 그리드 컬럼을 만들기 위해서 .span+숫자의 형태로 된 선택자를 사용했습니다. 즉 12 컬럼 기반으로 4개의 컬럼을 만들려면 .span3이라는 선택자를 4개 사용했습니다. 3.0 버전에서는 선택자를 세분화해서 위에서 보는 것처럼 4개의 선택자를 사용합니다. 이렇게 하는 이유는 모바일 우선(Mobile First)라는 부트스트랩 3.0 버전의 원칙에 부합하기 위해서 입니다. 즉 2.0 버전의 경우 작은 사이즈의 디스플레이에서는 모든 컬럼이 상하로 쌓이게 되는데(Stack), 원하는 경우 선택자를 추가해서 컬럼이 좌우로 배치되도록 하기 위한 것입니다.
위에서 선택자의 이름을 보면 col은 column(컬럼)을 의미하고 xs는 Extra Small, sm은 Small, md는 medium, lg는 large를 의미하므로 사용할 때 헷갈리지 않을 것입니다.
컬럼이 좌우 배열에서 상하 배열로 전환되는 웹브라우저의 폭은 위 표에서 상단의 제목 부분에 나와있습니다. 예를들면 .col-lg-의 경우 컬럼이 좌우 배열에서 상하로 전환되는 것은 폭이 1200픽셀 미만일 때입니다. 실제의 파일을 열어서 확인해 보겠습니다.
이전 그림의 화면에서 Ctrl 키를 누르고 Getting started 메뉴를 클릭하면 다른 탭에서 파일이 열립니다. Examples를 선택한 다음 3번째 썸네일의 Grid2 예제를 클릭합니다. 설명과 예제를 분리해서 보는 것이 편하므로 탭을 클릭해서 아래로 끌어 내린 다음 마우스 릴리즈 하면 탭에서 분리됩니다.
코드를 추가해서 .col-md-4와 .col-lg-4의 차이를 비교해 보겠습니다. 현재 1200px의 폭에서는 서로 차이가 없습니다. 그런데 이 폭을 줄여서 1199px이 되면 .col-lg-4의 컬럼들은 아래처럼 상하로 배치됩니다.
그런데 1199px 이하에서는 .col-md-4와 .col-lg-4를 같이 사용한다면 .col-md-4가 우선 적용되므로 컬럼이 좌우로 유지됩니다. 그러니 큰 폭의 디스플레이에서 컬럼을 상하로 배치할 이유가 없을 경우 대부분 .col-md-를 사용하면 됩니다.
폭이 991픽셀 이하에서는 컬럼이 모두 상하로 배열됩니다. 여러가지 선택자를 사용하는 이유는 대부분의 경우 작은 사이트의 디스플레이에서 컬럼을 효과적으로 배치하기 위한 것입니다. 화면이 작은 사이즈에서 선택자를 혼용한 경우를 보면 다음과 같습니다.
768px 이상에서는 .col-md-와 .col-lg-는 모두 컬럼이 상하로 배열됩니다. .col-sm-과 .col-xs-는 좌우로 그대로 유지돼죠.
768px 미만에서는 .col-sm-도 상하로 배열되고 .col-xs-만 좌우로 배열된 채 남아있습니다. 그러니 컬럼을 작은 사이즈에서 좌우로 계속 배열되도록 유지하려면 .col-md-와 .col-xs-를 동시에 사용하는 것입니다.
각 선택자는 반드시 같은 크기의 컬럼을 사용해야 하는 것이 아닙니다. 위의 경우 세 개의 컬럼이 작은 사이즈에서는 .col-xs-4로 모두 같지만 미디엄 사이즈의 .col-md-는 중앙이 .col-md-6이고 양쪽 컬럼이 .col-md-3으로 돼있습니다. 그래서 md 사이즈의 화면 폭에서는 위처럼 나타납니다. 하지만 작은 사이즈에서는 다음과 같이 나타납니다.
작은 사이즈의 선택자인 .col-xs-4가 적용되는 것이죠. 이처럼 트위터 부트스트랩 3.0의 그리드 선택자는 유연한 구조를 갖고 있습니다.
