기초

Pure의 모든 모듈들은 Normalize.css위에 만들어졌다. 공통된 크로스 브라우징을 지원하기 위한 기본적인 층이다. 구버전의 인터넷 익스플로러 버전을 지원하기 위해 Normalize v1.x를 사용한다. 우리의 CDN에 올려놓을 정도로 매우 Normalize를 좋아한다. <link> 엘리먼트를 페이지에 추가해서 Normalize.css를 가져다 쓸 수 있다:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/base-min.css">

Normalize.css의 개요

Normalize.css는 Nicolas Gallagher와 Jonathan Neal가 만든 오픈소스다. 그들의 말에 의하면:

Normalize.css는 HTML 엘리번트들의 기본 스타일을 유지시켜서 일관된 크로스 브라우징을 더 쉽게 제공해주는 작은 CSS 파일이다. 요즘에는 HTML5 준비를 위해 기존 CSS 리셋에 대신 쓰인다.

Normalize.css에는 훌륭한 문서와 어떻게 기존의 CSS 리셋과 다른지에 대해 설명한 완벽한 가이드가 있다. 또한 YUI의 CSSNormalize 모듈을 확인할 수 있는데, 이것은 context에 대한 버전을 포함해 일반적인 Normalize가 포함되어있다. Normailze의 컨텍스트에 대한 버전은 "yui3-normalized" 클래스 이름을 갖는 엘리먼트의 자식들에게만 normalize된 스타일들을 적용한다.

타이포그라피

Pure를 확장가능하게 유지하기 위해서 Normalize가 제공하는 기본층 위에 어떤 타이포그라피 스타일도 추가하지 않았다. 즉, 다른 크기의 표제(header)들, 인용구, 리스트, 정의 리스트, 기타 등등의 스타일이 최소한만 있으며 오버라이드하기 쉽다는 것을 이야기이다.

표제

표제들은 1에서 6까지이며 숫자가 커지면 사이즈는 작아진다. 폰트 사이즈는 em으로 정의되어있다.

Heading 1	Heading 2	Heading 3
Heading 4	Heading 5	Heading 6

리스트

여러가지 모양의 리스트들이 있다. 순서없는 리스트, 순서있는 리스트, 그리고 정의 리스트. Normalize는 리스트에 기본 스타일과 일관된 크로스브라우징을 제공한다. 특정 어플리케이션에서 나중에 스타일을 적용할 수 있다. 메뉴를 만들기 위해 리스트를 사용하려면 메뉴를 참고.

인용구

인용구는 인용을 표시하기 위해 텍스트를 둘러싼 것이다. 한단계 들어가있는걸 제외하면 기본적으로 보통 텍스트처럼 보인다. 맨 위에 스타일을 정의할 수 있는 자유가 있다는 것이다. 기본적으로는 이렇다:

그에게는 작은 한 걸음이었지만 인류에게는 위대한 도약이다.

<blockquote>
    그에게는 작은 한 걸음이었지만 인류에게는 위대한 도약이다.
</blockquote>

기본 스타일이 없는 장점 덕분에 조금씩 다르게 커스텀된 인용구 스타일이 있다. 사이트를 어떻게 꾸밀지 생각하고 같은 것을 사용하길 권한다.

그에게는 작은 한 걸음이었지만 인류에게는 위대한 도약이다.

축약

<abbr>은 축약(abbreviation)을 나타낸다. title 속성을 설정하면 텍스트 위에 뜨게 된다. 일반적으로 축약은 작은 점선밑줄로 보인다.

YUI는 인터렉티브한 웹 어플리케이션을 제작하기 위한 무료 오픈소스 자바스크립트와 CSS 라이브러리이다.

<p>
    <abbr title="Yahoo User Interface">YUI</abbr>는 인터렉티브한 웹 어플리케이션을 제작하기 위한 무료 오픈소스 자바스크립트와 CSS 라이브러리이다.
</p>

주소

<address>는 연락처 정보를 나타내기 위해 사용된다. 기본적으로 주소는 특정 스타일이 없지만 Normalize를 통해 다양한 인라인 스타일을 입힐 수 있다.

Tilo Mitra
Eric Ferraiuolo
Matt Sweeney
Jeff Conniff

<address>
    <a href="https://github.com/tilomitra">Tilo Mitra</a><br>
    <a href="https://github.com/ericf">Eric Ferraiuolo</a><br>
    <a href="https://github.com/msweeney">Matt Sweeney</a><br>
    <a href="https://github.com/jconniff">Jeff Conniff</a><br>
</address>

인라인 스타일

사용할 수 있는 많은 인라인 스타일들이 있다. Normalize 문서에서 리스트들을 볼 수 있다:

Normalize를 너머서

Normalize.css는 프로젝트를 위한 훌륭한 시작이지만 폼, 테이블, 그리고 메뉴같은 어떤 HTML 엘리먼트들은 Normalize가 제공하는 것보다 더 많은 스타일링이 필요하다.

사용자의 사이트나 앱에 맞춰서 커스텀할 수 있을 정도로 충분히 작으면서도 동시에 엘리먼트들에게 더 확실한 룩앤필을 제공하고 있다. 폼, 테이블, 그리고 메뉴를 확인.