reset.css와 normalize.css

CSS 도구 : reset CSS 

 

 

수많은 html 태그들은 각각의 스타일을 가지고 있다.

각각 margin 값이나, padding 값이 다르다. 

 

그리고 이게 브라우저 마다 태그의 스타일 값이 다르기도 하다.

ex) h1의 크기나 마진값이 브라우저마다 각각 다르다거나.. 

     reset.css 값을 주면 h1이든 h3이든 글자 크기가 모두 같아짐.

 

그래서 그 상태에서 각각 다르게 값을 주면서 꾸미기가 어려움.

 

reset.css를 통해 모든 값들의 마진과 패딩을 0으로 줄 수 있다.

 

기본 줄 높이, 여백 및 제목의 글꼴크기 등과 같은 브라우저상의 불일치를 줄이는 것!

프로젝트를 시작할 때, 변경되지 않은 상태로 이것을 사용하는 것이 좋다. 

 

그리고 내가 각각 꾸며주면 되는 것~!

 

/* 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;
}

 

ps.   

 

reset.css를 사용하고 싶지 않다면 normalize.css 를 쓸 수도 있다.

 

normalize.css는 h1을 더 크게 만들거나 리스트를 리스트 처럼 보이게 하거나 

브라우저마다 크기를 갖게 할 수 있다. 

즉, 여전히 html의 스타일을 가지고는 있지만, 

브라우저 상의 불일치를 없앤다.