작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

트위터 부트스트랩 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의 그리드 선택자는 유연한 구조를 갖고 있습니다.


저작자 표시 비영리 변경 금지
신고
BlogIcon 백전백승

이 글을 읽으니 어느정도 부트스트랩 3.0 그리드 시스템을 이해할 수 있겠네요. 처음에 부트스트랩 3.0 그리드 시스템을 접했을 때 무슨 말인지 몰랐거든요.

BlogIcon 베누시안

사실 며칠전에 백전백승님의 글을 보고 이글을 쓰게 됐답니다. 여러번 실험해서 사용해보면 확실히 파악할 수 있을 겁니다.

BlogIcon 씨디맨

궁금한게 하나 있습니다. 워드프레스 플러그인 중에 한국형 게시판(?) 처럼 된게 있다고 들었는데요. kboard 같은것요. 근데 막상 플러그인에서 검색하면 나오진 않더라구요. 그런것 비슷한것이라도 좋으니 쓸만한게 있을까요 ?

BlogIcon 베누시안

MH board라는 것이 있습니다. --> http://wordpress.org/plugins/mh-board/

BlogIcon 씨디맨

너무 감사합니다.

최명규

감사합니다. 부트스트랩 그리드 시스템을 완전히 이해 했습니다.

BlogIcon 베누시안

감사합니다.

아주머니

안녕하세요 (__).. 부트스트랩 책 보다가 들어왔습니다. 질문이 있어서요.
예를 들어 3컬럼 레이아웃을 만들려고 하는데요,
맨 좌측은 160, 맨 우측은 200, 가운데 컨텐츠는 남은공간 (아마 840이겠죠..)을 하려는데
grid는 약 100단위잖아요? 12그리드 1200px
어떻게 해야 할까요 ㅜㅜ.. 혹시 이런 경우엔 그리드 시스템을 사용할 수 없는건가요?

BlogIcon 베누시안

안녕하세요. 부트스트랩의 컬럼 폭을 무시하고 재정의 하면 됩니다. 2버전을 기준으로 하자면 span+숫자의 폭을 스타일시트에서 다시 설정하면 됩니다. 책의 후반부에는 이러한 커스터마이징이 많이 있습니다. 책에서 컬럼의 폭을 수정해서 여러가지 레이아웃으로 만드는 방법도 있으니 책을 참고하세요. 원하는 폭은 없지만 연구하셔야 합니다.

비밀댓글입니다

joo

관리자의 승인을 기다리고 있는 댓글입니다

joo

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바