CSS reset with Styled Components

CSS reset 하기 with Styled Components

CSS reset은 HTML Element의 Default 값들을 없애주는 작업이다.

CSS reset을 하지 않으면 브라우저마다 기본 값이 달라서 브라우저에 따라 다르게 보일 수가 있다.

 

즉, 초기화 작업이 필수적이다.

나는 이 초기화 작업을 styled-components를 이용해 수행했다.

순서는 아래와 같다.

 

1. styled-components 설치하기
2. styled-reset 설치하기
3. GlobalStyle.js 생성하기
4. GlobalStyle.js에 reset 관련 코드 작성하기
5. App.js에 GlobalStyle import하기

 

 

1. styled-components 설치하기

yarn add styled-components

npm i styled-components

둘 중 하나를 사용한다.

 

2. styled-reset 설치하기

yarn add styled-reset

npm install styled-reset

마찬가지로 둘 중 하나를 사용한다.

 

3. GlobalStyle.js 생성하기

GlobalStyles.js의 위치는 크게 상관없다.

나중에 import만 잘 해주면 된다.

 

4. GlobalStyle.js에 reset 관련 코드 작성하기

GlobalStyle 적용에 관한 부분은 skip한다.

궁금하다면 아래 링크로 이동~

https://na0i.tistory.com/entry/%EA%B8%80%EB%A1%9C%EB%B2%8C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-with-Styled-Components

글로벌 스타일 적용하기 with Styled Components

 

GlobalStyle 상단에

import reset from 'styled-reset';

를 작성한다.

 

5. App.js에 GlobalStyle import하기

App.js에 GlobalStyle을 import해서 사용한다.

밑줄 친 부분대로 사용하면 된다.

 

끝!