reset.css VS normalize.css

프로젝트를 진행하며 배우는 강의를 따라하다보면 reset.css를 적용해 브라우저가 기본적으로 가지고 있는 스타일들을 제거하는 모습을 볼 수 있다

css 커스터마이징을 하기 쉽게 스타일을 초기화해주고 시작한다 라고 간략하게 설명을 해주고 넘어가서 그냥 이런거구나 했는데

이번에 normalize가 있다는 것도 알게 되어서 이 둘을 비교해보며 자세히 알아보려고 한다

reset

위에서 말했듯 브라우저들은 기본적인 스타일을 가지고 있다

그런데 이 브라우저들 마다 각각 다른 스타일을 가지고 있기 때문에 같은 css를 적용해도 IE, Chrome, Firefox 등의 브라우저에서 사용자에게 비추어지는 모습이 모두 다를 수 있다는 것

이러한 문제를 해결하기 위해서 브라우저의 스타일을 모두 초기화해서 동일하게 만든 뒤 스타일을 추가해 나가 모든 브라우저에서 같은 화면을 볼 수 있게 해주는 것이다

가장 유명한 Eric Meyer의 reset.css

CSS Tools: Reset CSS

들어가서 보면 알 수 있듯이 모든 태그에 대해 자비없이 none과 0을 적용시키고 있는 것을 볼 수 있다

기존의 css

reset을 적용한 모습

장점

• 간단하고 빠르다

자주 사용되는 방식이기도 하고 모든 것을 초기화하기 때문에 따로 신경 써줄 필요가 없이 0부터 작업하면 되기 때문에 속도가 빠르다

단점

• 응용의 복잡성

css의 코드가 적용된 순서에 따라서 내가 차후에 커스터마이징으로 작성한 코드가 먹힐 수도 먹히지 않을 수도 다르게 적용될 수도 있다

• 너무 노후되었고, 다양하다

위에서 예를든 Eric Meyer의 것은 무려 2011년도의 업데이트가 가장 최신 버전이다

여기저기에서 자기에게 필요한 버전을 가져다 쓰는 것은 장점일 수 있지만 표준화가 되어있지 않다는 단점도 있다

normalize

reset과 의도는 같지만 방법이 다르다

reset은 위에서 본 것과 같이 제목을 표시해주는 h1의 스타일을 날려버려 div안의 내용과 차이가 없고 span과 p도 차이가 없다

개발자가 모두 스타일을 지정해주어야 한다

하지만 normalize는 해당 태그들의 스타일링은 살린 채 브라우저간의 차이점을 통일시켜준다

 

적용 전 (좌 크롬, 우 사파리)

 

적용 후 (좌 크롬, 우 사파리)

장점

• 지속적인 업데이트, 오픈 소스, 표준?화

소스가 공개되어 관리되고 있으며 지속적인 업데이트로 꾸준히 관리되고 있다

necolas/normalize.css

• 더 편리하다

모두 초기화가 된 것이 아니라 스타일을 유지하고 있기 때문에 사용하기 더욱 편리하다

단점

• 어색하다

reset방식을 사용하던 사람이 사용할 경우 스타일을 적용할 때 주의해야한다