[CSS] Reset.css 와 Normalize.css란?

등장 배경

브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값이라고 생각하면 된다.

브라우저 별로 모두 일관된 스타일을 제공해줘야 하는 입장에서 이 기본 스타일이 브라우저별로 다르다는 점은 참으로 불안한 상황이다.

그래서 나온 전략으로 reset.css 와 normalize.css라는 게 등장하였다.

이름 그대로 모든 브라우저의 형태에서 기본으로 제공하는 스타일을 전부 없애버린 초기화 기법이다.

아무래도 가장 유명한 기법이었는데, 마지막 업데이트 날짜가 2011년인 것을 보면 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율적이다 라는 말이 많이 나온다.

normalize 기법은 reset과 다른 전략으로 모든 브라우저의 스타일을 동일하게 유지하는 스타일 기법이다.

굳이 다 날리지 않고 정규화가 필요한 스타일만 건드리며, 그나마 reset.css에 비해 비교적 최근까지도 업데이트 이력이 있는 오픈소스 공동 프로젝트로 진행 중이다.

normalize 역시도 아무래도 디자인적인 요소가 가미되어 있기 때문에 사용할 때 어디까지 범위를 미치는지를 확인해주는 것이 좋을 것 같다.

우선 요즘은 reset.css 보다는 normalize.css를 많이 사용하는 추세이며, 또 다른 전략 기법인 reset.css 와 normalize.css를 섞어서 사용하는 기법 역시 사용하는 추세이다.

그렇지만 또 국내에서는 지금까지 reset.css 형식을 많이 사용해 왔기 때문에 normalize.css가 좀 어색할 수는 있다.

아무래도 둘 다 장단점이 있기 때문에 무조건 이것을 써야 한다라기보다는 융통성 있게 사용하는 게 좋다고 생각된다.

Normalize CSS or CSS Reset?!

CSS Architecture — Part 1

elad.medium.com