Reset CSS (리셋 CSS)

 

개요

Reset CSS란?

간혹 html로 코드를 작성하고 실행해보면 내가 적용하지 않아도 자동으로 margin이 들어가 있는 경우를 봤을 것이다.

이는 웹 브라우저 마다 default 값으로 스타일이 적용되어 있기 때문이다. 즉, 우리는 브라우저마다 동일한 CSS 스타일을 보여주기 위해

default값으로 설정되어 있는 값을 초기화 해줘야 할 필요가 있다.

이때 필요한것이 Reset.css이다

 

 

적용법

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

(위 코드는 구글에서 Reset CSS라고 검색하면 쉽게 구할 수 있는 코드이다)

위 코드를 복사하여 CSS파일에 붙여넣어주기만 하면 끝이다.

그 이후 link혹은 import해주면 된다.

 

 

예시

 

꼭 적용 후 로컬웹사이트에 들어간 뒤 개발자 도구를 열어 margin값이 0이 되었는지 확인 한다.