Frontend
CSS Normalize와 CSS Reset
date
Jun 8, 2023
thumbnail
slug
css-normalize-css-reset
author
status
Public
tags
CSS
summary
브라우저 프로그램 간 기본 CSS 차이를 좁히기 위한 방안
type
Post
category
Frontend
User Agent Stylesheet
우리가 사용하는 여러 브라우저 프로그램에는 기본(default)로 적용되어 있는 스타일링이 있습니다. 브라우저가 자체적으로 설정해 놓은 기본 스타일링을 모아 놓은 것을 User Agent Stylesheet 라고 합니다. 때문에 브라우저마다 정의되어 있는 기본 스타일에 약간의 차이가 있어 크로스 브라우징 이슈가 발생합니다. 이를 초기화하기 위한 방안으로 CSS Normalize, CSS Reset가 있습니다.
CSS Normalize
각 브라우저의 디폴트 CSS 값을 건들지 않는 선에서 브라우저 간의 스타일 차이를 줄여줍니다.
- 웹 브라우저(Chrome, Firefox, IE, Edge, Whale, Opera …etc)는 자체 내장 스타일을 가지고 있는데, html 엘리먼트에 적용되는 스타일이 서로 상이할 수 있습니다.
- 브라우저 별로 스타일에 큰 차이는 없지만 일관적인 스타일을 적용하기 위해 사용하곤 합니다.
- 오픈 소스 CSS Normalizer로는
Normalize.css가 대중적이고, 리액트 프로젝트에서 Styled Components를 사용할 때는styled-normalize등을 사용합니다.
CSS Reset
말 그대로 극단적으로 모든 CSS 값을 제거해주는 코드입니다.
- 모든 HTML 엘리먼트의 스타일을 직접 커스텀해주어야 합니다.
- 규모가 어느정도 있는 프로젝트에서 디자인 시스템을 개발할 때 주로 사용됩니다.
- 실질적으로는 기본 스타일을 삭제하는 것이 아니라 새로 덮어 씌우는 것이기 때문에, 약간의 성능 저하가 있을 수 있습니다.
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; }
- 웹사이트가 겁나 못생겨진다.
- 또한, 지저분한 CSS 선택자들의 엮임으로 디버깅할 때 읽을 수 없을지도 모른다.
어떤 걸 써요?
요새는 Reset CSS보다 Normalize가 더 광범위하게 사용되는 것으로 보입니다. 프로젝트의 범위를 파악하는 것이 중요합니다. 스타일이 완전히 0인 상태에서 시작해야 하는 큰 프로젝트의 경우 Reset을, 그렇지 않은 경우는 Normalize를 사용하는 것이 일반적입니다.
다양한 스타일 라이브러리 등을 사용하는 경우에는 일반적으로 CSS 초기화가 기본으로 되어 있기 때문에 따로 설정할 필요는 없습니다.
