CSS reset하기(with.styled-component)

왜 reset 해야하는가

CSS reset은 HTML Element의 디폴트 값을 없애주는 작업
브라우저에 기본 설정되어 있는 css가 있기 때문에 css설정을 reset 해준 뒤에 개발을 진행해야 원하는 형태(개발자가 의도한 대로)로 만들 수 있다.

• 크로스 브라우징을 위해서 사용(크로스 브라우징? 어느 하나의 웹 사이트에서만 최적화되는 것을 막기 위해 공통 요소를 사용해서 제작)

styled-reset 사용

styled-reset은 styled-components와 함께 브라우저에 기본적으로 설정되어 있는 스타일을 지워주는 패키지

설치

1. npm 이용하고 있으면

npm i styled-reset

2. yarn 이용하고 있으면

yarn add styled-reset

사용법

npm_styled-reset 에 따르면 다음과 같이 사용하면 된다.

import * as React from 'react'
import {createGlobalStyle} from "styled-components";
import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`
	${reset}
	/* other styled */
`

const App= () => {
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
}

export default App

참고

https://meyerweb.com/eric/tools/css/reset/