CSS Normalize와 CSS Reset

이번 포스팅에서는 CSS Reset(리셋)과 CSS Normalize(노멀라이즈)에 대해서 알아보도록 하겠습니다.

CSS Normalize와 CSS Reset의 필요성

세상에서는 여러 가지 브라우저가 있으며 우리가 만든 웹사이트나 웹 애플리케이션이 이 중 어떤 브라우저에서 돌아갈지는 알 수 없습니다. 여기서 문제는 소위 User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다는 것 인데요. 다시 말해서, 우리가 만든 UI가 크롬(Chrome)에서 열었을 때와 사파리(Safari)에서 열었을 때 다르게 보일 수 있다는 말이 되겠지요?

이러한 문제를 최소화하기 위해서 사용하는 것이 CSS Normalize와 CSS Reset인데요. 접근 방식은 약간 다르지만 이 두 가지 모두 브라우저에 구애받지 않고 최대한 동일한 사용자 경험을 제공하겠다는 동일한 목표를 가지고 있습니다.

CSS Normalize

아래는 아무런 추가 스타일링 없이 CSS Normalize만 적용된 웹페이지의 전형적인 모습입니다. 어떤가요? 뭐, 예쁘지는 않지만 그런데로 볼 만은 하죠?

CSS Normalize는 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 주는데요.

애초에 브라우저들이 자체적으로 HTML 요소 별로 스타일을 제공하는 이유가 아무런 스타일이 되지 않는 웹페이지도 사용자가 어렵지 않게 구조와 내용을 파악할 수 있기 도와주기 위함이기 때문에, CSS Normalize가 적용한다고 해서 이 부분에서 크게 달라지지는 않습니다. 단지 차이점은 CSS Normalize가 적용된 웹페이지는 어느 브라우저에서든 일관적인 모습으로 나타나게 됩니다.

예를 들어, 크롬(Chrome)과 파이어폭스(Firefox), 사파리(Safari) 간에 <h1> 요소의 크기와 외부 여백을 통일해주고요.

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

인터넷 익스플로러(Internet Explorer) 10에서만 <a> 요소에 테두리색이 적용되는 문제를 다음과 깉이 해결해줍니다.

a {
  background-color: transparent;
}

여러 가지 오픈 소스 CSS Normalize가 있지만 Normalize.css가 가장 대중적으로 사용되고 있습니다. 참고로 React 프로젝트에서 Styled Components로 스타일을 하시는 경우에는 styled-normalize가 많이 사용되고 있습니다.

CSS Reset

아래는 아무런 추가 스타일링 없이 CSS Reset만 적용된 웹페이지의 전형적인 모습입니다. 위에 CSS Normalize를 적용한 웹페이지와 비교해보면 상당히 알아보기가 어렵죠?

CSS Reset은 다음과 같이 상당히 극단적으로 브라우저의 내장 스타일을 초기화시켜주는데요.

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

브라우저가 자체적으로 모든 HTML 요소에 적용해준 스타일이 모두 사라져버리기 때문에 CSS Reset을 적용하면 웹페이지가 급격하게 달라지는 것을 볼 수 있습니다. 다시 말해서, CSS Reset을 적용해놓고 아무런 추가 스타일을 해주지 않으면 해당 웹페이지 상의 모든 HTML 요소가 동일한 모습으로 보이게 될 것입니다. 따라서, HTML 소스 코드를 직접 보지 않는 이상, 어디가 <h1>이고, 어디가 <p> 인지, 유관으로 구분할 수 없게 됩니다.

오픈 소스 CSS Reset 중에서는 전통적으로 Eric Meyer’s CSS Reset이 많이 사용되었는데요. 최근에는 브라우저 간 호환성이 좋아지면서 불필요한 부분을 줄이고 최신 웹 개발 트랜드를 반영한 Elad Shechter’s CSS Reset이 인기를 끌고 있습니다.

둘 중에 어떤 것을?

CSS Normalize와 CSS Reset 중 어떤 것을 사용할지는 해당 프로젝트에서 스타일 전략과 프로젝트의 규모를 고려하여 결정하는데요.

브라우저의 내장 스타일을 최대한 따르면서 필요한 부분만 스타일을 변경하거나 추가하고 싶을 때는 CSS Normalize가 좋은 선택이 될 것입니다. 하지만 브라우저의 내장 스타일에 전혀 의존하지 않고 모든 HTML 요소를 하나부터 열까지 직접 스타일하고자 한다면 CSS Reset이 나은 선택이 되겠죠?

어느 정도 규모가 있는 장기 프로젝트나 회사 전체를 위한 디자인 시스템을 만들 때는 CSS Reset을 선택하는 경향이 있는 것 같고요. 하지만 일정이 빡빡한 소규모 프로젝트 경우 모든 HTML 요소를 처음부터 스타일 할 여력이 되지 않기 때문에 CSS Normalize가 좋은 대안이 될 것입니다.

시제품(prototype)을 만들거나 개인 프로젝트에서도 아무래도 CSS Reset 보다는 CSS Normalize를 선택하는 편이 개발 생산성 측면에서 유리하겠죠?

마치면서

이상으로 CSS Normalize와 CSS Reset을 왜 사용하고, 각각 어떤 특징이 있으며, 어떤 것을 선택해야하는지에 대해서 알아보았습니다.

참고로 반드시 오픈 소스로 외부에 공개된 CSS Normalize와 CSS Reset을 사용하실 필요는 없습니다. 오히려 자신의 프로젝트의 상황에 최적화된 CSS Normalize 또는 CSS Reset를 직접 만들어 나가는 것도 좋은 전략이 될 수 있겠습니다.