Reset & Normalize CSS

웹 디자인의 기초를 다지는 첫걸음

웹사이트를 제작할 때 가장 먼저 부딪히는 문제 중 하나는 브라우저마다 기본 스타일이 제각각이라는 점입니다. 같은 코드를 작성해도 크롬, 파이어폭스, 사파리, 엣지 등에서 글자의 크기, 줄 간격, 여백 등이 다르게 보이는 경우가 많습니다. 이는 브라우저마다 기본적으로 설정된 "유저 에이전트 스타일시트(User Agent Stylesheet)" 때문입니다.

예를 들어 <h1> 태그를 작성했다고 가정해봅시다. 크롬에서는 기본적으로 상하 여백이 0.67em, 폰트 크기가 2em 정도 적용되지만, 다른 브라우저에서는 조금씩 차이가 납니다. 이런 작은 차이가 쌓이다 보면 전체 레이아웃이 무너져 보이거나 디자인이 의도와 다르게 표현될 수 있습니다.

이 문제를 해결하기 위한 가장 널리 쓰이는 방법이 바로 Reset CSS와 Normalize CSS입니다.

Reset CSS란?

Reset CSS는 말 그대로 브라우저가 기본으로 제공하는 모든 스타일을 완전히 초기화(Reset) 해주는 방식입니다.
대표적으로 에릭 마이어(Eric Meyer)의 Reset CSS가 유명합니다. 모든 태그의 margin, padding을 0으로 초기화하고, font-size, border 등도 일관되게 맞추는 것이 특징입니다.

예시: 

/* Eric Meyer's Reset CSS *<span>
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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

이렇게 하면 브라우저가 기본으로 주는 스타일이 전부 제거되어, 디자이너가 원하는 스타일을 완전히 새롭게 정의할 수 있습니다.

다만 단점도 있습니다. 모든 스타일을 없애다 보니 버튼, 리스트 등 의미 있는 태그들의 기본적인 구분마저 사라져 버립니다. 즉, "완전히 백지 상태"에서 다시 디자인을 시작해야 하기 때문에 초반에는 다소 불편할 수 있습니다.

Normalize CSS란?

Normalize CSS는 Reset과 달리 브라우저마다 다른 부분만 보정(Normalize) 해주는 방식입니다.
즉, 의미 있는 기본 스타일은 그대로 두되, 브라우저마다 차이가 나는 부분만 표준화하여 통일성을 주는 것입니다.

예시:

/* normalize.css의 일부 *<span>
html {
  line-height: 1.15; /* 크롬의 기본 라인 높이를 다른 브라우저와 맞춤 *<span>
  -webkit-text-size-adjust: 100%; /* 모바일 사파리에서 글자 확대 방지 *<span>
}
body {
  margin: 0; /* 브라우저별 body 기본 마진 제거 *<span>
}

이 방식은 "태그 본연의 의미"를 살리면서도 브라우저 차이로 인한 문제를 줄여줍니다. 요즘은 Reset보다 Normalize가 더 많이 사용되는 추세입니다.

Reset vs Normalize – 무엇을 선택해야 할까?

• Reset CSS: 디자인을 완전히 새로 정의하고 싶을 때 적합. (예: 강한 커스터마이징이 필요한 프로젝트, UI 프레임워크 제작)

• Normalize CSS: 의미 있는 기본 스타일을 유지하면서 크로스 브라우징 이슈만 줄이고 싶을 때 적합. (예: 대부분의 일반 웹사이트)

실무에서는 프로젝트 성격에 따라 선택하기도 하고, 두 방법을 혼합해서 사용하는 경우도 많습니다. 예를 들어, Normalize를 기반으로 깔고, 여기에 맞춤형 Reset을 일부 추가하는 식입니다.

Reset/Normalize 적용 방법

적용하는 방법은 간단합니다. 보통 CDN을 통해 불러오거나, 직접 CSS 파일을 다운로드 받아 프로젝트에 포함시킵니다.

웹사이트는 디자인만큼이나 일관성이 중요합니다. 사용자가 어떤 브라우저를 사용하든 똑같은 경험을 제공해야 하기 때문입니다. Reset CSS와 Normalize CSS는 이를 위한 가장 기본적인 도구입니다.
처음 프로젝트를 시작할 때, "Reset을 적용할까? Normalize를 적용할까?"를 고민해보고 성격에 맞는 방식을 선택하면 훨씬 안정적이고 관리하기 좋은 웹사이트를 만들 수 있습니다.