다양한 CSS 리셋 스타일이 있는데, 가장(?) 보편적으로 사용하는 에릭 메이어의 Reset CSS stylesheet 이다.
Reset CSS - meyerweb.com
내용을 본인의 CSS 앞부분에 넣거나 별도의 CSS 파일로 저장하여 HTML의 <head></head> 사이에 링크해 주면 OK !!
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css" />
</head>
...
</html>주의할 사항은 여러개의 CSS를 불러온다면 최상단에서 불러와 리셋해줘야 제대로 작동한다.
또한 본인의 메인 CSS에 넣을 경우에도 최상단에 넣어 주자 !!!
CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}CSS 리셋 .. 보완은 필요하다
에릭 메이어도 위의 리셋 파일을 그냥 가져다 쓰지 말고 수정해서 쓰기를 원한다.
어떤 이들은 해당 리셋 CSS로 인해 이런저런 문제점(?)이 발생한다고도 한다.
다양한 리셋 스타일과 관련하여 진정한 실력자 분들은 그 내용을 분석하고 자신의 스타일로 변형하기도 한다.
하지만 ... 그런 능력을 키우기 이전엔 그대로 쓰는 수 밖에 없는 현실 ... OTL
리셋 스타일보다 유용한 기본 스타일 선언이라는 유용한 글을 참고 하자 :)
