Reset CSS

1. Eric Meyer’s CSS reset 👩‍💻

브라우저마다 기본 스타일이 다르고, 불필요한 스타일도 많아서 가급적이면 리셋 시켜주는 것이 스타일을 작성하기 쉽고, 크로스 브라우징에 도움을 준다. 이것을 Reset CSS 라 하는데 대부분의 Reset CSS 는 Eric Meyer가 제시한 것을 기준으로 하고 있다.

---

2. Create CSS File 👩‍💻

첫 번째 방법은 직접 CSS 파일을 만드는 것이다.

meyerweb 에서 다음과 같은 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;
}

물론, 대부분의 경우 이것만으론 충분하지 않아서 개인적으로 공통으로 적용하고 싶은 스타일을 함께 reset 에 추가하는 편이다.

a {
  text-decoration: none;
  color: inherit;
}
* {
  box-sizing: border-box;
}
input, textarea {
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
input:focus {
  outline: none;
}
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

이 둘을 합쳐 직접 reset.css 파일에 작성해 넣어 제공해 스타일을 초기화 시킬 수 있다.

• Customized reset.css

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;
}
a {
  text-decoration: none;
  color: inherit;
}
* {
  box-sizing: border-box;
}
input, textarea {
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
input:focus {
  outline: none;
}
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

---

3. JSDelivery 👩‍💻

JSDelivery CDN 에서 제공하는 것을 CDN 에서 직접 가져다 사용하거나 npm 으로 설치해서 사용하는 방법이다. 물론, 이 방법 역시 Eric Meyer의 Reset CSS 를 사용해 만들어졌다.

CDN 을 사용할 경우 JSDelivr 를 방문해 최신 버전을 확인 후 프로젝트에 추가하면 된다.

<!-- static version -->
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" rel="stylesheet">
<!-- latest minor -->
<link href="https://cdn.jsdelivr.net/npm/reset-css@5/reset.min.css" rel="stylesheet">
<!-- latest major -->
<link href="https://cdn.jsdelivr.net/npm/reset-css/reset.min.css" rel="stylesheet">

이 외에도 npm, yarn, bower를 사용할 설치를 제공하며, 여러 스타일 라이브러리와 통합을 제공한다.

npm i reset-css
yarn add reset-css
bower install reset-css

• CSS

@import '/path/to/reset-css/reset.css';

• PostCSS and postcss-import

@import 'reset-css';

• webpack and css-loader

import 'reset-css';

• Less

@import '/path/to/reset-css/less/reset';

• Sass

@import '/path/to/reset-css/sass/reset';

이후 추가로 처리하고자 하는 리셋 스타일을 작성하면 된다.

a {
  text-decoration: none;
  color: inherit;
}
* {
  box-sizing: border-box;
}
input, textarea {
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
input:focus {
  outline: none;
}
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

---

4. Styled Reset 👩‍💻

Styled Components 를 사용할 때 컴포넌트 방식으로 제공하기 위해 사용하며, 역시 Eric Meyer의 Reset CSS 를 사용해 만들어졌다.

Styled Components 버전에 따라 사용 방식이 조금씩 변경되니 NPM JS 를 방문해 현재 버전과 일치하는 사용 방법인지 확인하도록 한다. 다음은 Styled Components 4+ 를 기준으로 설명한다.

npm i styled-reset

이 라이브러리는 reset-css 라이브러리와 달리 Styled Components 로 작성한 컴포넌트를 앱에 추가하는 방식으로 사용되며, 사용 방법은 두 가지가 있다.

1. Reset component

기본적으로 제공되는 Eric Meyer 의 Reset CSS 만 적용하고자 할 경우 기본 제공되는 컴포넌트를 사용하면 된다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Reset } from "styled-reset";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("app-root") as HTMLElement);
root.render(
  <React.StrictMode>
    <Reset />
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);

2. createGlobalStyle

별도의 CSS 파일을 작성하지 않고 Styled Components 만을 사용해 수정된 Reset CSS 를 제공하고자 할 경우 제공되는 메서드를 사용해 확장시킬 수 있다.

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`
  ${reset}
  a {
    text-decoration: none;
    color: inherit;
  }
  * {
    box-sizing: border-box;
  }
  input, textarea {
    -moz-user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
  input:focus {
    outline: none;
  }
  button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
  }
`;

export default GlobalStyle;

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

function App() {
  return (
    <>
      <GlobalStyle />
      <div>Hi, I'm an app!</div>
    </>
  );
}

export default App;