[HTML & CSS] CSS Reset이란? 왜 필요한가?

CSS Reset이란? 왜 필요한가?

웹사이트를 제작할 때 브라우저마다 기본적으로 제공하는 스타일이 다릅니다.
이러한 차이를 해결하기 위해 사용하는 것이 바로 CSS Reset입니다.
CSS Reset을 적용하면 모든 브라우저에서 동일한 초기 스타일을 유지할 수 있어 일관된 디자인을 만들 수 있습니다.
이 글에서는 CSS Reset의 필요성, 주요 방법, 그리고 가장 많이 사용되는 CSS Reset 코드를 소개합니다.

CSS Reset이 필요한 이유

1. 브라우저 간 스타일 차이 해결

각 브라우저는 기본적으로 HTML 요소에 고유한 스타일을 적용합니다. 예를 들어:

Chrome과 Firefox의 h1 크기가 다를 수 있음
button의 기본 스타일이 브라우저마다 다름
margin, padding 값이 다르게 설정되어 있음

CSS Reset을 적용하면 이러한 차이를 제거하여 일관된 스타일을 유지할 수 있습니다.

2. 예상치 못한 여백 제거

브라우저 기본 스타일에는 각 요소에 여백(margin, padding)이 포함되어 있습니다.
CSS Reset을 사용하면 불필요한 여백을 제거하여 디자이너가 원하는 정확한 스타일을 구현할 수 있습니다.

3. CSS 스타일링을 더 쉽게 관리

초기 스타일을 제거하면 스타일링이 깔끔해지고, 추가적인 오버라이딩 없이 직접 원하는 디자인을 적용할 수 있습니다.

대표적인 CSS Reset 방법

1. Normalize.css

Normalize.css는 CSS Reset보다 조금 더 발전된 방식으로, 브라우저 기본 스타일을 완전히 제거하는 대신 표준화하여 유지하는 역할을 합니다.

<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css>">

📌 Normalize.css는 브라우저 스타일을 “초기화”하는 것이 아니라, 일관된 스타일을 유지하도록 돕는다는 점에서 일반적인 CSS Reset과 차이가 있습니다.

2. Eric Meyer’s Reset CSS

웹 개발자 Eric Meyer가 만든 유명한 CSS Reset 방식입니다.

/* Eric Meyer’s Reset CSS v2.0 */
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 요소의 기본 여백과 스타일이 제거됩니다.

3. 간단한 CSS Reset (Minimal Reset)

Eric Meyer의 Reset이 너무 강력하다면, 필요한 요소만 초기화하는 간단한 방법도 있습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

이 방법은 여백(margin, padding) 초기화와 함께 box-sizing: border-box;를 설정하여 요소 크기를 예측하기 쉽게 만듭니다.

어떤 CSS Reset을 선택해야 할까?

방법	특징	사용 추천
Normalize.css	브라우저 스타일 표준화, 완전 초기화 X	기존 스타일 유지 필요 시
Eric Meyer’s Reset	모든 기본 스타일 제거	강력한 초기화 필요 시
Minimal Reset	기본적인 여백 초기화만 수행	가벼운 초기화 필요 시

✔ Normalize.css → 기본 스타일을 유지하면서 일관성을 높이고 싶다면 추천
✔ Eric Meyer’s Reset → 모든 스타일을 초기화하고 싶은 경우 추천
✔ Minimal Reset → 최소한의 스타일 초기화가 필요할 때 추천