reset.css는 왜 써야 할까? – 브라우저 기본 스타일 초기화의 중요성

 

 

웹사이트를 만들어서 열어보면, 내가 설정하지 않았는데도 폰트 크기가 다르거나 마진이 들어간 경우를 본 적 있으시죠?

이건 브라우저마다 **기본으로 적용하는 스타일(유저 에이전트 스타일 시트)**이 다르기 때문이에요.
이 차이를 없애기 위해 사용하는 게 바로 reset.css입니다.

---

✅ reset.css란?

reset.css는 브라우저 기본 스타일을 없애고,
모든 요소를 똑같은 기준에서 시작하게 만들어주는 CSS 파일이에요.

 

예를 들어, 대부분의 브라우저는 <h1> 태그에 기본적으로 큰 폰트와 마진을 적용합니다.
이걸 그대로 두면 브라우저마다 디자인이 달라 보이게 되죠.

---

✅ 기본 reset 예시

/* 가장 단순한 reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

이렇게 작성하면 모든 요소의 마진과 패딩을 제거하고, box-sizing도 통일시켜서 계산이 편해져요.

---

✅ popular한 reset 방식

• Eric Meyer’s Reset
• normalize.css

둘 다 유명한 방식인데, normalize.css는 기본 스타일을 아예 없애지 않고, 유사하게 맞춰주는 방식이라 더 부드럽게 적용돼요.

---

✅ reset.css는 어디에 어떻게 넣나요?

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

 

항상 모든 스타일보다 먼저 적용되도록 맨 위에 넣는 게 좋아요!