[CSS] reset.css란 무엇이고 왜 사용할까?

reset.css란?

브라우저는 각 HTML 요소에 기본 스타일을 가지고 있습니다.

예를 들어 body에는 기본 margin이 있고, ul에는 list-style과 padding이 있으며, 버튼과 input에도 브라우저 기본 스타일이 적용됩니다.

reset.css는 이런 기본 스타일을 최대한 제거해 모든 요소를 같은 출발점에서 스타일링할 수 있게 만드는 CSS입니다.

---

간단한 reset.css 예시

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

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  border: none;
  background: none;
  font: inherit;
}

이렇게 작성하면 브라우저 기본 margin, padding, list 스타일 등을 제거하고 프로젝트 스타일을 직접 설계할 수 있습니다.

---

reset.css를 사용하는 이유

브라우저마다 기본 스타일이 조금씩 다를 수 있습니다.

이 차이를 그대로 두면 같은 CSS를 작성해도 화면이 미묘하게 다르게 보일 수 있습니다.

reset.css를 사용하면 기본 스타일을 지우고, 디자인 시스템이나 컴포넌트 스타일을 더 예측 가능하게 만들 수 있습니다.

---

reset.css의 단점

reset.css는 기본 스타일을 강하게 제거합니다.

그래서 제목, 목록, 버튼 같은 요소의 기본 의미 있는 스타일도 함께 사라집니다.

예를 들어 h1의 기본 크기나 button의 기본 border도 없어질 수 있기 때문에 필요한 스타일을 다시 직접 정의해야 합니다.

---

reset.css와 normalize.css 차이

구분	reset.css	normalize.css
목적	기본 스타일을 최대한 제거	브라우저 차이를 자연스럽게 보정
접근 방식	0에서 다시 시작	기본 스타일을 어느 정도 유지
어울리는 경우	디자인을 완전히 통제하고 싶을 때	브라우저 기본 UX를 유지하고 싶을 때

디자인 시스템이 명확한 프로젝트라면 reset.css가 잘 맞을 수 있습니다.

반대로 기본 스타일을 어느 정도 살리고 싶다면 normalize.css가 더 편할 수 있습니다.

---

마무리

reset.css는 브라우저 기본 스타일을 제거해 일관된 스타일 출발점을 만드는 도구입니다.

장점은 예측 가능한 스타일링이고, 단점은 필요한 기본 스타일도 직접 다시 만들어야 한다는 점입니다.

프로젝트의 디자인 통제 범위에 따라 reset.css와 normalize.css 중 적절한 방식을 선택하면 됩니다.