본문 바로가기
디자인 개발/CSS

CSS 리셋 - Normalize.css & Reset.css

Normalize 또는 Reset이라고 불리우는, 다양한 브라우저의 기본 설정을 일반적으로 사용되는 스타일로 '초기화'하는 역할을 하는 라이브러리에 대한 소개를 하고자 한다. Normalize를 기반으로 다양한 파생 버전이 등장하고 있다. 대표적인 것이 부트스트랩의 Reboot이 있다.

Normalize는 최소한의 리세팅만 제공하므로, 조금 더 편의성이 높은 라이브러리를 찾는다면 좋은 선택이 아닐 수 있다. 다만 미니멀한 코딩이 우선시된다면 Normalize.css를 세팅하고 이를 지속적으로 업그레이드받는 것이(브라우저가 지속적으로 변하듯 이에 대한 Normalize.css도 지속적으로 업데이트되고 있다) 좋은 방법일 수 있다.

 

좀 더 어드밴스드한 리세팅 옵션을 설정하고 싶다면, 유명 프레임워크에 사용되는 reset을 사용하는 것이 방법일 수 있는데, 대표적인 것이 앞서 소개한 부트스트랩의 Reboot 등이 있을 수 있다. 시스템 폰트를 기본 설정하거나 box-sizing을 border-box로 기본 설정하는 등 편의 기능을 제공하므로 부트스트랩의 Reboot도 옵션으로 참고하는 걸 권장한다.

Normalize.css

가장 대표적으로 사용되는 스타일 리셋 라이브러리로 다양한 파생형을 만들어 내고 있다. 기본적으로 모든 브라우저에서 표준화된 형태로 스타일이 랜더링되게 하는 것을 목표로 한다.

Normalize.css

Sanitize.css

csstools/sanitize.css

modern-normalize

sindresorhus/modern-normalize

modern-normalize | CSS-Tricks

Reset.css

노말라이즈가 활성화되기 이전에 사용되던 것으로(~2008년) 모던 브라우저에서의 사용은 권장되지 않는다.

CSS Tools: Reset CSS

Normalize의 간략한 역사

CSS-Tricks의 크리스는 노말라이즈의 간략한 역사에 대한 아티클을 남긴 바 있다.

Reboot, Resets, and Reasoning | CSS-Tricks