eric meyer의 reset stylesheet

웹퍼블리싱을 하시는 분들이라면 자신이 만들어 놓은 reset stylesheet는 모두들 가지고 계실겁니다.

그것을 기본으로해서 프로젝트 마다 적절하게 커스터마이징해서 사용하고들계시죠?


reset stylesheet란?
브라우저마다 해당 브라우저가 특정 엘리먼트를 브라우저를 통해서 보여지는것에 차이가 조금씩 있습니다. padding이나 margin값이 틀리기도 하고, text-style이 다르기도 합니다. 그렇기 때문에 좀더 편하게 크로스브라우징을 고려하여 웹퍼블리싱을 하기위해서는 가급적 많은 브라우저에서 비교적 동일한 VIEW를 나타낼수 있게끔 reset stylesheet를 작성하여, 엘리먼트들의 기본 표현속성값을 일치시키는 것을 말합니다.


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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
자세한 내용보러가기


이 reset stylesheet는 web statandard를 위해 왕성히 활동하고 계시는 eric meyer가 제시하는 것입니다.

eric meyer의 이런 포스팅이 올라올때마다 이에 대해 갑론을박하는 많은 코멘트들이 따르는 것을 보아도 알수 있듯이

reset stylesheet에 정답은 당연히 없다고 생각합니다.

웹퍼블리셔마다 자신이 프로젝트를 수행하면서 몸에 베인 자신의 마크업스타일, CSS작성 스타일에 따라 얼마든지 달라 질 수 있는 부분입니다.(물론 사내 CSS가이드 라인이 있는 회사도 있죠.)



eric meyer의 reset style에 대해 제 개인적인 경험에 비추어 말씀드리자면

제가 프로젝트를 하면서 다른분들의 reset style을 볼때

* 선택자에 line-height에 절대값(18px, 16px 등등) 을 적용하고
img 엘리먼트에 vertical-align:middle을 적용하시는 분들을 많이 보았습니다.

하지만 이런경우에는 이미지의 세로크기가 line-height보다 큰경우에 이미지가 완전히 보이지 않습니다.

그렇기 때문에 vertical-align 값을 다시 조정하거나 line-height의 수치를 조절해야 정상적으로 보이게 됩니다.

또한 글자크기가 line-height크기를 초과했을때 글자 역시 하단부분이 잘리는 현상이 나타납니다.

그래서 저는 vertical-align:middle이라는 universal한 속성을 사용하지 않고 vertical-align:baseline을 이용하고,
line-height에는 상대크기값을 (대게 1또는 그 이상의 값 1.2, 1.4)을 디자인가이드라인에 맞춰서 사용하는 편입니다. 이렇게 하면 해당 엘리먼트에 수치를 곱한 값이 line-height가 되어 글자 하단 잘림현상이 나타나지 않습니다.



야후 reset 관련 자료 : http://developer.yahoo.com/yui/reset/

Comment List