React 프로젝트를 생성하면 브라우저마다 Padding, Margin 등 CSS가 적용되어 있다.
다양한 브라우저에서 동일한 CSS를 적용하기 위해서는 CSS를 초기화시키고 시작해야 한다. 이럴 때 사용하는 것이 Reset CSS이다.

Reset CSS를 검색하면 최상단에 Eric Meyer의 Reset CSS가 뜬다.
https://meyerweb.com/eric/tools/css/reset/

이 스타일은 거의 모든 HTML 요소의 기본 스타일을 초기화하고, HTML5 요소까지 고려해서 작성된 것이기에 이걸 사용하면 된다.

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

사용방법

1. reset.css 생성

reset.css에 코드를 작성하고, App.js에서 reset.css를 import 하면 된다.

import './reset.css';

2. Styled Components 적용

주로 사용하는 이름의 주로 사용하는 GlobalStyle을 만들고 코드 작성 후 App.js 상단에서 import 해서 사용한다.

GlobalStyle.js

import { createGlobalStyle } from 'styled-components';

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

export default GlobalStyle;

App.js

import React from 'react';
import GlobalStyle from './GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      <div>
        <h1>Reset CSS</h1>
      </div>
    </>
  );
}

export default App;

오늘은 프로젝트 시작 시 반드시 해야 하는 Reset CSS에 대해서 알아봤다.
사실 나도 집에서 혼자 공부할 때에는 알지 못했지만 이제는 필요한 이유를 알고 한 번 정리해 보았다.
앞으로 프로젝트를 시작하기 전에 내 벨로그를 보면서 설정하고 시작해야겠다.