Styled Components에서 Reset CSS 적용하기

Reset CSS를 사용하는 이유

Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다.

 

최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다.

 

Reset CSS 코드 예시

아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다.

CSS Tools: Reset CSS

 

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

 

Styled Components에서 Reset CSS 적용하기

방법 1. Global Style에 직접 Reset CSS 적용하기

styled-components에서 createGlobalStyle 이라는 메소드에 Reset CSS를 템플릿 리터럴(Template Literal) 형태로 넘겨주면 됩니다.

import React from 'react'
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;
  }
  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;
  }
`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
  </React.Fragment>
)

export default App

 

방법 2. styled-reset 사용하기

위와 같이 직접 CSS를 적용할 수 도 있지만, Reset CSS를 쉽게 적용할 수 있도록 라이브러리로 제공해주기도 합니다.

styled-reset

 

styled-reset 의존성을 추가합니다.

yarn add styled-reset

 

그리고 styled-reset을 import 하여 GlobalStyle에 넣어줍니다.

import React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
  </React.Fragment>
)

export default App