프론트엔드 개발을 하다 보면 브라우저별 기본 스타일 차이 때문에 UI가 예상과 다르게 보이는 경우가 많습니다.
이를 해결하기 위해 흔히 reset.css를 적용하거나, 최근에는 normalize.css를 사용하는 경우도 많습니다.
이번 글에서는 normalize.css가 무엇인지, reset.css와의 차이점, 그리고 어떤 상황에서 사용하는 것이 적절한지 정리해 보겠습니다.
normalize.css란?
normalize.css는 브라우저 간의 스타일 차이를 최소화하기 위해 만들어진 CSS 라이브러리입니다.
단순히 모든 스타일을 초기화하는 것이 아니라, 브라우저 기본 스타일을 적절히 유지하면서 공통 분모를 맞추는 역할을 합니다.
예를 들어:
- 제목(
<h1> ~ <h6>)의 크기는 유지하되, 브라우저별 margin 차이를 보정 <button>,<input>같은 폼 요소들의 기본 스타일 일관성 유지- HTML5 요소(
<article>,<section>)에 대한 기본 디스플레이 값 정의
즉, 완전히 “0”에서 시작하기보다는 실용적인 보정에 가깝습니다.
reset.css와의 차이
| 구분 | reset.css | normalize.css |
|---|---|---|
| 목적 | 브라우저 기본 스타일 완전히 제거 | 브라우저 간 스타일 일관성 유지 |
| 특징 | 모든 margin, padding 등 0으로 초기화 | 기본 스타일 유지 + 불필요한 차이만 보정 |
| 사용 사례 | 디자인 시스템을 완전히 통제할 때 | 브라우저 기본값을 적절히 살리고 싶을 때 |
언제 normalize.css를 써야 할까?
- 완전히 새롭게 스타일링하지 않고, 브라우저 기본 스타일을 어느 정도 활용하고 싶을 때
- 프로젝트 규모가 크지 않고, 빠르게 일관성 있는 UI를 맞추고 싶을 때
- 버튼, 폼 요소 등 접근성과 기본 UX를 존중해야 하는 프로젝트일 때
반대로, 디자인 시스템을 완전히 커스터마이징해야 하는 대형 프로젝트라면 reset.css를 사용하는 것이 더 적합할 수 있습니다.
설치 및 사용 방법
normalize.css는 라이브러리로 제공되기 때문에 간단히 설치하여 사용할 수 있습니다.
1. npm 설치
1
npm install normalize.css