초기화(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;
}

' > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (0) 2017.11.16
CSS 초기화  (0) 2017.11.14

+ Recent posts