[react] style set up (GlobalStyle, Reset CSS, Fragment)

1. GlobalStyle

createGlobalStyle : styled-components의 property, helper 함수,
createGlobalStyle로 생성 된 컴포넌츠를 렌더링 시, 전역 스코프에 스타일을 올림.
https://styled-components.com/docs/api#createglobalstyle

import Router from "./Router";
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body{
    color : red;
  }
`;
function App() {
  return (
    <>
      <Router />
      <GlobalStyle />
    </>
    //<></> : Fragment, 유령 컴포넌츠, 부모없이 여러 컴포넌츠가 위치할 수 있음
  );
}

export default App;

위 코드 실행 시, 아래와 같이 GlobalStyle로 지정한 css가 전역으로 적용 됨.

<style data-styled="active" data-styled-version="6.1.8">body{color:red;}</style>

2. Reset CSS

CSS 초기값 제거. 하단 Reset CSS 깃헙 코드 참고.
https://github.com/zacanger/styled-reset/blob/master/src/index.ts
추가로 font goole fonts에서 font-family 설정, text-decoration, box-sizing 설정

2-1. Google Fonts

https://fonts.google.com

• Source Sans Pro 폰트

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');
font-family: 'Source Sans Pro', sans-serif;

2-2. 추가 CSS 리셋 설정

  * {
    box-sizing : border-box;
  }
  body {
    font-family: 'Source Sans Pro', sans-serif;
    //light 300, regular 400
  }
  a {
    text-decoration : none;
  }

2-3. Color 설정 Flat UI Color

여러가지 컬러 팔레트
https://flatuicolors.com/palette/gb

3. 기타.Fragment

<></> : Fragment, 유령 컴포넌츠, 부모없이 여러 컴포넌츠가 하나로 묶음.

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