reset css

reset css를 하는 이유

브라우저마다 태그를 렌더링하는 기본 스타일이 다르다.
기본 padding, margin값들이 적용되어 있는 부분을 초기화 하기 위해 style 기본값을 0으로 만들고 list, a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다.

결론 : 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는 것이다.

reset css 하는 방법

css 파일 추가(기존 방법)

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

npm으로 설치하는 방법

first)

//yarn
$ yarn add styled-reset

//npm
$ npm i styled-reset

second)

import * as React from 'react'
import { Reset } from "styled-reset"

const App = ()=>{
	<>
      <Reset />
      <div>Hello world</div>
    </>
}

export default App;