🌱 기초 프론트엔드
CSS Reset과 Normalize의 차이
쉽게 이해하기
CSS Reset은 백지 상태로 만드는 것이고, Normalize는 브라우저마다 다른 부분만 맞춰주는 거예요. Reset은 모든 스타일을 0으로 초기화해서 처음부터 다시 그리는 것이고, Normalize는 차이나는 부분만 보정해주는 거죠.
핵심 정리
브라우저마다 다른 기본 스타일을 통일하는 두 가지 방법을 알아봅니다.
자세히 알아보기
브라우저마다 HTML 요소에 기본으로 적용되는 스타일이 조금씩 달라요. 크롬에서는 제목 여백이 16px인데 파이어폭스에서는 18px일 수도 있는 식이죠. 이런 차이를 없애기 위해 CSS Reset이나 Normalize를 사용해요.
CSS Reset은 모든 요소의 margin, padding, border를 0으로 만들어버려요. 완전히 백지 상태에서 시작하는 거죠. 대표적으로 Eric Meyer의 Reset CSS가 있어요. 장점은 모든 브라우저에서 똑같이 시작할 수 있다는 거고, 단점은 나중에 모든 스타일을 다시 정의해야 한다는 거예요.
Normalize.css는 좀 더 온건한 접근이에요. 브라우저의 유용한 기본 스타일은 유지하되, 브라우저 간 차이만 없애주는 거죠. 예를 들어 버튼이나 폼 요소의 일관성을 유지하면서도, 제목 태그의 기본 크기 같은 건 살려둬요.
최근에는 Normalize를 더 선호하는 추세예요. 모든 걸 다시 정의하는 것보다 브라우저 기본값을 활용하면서 차이만 보정하는 게 효율적이거든요. Tailwind CSS 같은 최신 프레임워크들도 Normalize 방식을 기반으로 하고 있어요.