1. normalize.css / reset.css을 사용하는 이유
내가 공부하다가 흥미로운 사실을 발견했다!
최근 공부하다가 box-sizing 문제에 대해 흥미로운 사실을 발견했다.
box-sizing: content-box;
기본적으로 content-box가 적용된다는 사실을 알게 되었는데, 이 설정에서는 padding과 border가 요소의 크기에 포함되지 않아 레이아웃을 예측하기 어려웠다.
하지만 box-sizing: border-box;로 설정하면 padding과 border가 포함된 총 너비와 높이를 정확히 계산할 수 있어, 레이아웃을 만들 때 훨씬 더 예측 가능해진다는 것을 알았다.
과연 이런 부분들이 하나만 있을까?
너무나도 궁금했다!
| 크롬 | 파이어폭스 | 엣지 |
 |
 |
 |
웹 개발 초기에는, 브라우저마다 HTML 요소에 대한 기본 스타일이 제각각이었기 때문에, 같은 HTML 파일이라도 다른 브라우저에서 다르게 보이는 문제가 발생했다.
예를 들어, Chrome에서 보이는 h1의 크기와 Firefox에서 보이는 크기가 미묘하게 다르거나,
margin과 padding 값이 브라우저마다 다르게 적용되는 상황을 겪어본 적이 있지 않은가?
이러한 문제를 해결하기 위해 Reset.css와 Normalize.css가 등장했다. 각 도구가 등장하게 된 배경을 살펴보자면, 브라우저 간의 차이를 해결하기 위한 목적으로 만들어졌지만, Reset.css는 모든 브라우저의 기본 스타일을 제거하고, Normalize.css는 브라우저 간 차이만 교정하는 방식으로 다른 접근 방식을 취했다.
이와 같은 문제를 해결하기 위해, Normalize.css와 Reset.css는 중요한 도구로 자리잡았다.
2. 그럼 normalize / reset은 뭐가 다를까?
이제 Normalize.css와 Reset.css의 차이를 살펴보자
두 도구가 같은 일을 한다고 착각하지만 두 도구는 전혀 다른 방식으로 문제를 해결한다.
종류 |
normalize.css |
reset.css |
| 특징 | 브라우저가 제공하는 기본 스타일을 전부 없애는 대신, 각 브라우저 간의 차이만을 수정한다. 브라우저 간 차이를 최소화하면서도, 기본적으로 유용한 스타일은 유지하는 것이다 이 방식은 기본적인 스타일을 활용하면서 작업을 더 빠르게 할 수 있게 해준다. 예를 들어, 폼 요소(input, button)의 기본 스타일은 유지하면서, 브라우저마다 다르게 렌더링되는 여백이나 글꼴 크기만 일관되게 맞춰주지 않는가? |
Reset.css는 모든 브라우저에서 HTML 요소의 기본 스타일을 완전히 없애버린다. 기본적으로 브라우저가 제공하는 margin, padding, font-size 같은 스타일을 전부 제거하고, 개발자가 스타일을 처음부터 다시 정의할 수 있게 한다. 원래 유용하게 작동하던 기본 스타일도 함께 사라지지 않겠는가? 예를 들어, h1 태그의 기본 크기가 너무 작아지거나, button 태그의 스타일이 아예 없어진다면 다시 정의해야 할 것이 많아지지 않을까? |
| 대표 소스 | necloas normalize : https://necolas.github.io/normalize.css/ |
|
| 크롬 | 파이어폭스 | 엣지 | |
| 아무것도 넣지 않았을 때 |
|
|
|
| normalize 적용시 |
 |
 |
 |
| Reset적용 시 |  |
 |
 |
3. 둘 중에 어떤 것을 선택해야 할까?
그래서 뭘 써야 해요? ㅠㅠ
자, 이제 어떤 도구를 사용할지 결정해야 한다.
각각의 장단점을 살펴보고 프로젝트 성격에 맞는 도구를 선택하는 것이 중요하다.
현업에서의 트렌드를 살펴보면, Normalize.css가 더욱 널리 사용되는 추세이다.
특히, 많은 현대적인 프레임워크나 라이브러리(예: Tailwind CSS의 Preflight)는 Normalize.css의 접근 방식을 채택하고 있으며, 웹 페이지의 기본 스타일을 유지하면서 브라우저 간 차이점을 줄이는 것이 중요해졌다.
CSS Reset 방식은 더 강력한 초기화가 필요할 때나 완전히 새로운 디자인을 구현할 때 사용되지만, 많은 경우 Normalize.css가 작업 속도와 일관성 측면에서 더 선호된다
프로젝트가 크고 복잡하지 않거나 기본 스타일을 많이 활용하는 경우라면 Normalize.css가 더 효율적
반대로 완전히 새로운 디자인을 하고, 스타일의 모든 부분을 직접 통제하고자 한다면 Reset.css가 적합