그리드시스템-레이아웃을 잡아주는 도구 Semantic

그리드시스템이란 레이아웃을 격자형태로 짤라서 잡아주는 도구를 말합니다.

검색을 해보시면 아주 많은 그리드가 나옵니다.

그중에서 오늘 소개하는 것은 세만틱 그리드 시스템입니다. -> http://semantic.gs/

이 semantic 은 제가 제작한 반응형 스킨 Responsive 에 사용된 그리드 시스템입니다.

반응형 스킨 Responsive -> http://demun.tistory.com/2271

홈페이지에 보시면 다운로드 링크와 함께 사용방법이 적혀있습니다.

예제.

1. less 를 지원합니다.

그리드 시스템중에서 less , sass 를 지원하는 곳은 많지 않습니다.

왜 이걸 지원해야하느냐? 물으실수도 있지만 less 같은 언어를 사용해보신분이면 알겁니다.

무척 편리합니다. 또한 재사용이 가능합니다.

다운로드 받아서 압축을 해제하면 examples 폴더가 있으며 위의 예제가 각 폴더마다 잘 정리되어 있습니다.

로컬컴퓨터에서 떠블클릭으로 실행하면 올바르게 실행이 안됩니다.

그 이유는 less.js 를 링크시키고 있기 때문입니다. less 파일을 변환하지 않고 그냥 less.js 를 링크시키면 서버에 올려야 제대로 표시됩니다.

티스토리 사용자는 그대로 스킨업로드를 통해서 업로드하면 잘 됩니다. 경로에 맞게요.

변환을 하고 css 파일을 링크시키면 정상작동 합니다.

less 파일을 css 로 변환하는것은 Sublime test 2를 사용하면 단축키인 F7한번 클릭하면 끝입니다.

Sublime Text 2에서 less 컴파일하기 -> http://demun.tistory.com/2237

less 파일을 열어보면.

@import '../../stylesheets/reset.css';
@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';

이런 구문이 나오는데. reset,demo 는 필요없고, 실질적으로 grid.less 와 각 폴더에 less 파일만 있으면됩니다.

사용법도 매우 간단해서 12컬럼중에서 어디에다 몇개를 사용할건지 지정만 해주면 됩니다.

아래보시면 #maincolumn 에 9개의 컬럼너비를 사용한다는 의미입니다.

2. 반응형.유동형 지원.

예제에서 보시면 고정픽셀과 유동형을 지원하며, 또 반응형까지 지원합니다.

위의 이미지를 보시면 @media screen.... 하고 나오는것이 미디어쿼리인데요 각각의 너비 즉 디바이스의 너비마다 css 코드를 작성해주는 것을 말합니다.

위의 구문을 보면 720px 아래 해상도는 메인컬럼과 사이드바 컬럼을 12개의 컬럼너비로 사용하라는 말입니다. 즉 일자로 사용하라는 말이죠.

이렇듯 여러가지 형태도 지원하고 less 파일도 지원해서 코드가 짧고 무척 간단합니다.

부트스트랩에서 사용하는 offsetting , nesting 등 다 지원합니다.

부트스트랩의 컬럼배치와 네스팅

세만틱의 nested, push and pull(offsetting)

자세한 사용법은 홈페이지에 나와 있습니다. 모두 다 적으려면 페이지가 너무 길어져서 설명을 제외하겠습니다.

혹 질문이 있으시면 댓글 남겨주세요.

3. 지원형황.

홈페이지에서는 Firefox 3.5+, Safari 4+, Chrome, Opera 9+, and IE6+ 지원한다고 합니다. 거의 모든 브라우져를 지원한다고 나와 있는것이죠.

익스플로러를 모두 지원하니 좋을 따름이죠.

이것도 경쟁력이거든요.물론 IE6, 7 모두 없어져야할 브라우져이지만요.

이렇듯 괜찮은 그리드 시스템이라 생각합니다.

demun(대문블로그)