강인규 블로그

0%

Reset CSS 사용하기

작성일 Edited on In , Disqus:

Reset CSS

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어서 CSS가 없어도 작동합니다. 그런데 웹브라우저에 따라 디폴트 스타일이 다르고 지원하는 tag나 style도 제각각이어서 주의가 필요합니다.

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용합니다. 즉 브라우저 별로 제각각인것을 디폴트 스타일로 통일시켜 주는 역할도 합니다.

자주 사용되는 Reset CSS는 다음과 같습니다.

그중에 그래도 가장 적다고 생각하는 부분을 여기에 적었습니다.

Eric Meyer’s reset
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* 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;
}

마치며 (첨언)

위의 코드는 기본입니다. 이것으로는 기본만 되고 그후에 자기에 맞게 수정하셔야 합니다.

관련 문서 바로가기