[React]GlobalStyled, reset-css

김나나·2024년 3월 18일

React

목록 보기
11/29

분명 GlobalStyled와 관련된 글과.. reset-css에 대해서 포스트를 작성하였다고 생각했는데 꿈을 꿨나..? styled components에 대한 글밖에 보이지 않아 급하게 작성하게 되었다.......^^

우선 GlobalStyled의 쓰임새는 공통으로 사용되는 특정값 또는 값 초기화를 해주기 위해 사용한다.

이렇게 초기화를 해주는 경우, 직접 하나하나 타이핑하기 힘든 때를 위해 reset css를 이용하게 되었다.


GlobalStyled

1. GlobalStyled.js파일 생성

2. App.js 혹은 index.js에 GlobalStyled를 Import

가능한 상위 폴더에 하는 것이 좋다고 생각해서 나는 index.js에서 App.js 위로 GlobalStyled를 넣어주었다.

3. GlobalStyled에서 편하게 작성하기~

여기서 사용된 ${reset}이 앞에서 얘기했던 초기화에 해당한다.


reset css

1. reset css는 홈페이지에서 css 코드를 긁어서도, npm install로 다운로드도 가능하다.

npm i styled-reset

2. 다운로드가 끝나면 reset을 styled-reset에서 불러와 import 해준다. 여기서 reset은 소문자 r!!! 잘못 입력하지 않도록 주의가 필요하다.

profile
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕

0개의 댓글