GlobalStyles

Global 스타일 설정

Global 스타일 설정을 하는 이유

• 해당 사이트의 폰트를 설정하거나 SC(Style Component)를 설치하기위함

• yarn add styled-reset

  • SC을 이용해서 css를 초기화해서 0의 상태에서 시작

코드

• 먼저 글로벌하게쓰일 파일 하나를 생성
  • GlobalStyles.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const globalStyles = createGlobalStyle`
    ${reset};
    a{
        text-decoration:none;
        color:inherit;
    }
    *{
        box-sizing: border-box;
    }
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:14px;
        background-color:rgba(20, 20,20, 1);
    }
`;

export default globalStyles;

• App.js

import React from "react";
import Router from "Components/Router";
import GlobalStyles from "Components/GlobalStyles";

function App() {
  return (
    <>
      <Router />
      <GlobalStyles />
    </>
  );
}

export default App;