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

프론트엔드 개발을 하다 보면, 브라우저마다 기본 스타일이 달라서 예상치 못한 디자인 차이가 발생할 때가 있습니다.
이런 문제를 줄이기 위해 사용하는 것이 바로 reset.css 입니다.

---

🔎 reset.css란?

reset.css는 각 브라우저가 기본적으로 가지고 있는 디폴트 스타일(기본 margin, padding, font-size 등)을 제거하여, 스타일의 출발점을 동일하게 만드는 CSS 파일입니다.

즉, 모든 요소의 스타일을 “0”에서 시작하게 만들어서, 개발자가 의도한 스타일만 적용되도록 도와줍니다.

---

아주 간단한 reset.css 예시는 다음과 같습니다.

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

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

button,
input {
  border: none;
  outline: none;
  background: none;
}

• * 선택자를 통해 margin/padding 제거
• box-sizing: border-box로 레이아웃 계산을 직관적으로
• 리스트, 링크, 폼 요소 등의 기본 스타일 제거

---

📂 reset.css vs normalize.css

많이 혼동하는 개념으로 normalize.css가 있습니다.

구분	reset.css	normalize.css
목적	기본 스타일 완전히 제거	브라우저 간 스타일 일관성 유지
특징	완전히 “0”에서 시작	공통 분모를 맞추되 기본 스타일 유지
사용 사례	디자인 시스템을 완전히 통제하고 싶을 때	브라우저 기본 스타일을 적절히 살리고 싶을 때

---

⚡ reset.css 장점

reset.css 사용의 장점으로는 부라우저 간 스타일 차이를 줄일 수 있습니다. 완전히 0에서 시작하기 때문이죠, 또한 예상치 못한 margin/padding 문제를 피할 수 있습니다. 모든 디자인을 개발자가 직접 제어하는 것 이죠

---

✅ 정리

• reset.css는 브라우저의 기본 스타일을 초기화하는 도구
• 개발자가 스타일을 “처음부터” 설계하기 쉽게 해줌
• 필요에 따라 normalize.css와 비교 후 선택 가능

👉 프로젝트 성격에 맞게 reset.css 또는 normalize.css를 적용하면, 더 일관된 UI 개발이 가능하다!