CSS reset 과 CSS normalize 쉽게 이해하기

  • HTML, CSS

브라우저마다 제공하는 user agent style이라는 게 있다. 브라우저의 스타일링 기본값이라 생각하면 된다.

기본적으로 스타일이 적용된다는 게 사용자에게는 유용할 수도 있지만 개발자 입장에서는 매번 번거롭게 새로 선언해줘야 하기 때문에 오히려 피곤하다. 그리고 크롬, 익스플로러, 파이어폭스 등 브라우저들이 모두 일관된 스타일을 제공하지 않는 경우도 있어 예측하기에도 쉽지 않다.

이런 어려움을 극복하기 위한 전략으로 크게 CSS reset 과 CSS normalize가 있다.

CSS reset

CSS Reset은 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화하는 전략이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 그나마 가장 유명한 건 Eric Meyer라는 개발자가 만들어놓은 CSS reset이다. 그런데 가장 최근 업데이트가 2011년에 있었던 만큼 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율을 초래할 수 있다는 비판이 있다.

그래서 최근에는 필요한 부분만 초기화를 하여 사용하기도 하거나 CSS Normalize라는 기법을 사용하는 전략이 생겨났다.

CSS Normalize

CSS Normalizes는 브라우저 간 유저 에이전트 스타일의 오차를 줄이고, 버그만 줄이는 방향으로 스타일을 재지정하는 거다. CSS Reset는 기본값을 다 싸그리 엎는 데 반해 CSS Normalize는 기본값들을 최대한 보존하고 수정을 최소화한다.

normalize.css 는 오픈 소스이기 때문에 이 코드를 파일로 저장해 HTML에 연결해 사용하면 된다.

추천 글

댓글 남기기