TIL.1222 CSS Reset

CSS스타일 초기화 - CSS스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 기본값을 주기 위해설정을 해주는 세팅이다(각 브라우저마다 기본으로 제공하는 스타일이 다르기 때문에 각 브라우저의 스타일의 차이를 줄이기 위함)

🖥️전역 스타일링(Global Style)&CSS Reset

CSS Reset으로는 여러가지 방법이 있다고 한다. 그 중 2가지 방법으로 React에 적응해보려 한다.

💡초기화 코드 적용

• 최상위 파일에 reset.css파일을 만들어 csstools의 초기화 코드를 그대로 복붙
  CSS Tools

• CSS파일에 import하면 끄읕.

💡 전역 스타일

• 설치 yarn add styled-components
• 설치 yarn add styled-reset
• GlobalStyle.js파일 만들어 styled-reset, styled-components import 후
  아래 코드 처럼 작성 후 App에 전역스타일로 적용

//GlobalStyle.js

const GlobalStyle = createGlobalStyle`
    ${reset}
`;

export default GlobalStyle;

//App.jsx
import * as React from "react";
import GlobalStyle from "./GlobalStyle";


function App() {

  return (
    <React.Fragment>
      <GlobalStyle />
    </React.Fragment>
  );
}

export default App;