CSS 초기화하는 방법 (reset CSS)

 

reset CSS란?

 

웹브라우저마다 default 값으로 스타일이 알아서 적용된다.
ex) 입력하지 않아도 브라우저에서 자동으로 margin 값이 적용되는 경우

이는 브라우저마다 다르게 보여질 수 있기 때문에
CSS 스타일을 통일하여 보여줄 필요가 있다.

default 값을 초기화 하기 위해 필요한 것이 reset css이다.

 

---

reset CSS하는 방법

 

1. 구글에 [reset css] 를 검색하고 초기화 하는 코드를 찾는다.

https://cssdeck.com/blog/scripts/eric-meyer-reset-css/

Eric Meyer’s “Reset CSS” 2.0 | CSS Reset

 

귀찮은 분은 아래 코드 복붙!

 

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

 

2. 웹 편집기에서 css 폴더에 reset.css 파일을 생성한 후 복사 붙여넣기 한다.
- html 파일에 link로 추가해도 되지만 이는 코드가 복잡해보이기 때문에 css파일에 inport로 추가해 사용하는 것이 좋다.

 

 

3. 그리고 기존에 작업하던 css 파일에 @import를 사용해 리셋 파일을 추가해준다.

 

@import "reset.css";

 

4. 브러우저 스타일이 초기화 되었는지 확인 후 사용하면 된다.