[CSS] reset.css

What is reset.css?

CSS 초기화

브라우저마다 CSS의 설정값이 존재하는데 이를 0, 1, none 따위의 기본값으로 설정해 모두 초기화 하는 것을 뜻한다. CSS를 초기화하면 브라우저가 달라도 최대한 똑같은 화면이 보이게 해준다.

예를 들면 chrome에서는 기본 폰트가 sans-serif(고딕체) 계열인데

Internet Explorer에서는 기본 폰트가 serif(명조체) 계열이라 동일한 레이아웃이어도 느낌이 달라진다.

형광펜으로 표시한 부분을 보면 자동으로 margin이 설정되어 있다.

이 margin은 내가 아니라 브라우저가 알아서 설정한 기본 CSS다.

---

reset.css

CSS를 초기화할 때는 주로 reset.css에 초기화 할 내용을 담아 style.css에 import하는 방법을 많이 쓴다. 아래 코드가 가장 보편적인 reset.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;
}

main CSS 파일에 import 해주면 된다.

적용 후 새로고침을 하면 margin이 사라져 있다(폰트는 안 건드림).

IE에서도 margin이 안 보인다.

---

참고

CSS Tools: Reset CSS