Reset
HTML은 기본적으로 문서이기 때문에 어떠한 스타일을 주지 않더라도 문서처럼은 보이게 기본적인(h1 태그의 경우 자체적인 패딩이나 마진이 적용이 된다던지) 스타일링을 적용한다.
하지만 스타일링을 함에 있어서는 원하지 않는 기본 스타일이 적용 될 수 있으므로 reset으로 기본적인 태그의 스타일을 초기화 하여 원하는 스타일로 적용시킬 수 있다. reset의 방법은 수없이 많고, reset마다의 스타일 철학도 다르기 때문에 구글링하여 원하는 reset을 적용하면 된다.
그 중에서 유명한 reset.css와 normalize.css에 대해 알아보자.
Reset.css
가장 유명한 에릭 마이어 아저씨의 reset.css이며 모든 스타일링을 초기화 시켜버리는 reset이다. 이 reset의 철학은 기본적인 스타일링을 무조건 배제하는 것이다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} ...
모든 태그들에 대해 margin과 padding을 0으로 주며 폰트 크기도 모두 초기화 시킨다.
- 장점 : 모든 스타일링을 초기화 시켜주기 때문에 도화지처럼 원하는 스타일링을 할 수 있다.
- 단점 : 모든 태그들을 선언하고 있기 때문에 불필요한 태그들에 대한 선언도 많이 있다. (abbr, dfn 등)
Normalize.css
브라우저의 경우 여러 기업에서 만들기 때문에 브라우저마다 미세하게 기본적인 스타일링이 다를 수 있다. 그래서 크롬을 기준으로 스타일링을 하더라도 파이어폭스에서는 스타일링이 어긋날 수 있게 된다. 그래서 모든 브라우저에서 동일하게 적용될 수 있도록 만든 것이 normalize reset이다.
normalize.css 페이지에서 다운로드를 클릭하면 reset 코드가 페이지에 나온다.
기본적인 폰트 크기같은 것들은 놔두고, 패딩이나 마진같은 것들을 제거시킨다.
- 장점 : 불필요한 선언들이 없고, 최소한으로 리셋을 시킨다.
- 단점 : 모든 브라우저에서 동일하게 적용시킬 수 있게 하므로 구형 브라우저에서도 적용될 수 있게 하향평준화가 된다.
추가 꿀팁
다음 두 속성은 파이어폭스와 맥OS에서 폰트를 좀 더 부드럽게 보여주는 기능을 하는 css속성들이니 reset에 추가해도 좋다.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;