ikspres

BluePrintCSS는 Grid 기반의 웹 페이지 디자인을 할 수 있도록 도와주는 CSS라이브러리다. 덤으로 브라우저간 상호호환성 문제도 해결해준다.   얼마 전에  deepblue님의 hot ruby 구현을 소개하는 글을 통해서 BPC를 처음 알게되었는데 사용해볼 수록  정말 유익한 놈이다.  항상 좋은 것들을 많이 소개해주는 deepblue님에게 감사하는 마음으로, 나도 BluePrintCss에 대해서 알게된 내용을 좀 공유해볼까 한다.

 Grid 기반 디자인?

BPC는 Grid 디자인을 표방한다. Grid 기반 디자인이란 화면의 요소들을 배치할 때, 가로와 세로 각 방향으로 격자선들을 일정한 간격으로 긋고 이 선들을 기준선으로 삼아 화면 요소들의 크기와 위치를 정하는 방식을 의미한다. 

Grid 기반 디자인을 하면 일관되고 통일감 있는 결과물을 만들 수 있게 된다. '그리드 시스템'이라는 책을 쓴 브로크만(Josef Muller-Brockmann)이라는 사람은  "그리드야말로 디자인의 모든 요소, 즉 타이포그래피, 사진, 그림 등을 서로 서로 융화시킬 수 있으며 디자인에 질서를 도입하는 하나의 수단"라고 말했다고 한다. 

이 Grid 디자인은 인쇄물을 포함한 기존의 여러 디자인 영역에서 이미 오랫동안 많이 사용되고 있는 기법인데, 최근에는 웹 디자인에서 Grid 디자인을 적용하는 방식이 주목받고 있다.  이에 대해서 좀더 자세히 알고 싶은 분들은 다음의 링크들을 참조.

• http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

• http://www.subtraction.com/pics/0703/grids_are_good.pdf

그런데 지금 소개하고자 하는 BPC는 width를 분할하여 정렬하는 것 위주이며, height를 분할하여 정렬하는 것은 거의 지원하지 않는다.

그 이유는 뭘까?  아마도 대부분의 웹 사용자들이 넓이가 고정되고, 높이는 (스크롤에 의해서)  임의로 달라지는 웹페이지에 익숙하기 때문에 높이를 분할하고 정렬하는 것에는 별의미가 없기 때문일 것이다.

BluePrintCSS 설치

설치는 간단하다 http://blueprintcss.googlecode.com  에서 릴리즈 버전을 다운로드 받은 후 그 중에서 screen.css, print.css ie.css 를 아래와 같이 웹페이지에 포함시킨다.

<link rel="stylesheet" href="/stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/stylesheets/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

BPC의 기본 사용법

이제 BPC의 간단한 사용법을 배워보자.

(사실 개념이 간단해서 복잡한 사용법은 애초에 없다. 한 장으로 요약된 Cheatsheet도 있으니 먼저 한 번 훝어보는 것도 좋겠다.)

화면의 넓이를 24칸으로 나눈다.

BPC는 웹 화면의 전체 넓이를 24칸으로 나눈다. 각 칸의 넓이는 30px이며, 칸간 간격은 10px이다. 그러므로 화면의 전체 넓이는 (30+10)*24 - 10 = 950 px이다. ( 마지막 칸은 칸간의 간격이 없으므로 10을 뺀다.)

이제 예제를 보자.

1. <div class='container'>

2. <div class='span-10'></div>

   <div class='span-10'></div>

   <div class='span-4 last'></div>

3. </div>

container, span-4 등은 BPC에서 정의된 CSS스타일이고 BPC의 핵심 내용이므로 구체적으로 어떤 스타일이 지정되는 지 살펴보자.

먼저 설명의 편의상 container로 지정된 div를 row 라고 부르고, span-xx로 지정된 div를 column 이라고 부르기로하자.

container : ROW

container가 지정된 row div의 속성은 간단하다. 넓이가 화면 전체 넓이인 950px로 지정된다.

span-xx : COLUMN

span-xx로 지정된 column div에는 3가지 속성이 지정된다.

• 첫번째는 float:left 인데 이것은 div들이 옆으로 나란히 나오게 하기 위한 것이다.
• 두번째는 margin-right:10px인데 이것은 column 들간의 간격을 10px로 지정하기 위해서이다.
• 끝으로 넓이는 span-xx에서 xx에 해당하는 값에 의해서 정해진다. 예를 들어, span-4로 지정된 div는 4개의 칸과 4개 칸들 간의 간격들을 더한 만큼의 넓이로 지정된다. (즉, 40*4 -1 = 150px)

이제 다시 위의 예제를 보면 세 개의 column들이 모두 24칸이 되므로 하나의 row를 꽉 채우고 있다는 것을 알 수 있다. (아래 그림 참고)

마지막 COLUMN에는 반드시 'last'를

추가로 한가지 기억할 점은 마지막 column div의 경우 last라는 클래스가 반드시 지정되어야 한다는 것이다. last가 지정된 margin-right 값이 10px에서 0px으로 바뀐다.

마지막 컬럼이므로 컬럼간 간격을 위한 10px는 불필요한 것이다. 만약 위의 예제에서 last를 지정하지 않으면 전체 row의 길이가 정해진 총 넓이 950보다 10을 초과하게 되어 마지막 div가 아래로 밀려버린다.

Grid를 보여줘 'showgrid'

container div에 showgrid 클래스를 추가로 지정하면 개발을 진행하는 중에는 각 컬럼들이 정확히 의도한 위치에 표시되고 있는지 눈으로 쉽게 확인 할 수 있다.

컬럼을 밀고 당기는 push와 pull 그리고 prepend

위에서 설명한대로만 사용하면 각 column div들간의 간격은 항상 10px이다. 그런데 추가로 push-3 과 같은 class를 추가하면 해당 column은 오른쪽으로 3 칸이 밀려나게 된다. 반대로 pull-3을 지정하면 왼쪽으로 3 칸이 당겨진다.

참고로 push와 pull은 margin 속성을 이용하는데, push와 비슷하지만 padding-left 속성을 사용하는 prepend도 있다.

BPC 응용 사용법

div가 아닌 태그도 COLUMN으로 사용하자

현재 버전(0.71)의 BPC에서는 div가 아닌 다른 태그는 column으로 사용하기 쉽지 않은 것같다.

예를 들어 h1에 span-5를 지정하면 넓이는 제대로 지정이되지만, float:left라든지 margin-right:10px가 지정되지

않으므로 column이라고 하기 어렵다.

나는 이를 해결하기위해서 다음의 추가 CSS를 마지막에 추가하여 사용한다.

.column {float:left; margin-right:10px}

.last {margin-right:0;padding-right:0;}

이렇게 하면 h1 이나 a 와 같은 임의의 tag에도 column 과 함께 지정한다면 span-xx 나 last를 사용해서 Column 으로 사용할 수 있다.

1. <div class='container'>

2. <h1 class='column span-8'>Hello Title</h1>

   <a href='#' class='column span-2 last'>some link</a>

3. </div>

원래 버전의 BPC에서 div에만 한정한 것에도 나름의 뜻이 있다고 생각되므로 이 확장의 사용여부는 여러분이 알아서 판단하시길...

BPC 커스트마이제이션

BPC에서 다운로드 받은 패키지에는 ruby로 구현된 스크립트가 있다. 이 스크립트를 이용하면 자신이 임의로 칸의 수와 칸의 크기를 지정하여 새로운 css들을 생성한 후 사용할 수 있다.