[React] 프로젝트에 global style 설정 (styled components) + reset style

React 숙련주차 개인과제 해설 참고
 https://www.youtube.com/watch?v=i0kLshFoaeM

 

1. GlobalStyle 만들기 with styled-components

GlobalStyle.js

import {createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`

`;

export defualt GlobalStyle;

 

2. reset Styles 을 복사해 넣어요

구글에 reset Styles 검색해보면 나오는 걸 사용하면 된다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
  */

  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;
  }
`;

export default GlobalStyle;

 

3. 없는 거 + 필요한 거 추가

box size 관련 :  border-box로 설정 (css 다루기 더 쉬움)

a tag 폰트 효과 없애기

button이면 커서 보이게 하기, 기본 테두리 없애기

* {
	  box-sizing: border-box;
  }
 
 a {
      text-decoration: none;
      color: black;
  }

  button{
          cursor: pointer;
          border: none;
  }

 

4. 원래 index.css 에 있던것 필요한것만 옮기고 index.css는 지워도 됨~

body 내용만 복사해 왔으나 뭔 내용인지 몰라..

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

5. index.jsx 에서 가져오도록 하자

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import GlobalStyle from "./GlobalStyle";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <>
    <App />
    <GlobalStyle />
  </>
);

 

6. 전역 컬러 설정 용 파일 따로 만들어보기 ~

 - styles 폴더에 모아 두기! 

  > GlobalColor.js

  > GlobalStyles.js

 

그리고 똑같이 index.jsx 에 추가 <GlobalColor />

import { createGlobalStyle } from 'styled-components';

const GlobalColor = createGlobalStyle`
  :root {
    --header-color:#ffc0bd;
    --header-font-color:#8f1d36;
    --header-button-color:#ff5f5f;
    --header-button-border:#ff5151;
  }
`;

export default GlobalColor;