Reset CSS와 Normalize CSS가 무엇인가요?

웹 개발에서는 브라우저가 제공하는 기본 스타일이 서로 다를 수 있기 때문에, 이를 통일하여 일관된 디자인을 구현하는 것이 중요합니다. Reset CSS와 Normalize CSS는 모두 브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일입니다. 두 방법은 목적이 같지만 방식에 차이가 있습니다.

먼저, Reset CSS는 모든 브라우저의 기본 스타일을 완전히 제거하는 방식입니다. 예를 들어, HTML 요소에 기본적으로 적용된 여백, 패딩, 글자 크기 등을 초기화하여, 모든 요소를 스타일이 전혀 없는 상태로 만듭니다. 이렇게 하면, 개발자는 특정 브라우저의 기본 스타일에 영향을 받지 않고 완전히 통제된 상태에서 스타일링을 시작할 수 있습니다. Reset CSS는 모든 요소를 초기화하기 때문에, 스타일을 처음부터 새롭게 작성해야 하는 수고가 있지만, 완전한 스타일 통일성을 보장합니다.

/* 모든 요소의 기본 스타일을 초기화 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
반면, Normalize CSS는 브라우저 간 스타일 차이를 줄이는 데 중점을 둔 방식입니다. 모든 요소의 기본 스타일을 완전히 제거하는 대신, 브라우저 간에 일관되지 않은 스타일만 수정하여 자연스러운 기본값을 유지합니다. 예를 들어, Normalize CSS는 제목 태그(h1, h2 등)의 기본 크기나 폰트를 브라우저마다 일관되게 조정하면서도, 요소의 기본적인 스타일은 그대로 둡니다. 이를 통해 자연스러운 초기 스타일을 유지하면서, 브라우저 간의 주요한 차이만 해소하는 것입니다.

/* 브라우저 기본 스타일을 일관되게 유지 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
a {
  background-color: transparent;
}
둘 중 어떤 방식을 선택하는 것이 좋나요? 🤔
이는 프로젝트 상황이나 개인의 취향에 따라 다를 수 있습니다. 앞서 설명드렸던 것과 같이 Reset CSS는 스타일 통일성을 확실하게 보장받을 수 있다는 장점이 있지만, 처음부터 다시 스타일링해야 한다는 번거로움이 있습니다. 반면, Normalize CSS는 기본 스타일을 유지하는 장점이 있지만, 통일성이 비교적 떨어진다는 단점이 있습니다.

이러한 트레이드오프를 고려하여 결정해야 합니다. 예를 들어 데드라인이 넉넉하지 않은 프로젝트에서는 처음부터 일일이 스타일링할 여력이 없으니 Normalize CSS를 선택하는 것이 유리할 수 있습니다. 한편, 디자인 시스템과 같이 모든 것을 직접 스타일링하는 것이 중요한 상황에서는 Reset CSS를 선택하는 것이 유리할 수 있습니다.