한국을 위한 CSS 그리드 디자인 프레임워크

출처:http://composite.tistory.com/155

 

그렇다. 사정은 잘 안다. 부트스트랩이나 파운데이션 같은 올인원 CSS 프레임워크는 안맞을 수밖에.

특히 디자이너가 있고, 기획이 재대로 되어 있다면, 한국 웹 사정에 부트스트랩은 어찌보면 경우에 따라 안어울릴 것이다.

디자인 떡칠해서 화려한 웹페이지 만들어야 직성이 풀리는 한국 웹사정에 안맞다 보니까.

하지만 이런 단어만 들으면 디자이너와 퍼블리셔는 가장 먼저 입에서 시발이라고 나올 것이다.

반응형 웹.

맞다. 반응형 웹의 주인공은 CSS의 미디어 쿼리다. 하지만 배우고 적용하기 까지는 시발 좆같다.

퍼블이나 디자가 왠지 개발자가 되어 가고 있는 기분 같을 것이다.

그럼 시발 개발자는 니들 하는 업무 다하고 있는 개발자도 있는데.

어쨌든, 그래도 자신이 맡은 업무에 충실하면서 클라를 만족하고 싶지 않은가?

그래서 시발 존나 위험한 개발자인 내가 소개한다. 퍼블과 디자인 니들을 위한 반응형 웹을 위한 CSS 프레임워크다.

나머지 디자인과 레이아웃 구성은 니들 꼴리는데로 하면 된다.

1. 960 Grid System (http://960.gs/)

전 세계에 인기를 한몸에 받고, 파생 CSS 프레임워크를 탄생시키게 한 장본인이자 웹에 생산성을 불어넣은 엄청난 놈이다.

이녀석은 웹 페이지의 한 행을 몇 열씩 나누게 하는 방식을 선보였는데, 전 세계적으로 인기를 한몸에 받았다.

이녀석의 특징은 960인데, 페이지의 기본 크기를 960으로 잡고 시작한다. 그리고 한 행당 12단씩 나눌 수 있다.

실질적인 컨텐츠가 들어갈 길이는 940이다. 여백 제외하고 말이다.

사용법이 무진장 간단하다.

<div class="grid_나눌 숫자">내용</div>

<div class="clear">행 나눔 (주로 공백을 넣는다.   같이.)</div>

예를 들어 12단 나눌 수 있을 경우, 3개씩 나누고자 한다면 이렇게 하면 된다.

<div class="grid_4">내용</div>

<div class="grid_4">내용</div>

<div class="grid_4">내용</div>

<div class="clear"> </div>

이런 식으로 4+4+4=12 로, 총 12단으로 맞추는 것을 고려하여 4*3=12 니까 3개 div 에 grid_4 클래스를 넣으면 div 를 삽입하면 된다.

존나 쉽지 않은가?

단점은 니들이 원하는 반응형 그리드는 아니다. 타블렛이나 데스크탑에 적합한 레이아웃 구조에 탁월한 선택이다.

하지만 이거와 미디어쿼리를 합치면 반응형 그리드 디자인을 만들 수 있다.

그러면서 왜 이녀석을 소개하냐면 이녀석이 웹 그리드 디자인을 프레임워크로 탄생시킨 원조이기 때문이다.

2. Fluid Baseline Grid (http://fluidbaselinegrid.com/)

이녀석부터 이제 반응형 웹 디자인을 고려한 그리드 디자인 프레임워크 되겠다.

이녀석의 특징은 Baseline 인데, 글씨 크기 위주의 웹을 고려한 그리드 디자인을 생각했다고 보면 된다.

그래서 어찌보면 이미지 떡칠의 한국형 웹과 안맞을 지는 모르겠다. 그래도 소개한다.

이녀석의 특징은 % 단위의 넓이를 나눠서 처리한다는 것이다. 960.gs 또한 이를 지원한다.

그리고 이녀석은 최대 3단계 레이아웃이 있는데,

g1 은 작은 단위로 모바일에 표시 가능하도록 작은 크기의 영역을 잡는다.

g2 는 중간 단위로 타블렛에 표시 가능하도록 중간 크기의 영역을 잡는다.

g3 은 큰 단위의 테스크탑에 표시 가능하도록 큰 크기의 영역을 잡는다.

<div>

    <div class="g2">

         난 타블렛에서 하나를 다 잡아 먹는다.

     <div>

    <div class="g3">

         난 어느 장치에서 봐도 하나를 다 잡아 먹는다.

     <div>

    <div class="g1">

         난 휴대폰에서 하나의 영역을 잡아먹는다.

     <div>

</div>

솔직히 뭐 이 이상은 나눌 일이 없다고 봐도 무방하지 않은가? 그럼 됐다.

3. Negative Grid (http://chrisplaneta.com/free/negativegrid-generator/)

만약 직접 그리드 구조를 짜야 한다면 이녀석을 추천한다. 이녀석은 원하는 크기, 그리드 개수, 여백 등을 지정할 수 있다.

당연히 px 가 아닌 % 이기 때문에 % 단위로 짜야 한다. 만약 px 단위를 원한다면 960 그리드를 써라.

이녀석 또한 960 그리드와 마찬가지로 생성기 시스템인데, % 위주인 방식에서 틀리다.

게다가 가볍다. CSS 생성했는데 보기도 쉽고 내용도 별로 없다. 그리고 prefix 설정도 가능해서 반응형 웹 구성에 잘 맞는다.

사용방법은 대략 이렇다.

<div>

    <div class="col4">3단</div>

    <div class="col4">3단</div>

    <div class="col4">3단</div>

</div>

별거 없다. 나눌 크기를 정해서 col(또는 직접 정한 prefix) 옆에 숫자만 붙여주면 된다. 최대 숫자는 니가 정한대로다. 예를 들어 12개로 나뉘었다면 1부터 12까지를 쓰면 된다.

여백을 만드는 방법은 push(또는 직접 정한 prefix) 옆에 숫자만 붙여넣으면 된다.

난 굳이 미디어 쿼리 혼합하는 방법은 안가르쳐준다. 어자피 반응형 웹을 만들 거고 거기에 대응하기 위해 미디어 쿼리를 배웠을테니까.

그래서 이거와 잘 혼합한다면 깔쌈한 사이트가 만들어질 것이다.

IE를 위해서라면 respond.js 가 필요하다. 그냥 스크립트 쳐넣으면 끝이다 나머진 CSS에 맡겨라. 구글신 영접하면 바로 나온다.

귀찮아서 끝.

니들 그냥 좆돼봐라.