어떻게 Pure 그리드가 작동하는가?
Pure 그리드는 매우 간단하게 작동한다. pure-g를 행이나 "그리드"가 되고, pure-u-*-*는 열 혹은 "유닛"이 된다. 각각의 pure-g는 많은 유닛을 포함할 수 있다. 유닛들은 너비를 표현하기 위한 많은 클래스 이름들이 있다. 예를 들어, pure-u-1-2는 50%의 너비를, pure-u-1-5는 20%의 너비를 가질 것이다.
Pure 그리드의 유일한 제약은 모든 "유닛"은 "그리드"의 밑에 있어야한다는 것이다. 다시 말하자면, pure-u-* 클래스 이름을 가진 엘리먼트는 pure-g 혹은 pure-g-r 클래스 이름을 가진 엘리먼트를 부모로 가져야한다는 것이다. 여기 3개의 열을 가진 그리드 예제가 있다.
<div class="pure-g">
<div class="pure-u-1-3">
<!--
기본적으로, 그리드 유닛은 어떤 margin/padding을 갖지 않는다.
추가하고 싶다면 아래에 컨테이너를 만들어 넣어라.
-->
<p>Thirds</p>
</div>
<div class="pure-u-1-3">
<p>Thirds</p>
</div>
<div class="pure-u-1-3">
<p>Thirds</p>
</div>
</div>어떻게 Pure 반응형 그리드가 작동하는가?
Pure 반응형 그리드는 존재하는 그리드 구현 중 최상위에 만들어졌다. pure-g-r(예상했듯 r은 반응형responsive을 의미)라는 클래스 이름 하나가 추가되었다. 보통 사용할 때처럼 pure-g를 사용하는 대신 사용할 수 있다. pure-g-r의 바로 밑에 있는 pure-u-*-*의 클래스이름을 갖는 모든 엘리먼트들은 자동적으로 반응형이 된다.
The HTML
보통 Pure 그리드를 어떻게 쓰는지 아래 첫번째 예시가 나와있다. 이 그리드들은 반응형이 아니다. 스크린 너비를 무시하고 항상 1/3의 너비다. 두번째 예시는 pure-g 대신 pure-g-r로 되어있고, 좁은 스크린 너비에서 전체의 1/3의 너비를 갖는다.
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div><div class="pure-g-r">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>기능들
- 다른 스크린 크기들에 대한 미디어 쿼리 설정을 추가할 수 있다. (데스크탑, 가로 태블릿, 세로 태블릿, 폰)
- 특정 너비보다 작아지면 엘리먼트들을 100%로 설정 (기본적으로 767px)
- 이미지보다 작은 스크린에서는 너비 보정
- 원하는만큼 많은 열이 가능(혹은 적게도)
- 접두사(prefix) 설정 지원
아래에서 직접 확인해보자!
페이지를 리사이즈하면 그리드가 편한다.
빠르다
YUI의 경량 코어와 모듈화된 구조로 확장가능하고 빠르고 튼튼하게 만들 수 있다. 야후의 프론트엔드 엔지니어들이 만든 YUI는 전세계 많은 유명한 사이트들에서 구동된다.
완전하다
YUI의 직관적이고 좋은 문서가 있는 API를 통해 기본적인 DOM을 관리하며, 데스크탑 브라우져, 모바일 기기, 그리고 서버에서 퍼포먼스좋고 지속가능한 어플리케이션 개발을 할 수 있다.
현업으로 사용
활발한 커뮤니티를 통해 잘 구조화된 인프라와 종합적인 툴들로 간단한 웹페이지에서 복잡한 웹 어플리케이션까지 프로처럼 만들 수 있다.
공짜며 오픈소스
YUI는 모든 사용에 있어서 무료이며 GitHub에서 오픈되어 개발되고 있다. 코어 팀 멤버들은 항상 포럼과 Freenode의 #yui IRC채널에서 찾을 수 있다. 리퀘스트는 환영!
2/5 열
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
3/5 열
Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
그리드 유닛에 padding과 border들 적용하기
Pure 그리드에 border와 padding을 추가하기 위해서는 두가지 선택지가 있다. 첫번째는 <div>를 각 Grid 유닛 안에 넣고 컨테이너로 스타일을 적용하는 것이다.
<style>
.sidebar {
padding: 0.5em;
border-right: 2px solid #777;
}
.main {
padding: 0.75em 0.5em;
}
</style>
...
<div class="pure-g">
<div class="pure-u-1-2">
<div class="sidebar"> ... </div>
</div>
<div class="pure-u-1-2">
<div class="main"> ... </div>
</div>
</div>
두번째 선택은 Grid 유닛에 직접적으로 border와 padding을 추가하는 것이다. 보통 레이아웃을 깨트릴 수 있는 위험이 있지만 box-sizing: border-box를 사용해서 이런 문제를 쉽게 피할 수 있다.
<style>
.pure-g > div {
box-sizing: border-box;
}
.sidebar {
padding: 0.5em;
border-right: 2px solid #777;
}
.main {
padding: 0.75em 0.5em;
}
</style>
...
<div class="pure-g">
<div class="pure-u-1-2 sidebar"> ... </div>
<div class="pure-u-1-2 main"> ... </div>
</div>
box-sizing: border-box를 사용하면 마크업을 더 깔끔하게 유지할 수 있지만 두가지 사소한 약점이 있다. IE7같은 구형 브라우저들에서는 지원되지 않고, 모든 그리드 유닛의 속성에 설정하면 나중에 덮어쓰거나 해제하기 어려워진다. Pure는 그렇게 깐깐한 라이브러리가 아니므로 box-sizing의 기본값을 content-box로 남겨두고 사용자의 선택을 남겨뒀다.
모바일에서의 그리드
pure-g-r 클래스이름 대신 pure-g를 사용하면 작은 스크린에서도 그리드 유닛이 퍼지지 않는다. 폰같은 작은 스크린에서 그리드를 만드는 좋은 방법이다.
1/3
이 셀은 모바일 기기에서도 그리드로 보인다.
1/3
이 셀은 모바일 기기에서도 그리드로 보인다.
1/3
이 셀은 모바일 기기에서도 그리드로 보인다.
그리드만 사용하기
그리드는 Pure CSS의 부분이지만, 그리드만 사용하고 싶고 다른 모듈을 사용하고 싶지 않다면 부분적으로 적용할 수 있다. 단지 <link>를 <head> 안에 추가하기만 하면 된다.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/grids-min.css">