CRYPTO TRACKER - (2)Styles

브라우저의 기본CSS 초기화 방법

스타일컴포넌트에 createGlobalStyle이라는 속성이 있다.
이 속성은 한 컴포넌트를 만들 수 있게 해주는데 랜더링 될 때, 이 컴포넌트는
전역 스코프에 스타일들을 올려준다.

• App.tsx

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


function App() {

  const GlobalStyle = createGlobalStyle`
    body {
      color: red;
    }
  `;
  
  return (
    <>
      <GlobalStyle />
      <Router />
    </>
  );
}

export default App;

전역으로 적용된 모습을 확인 할 수 있다.

reset-react-css의 주소로 들어가 해당 내용을 복붙한뒤 createGlobalStyle내부에 넣어주면 스타일 초기화가 완성된다.

  const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
  `;

구글폰트 적용하기

createGlobalStyle 안에 해당 내용을 복붙한다
body {font-family: 'Source Sans Pro', sans-serif} 적용 끝!