[CSS] Reset VS Normalize (개념, 차이, 장단점)

웹 프론트엔드 개발을 하다보면, 처음에 개발 환경 세팅하고, 프로젝트 만들고, 기본 프로젝트의 css 파일을 다 지운 후에 반복적으로 하는 작업이 바로 css 초기화.

 

저는 대부분 Reset.css를 써왔고 대부분 그렇게 사용하는 것으로 알고 있습니다.

meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

그러다가 github 프로젝트 구경 도중 Normalize라는 키워드를 찾아보게 되어 간단히 정리해보고자 합니다.

 

Reset

왜 reset이 필요한가?

웹 개발을 하다보면 가장 짜증나는 상황 중에 하나가, 크롬에서 분명 잘 되었는데 익스플로러(지금은 중단되고있지만! 오예!!)에서는 화면이 다 깨지고, 파이어폭스에서는 미묘하게 디자인 느낌이 달라지는 등의 상황이죠.

특히나 i.e.. 심지어 버전별로 보이는게 달라요. (사실 스타일은 애교고 지원 안하는 기능들 있어서 아예 작동이 안해버리는 경우가 더 많아서 힘들..)

 

디자이너나 기획자가 어떤 웹 서비스를 만들고자 할 때 원하는건, 브라우저에 따라 다르게 보이는 감성이 아닌, 모든 플랫폼에서 일관적으로 동일하게 보이는걸 원하는 경우가 많죠.

그래서 Reset은, 브라우저별로 기본적인 스타일이 들어가있는 부분들을 모두 "없던 것으로" 해버리는 기능입니다.

아예 백지에서 새로 디자인을 적용하겠다! 하는 개념입니다.

 

장점

이미 많이 써왔기 때문에 익숙합니다.

아예 백지기 때문에 내가 모든걸 컨트롤 할 수 있고, 기존에 남아있는 디자인 때문에 사이드이펙트가 발생할 일이 거의 없습니다.

 

단점

css 적용 순서를 잘 적용하지 않으면 스타일이 꼬일 수 있습니다.

특정 시점에서 브라우저 별 css를 다 초기화시킨 개념이라 브라우저의 업데이트, 특히나 i.e(이젠 없으니 엣지 정도일까요)에서 다른 스타일을 적용해버리면 그 부분은 초기화가 되지 않을 수 있습니다.

 

Normalize

기존의 브라우저별 스타일을 모두 리셋시키는 방법이 아닌, 이를 유지하면서 써먹을 건 써먹자는 방법입니다.

 

장점

우선순위에 의한 충돌이 일어날 가능성이 적습니다.

단순 css파일의 공유가 아닌 github가 운영되고 있어서 브라우저 업데이트에 따른 지속적인 버전 관리가 될 것 같습니다.

 

단점

많이 써보지 않아서 러닝커브가 있을 수 있겠네요

그래도 이미 몇년 된 방식이고 외국에서는 이미 많이 쓰고있다고 합니다.

제가 접하는게 늦었다는 생각이 들 정도로요. 이건 저한테만 국한되는 단점일것 같네요