CSS reset 하는 방법

브라우저는 기본적으로 제공하는 css style이 있다.

기본적으로 제공하는 css style을 detault style이라고 한다.

 

가끔 css를 줄때 margin을 주지 않았는데 margin이 들어가 있는 경우가 있었는데

이는 브라우저에서 기본적으로 제공하는 default style 때문이다.

 

그래서!! css 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-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;
}

위 코드를 src 폴더 안에 reset.css 파일을 만들어 붙여놓고,

index.js에서 reset.css 파일을 import만 해주면 된다!

import "./reset.css";