초기화(Reset)
익스, 파폭, 오페라, 크롬, 사파리 등 여러 웹브라우저들이 있으며, 그들마다 CSS 기본값이 조금씩 다르다. 각기 다른 브라우저들로 동일한 화면을 보여주기 위해서 작업 전 CSS를 초기화 해야한다.
초기화 도구
1. Eric Meyer's 'Reset CSS' 2.0
http://meyerweb.com/eric/tools/css/reset/
2. normalize.css
https://gist.github.com/demun/4110614
3. HTML5 Doctor
http://html5doctor.com/html-5-reset-stylesheet/
CSS 파일
아래는 내가 자주쓰는 Reset.css
@charset "utf-8";
/*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:inherit;
vertical-align:baseline;
font-weight:normal;
}
fieldset {
border:0;
}
address,em {
font-style:normal;
font-weight:normal;
}
strong {
font-weight:bold;
}
input, button, select {
font-family:inherit;
margin:0;
padding:0;
vertical-align:middle;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display:block;
}
ol, ul, li {
list-style:none;
}
button {
margin:0;
padding:0;
border:0;
background-color:transparent;
-webkit-appearance:button;
cursor:pointer;
}
a {
text-decoration:none;
color:#666;
}
img {
display:block;
border:none;
}
button:focus,
input:focus,
a:focus {
outline:thin dotted;
outline:none;
outline-offset:-2px;
}
[tabindex="-1"]:focus {
outline:none;
}
