Normalize 또는 Reset이라고 불리우는, 다양한 브라우저의 기본 설정을 일반적으로 사용되는 스타일로 '초기화'하는 역할을 하는 라이브러리에 대한 소개를 하고자 한다. Normalize를 기반으로 다양한 파생 버전이 등장하고 있다. 대표적인 것이 부트스트랩의 Reboot이 있다.
Normalize는 최소한의 리세팅만 제공하므로, 조금 더 편의성이 높은 라이브러리를 찾는다면 좋은 선택이 아닐 수 있다. 다만 미니멀한 코딩이 우선시된다면 Normalize.css를 세팅하고 이를 지속적으로 업그레이드받는 것이(브라우저가 지속적으로 변하듯 이에 대한 Normalize.css도 지속적으로 업데이트되고 있다) 좋은 방법일 수 있다.
좀 더 어드밴스드한 리세팅 옵션을 설정하고 싶다면, 유명 프레임워크에 사용되는 reset을 사용하는 것이 방법일 수 있는데, 대표적인 것이 앞서 소개한 부트스트랩의 Reboot 등이 있을 수 있다. 시스템 폰트를 기본 설정하거나 box-sizing을 border-box로 기본 설정하는 등 편의 기능을 제공하므로 부트스트랩의 Reboot도 옵션으로 참고하는 걸 권장한다.
Normalize.css
가장 대표적으로 사용되는 스타일 리셋 라이브러리로 다양한 파생형을 만들어 내고 있다. 기본적으로 모든 브라우저에서 표준화된 형태로 스타일이 랜더링되게 하는 것을 목표로 한다.
Sanitize.css
modern-normalize
Reset.css
노말라이즈가 활성화되기 이전에 사용되던 것으로(~2008년) 모던 브라우저에서의 사용은 권장되지 않는다.
Normalize의 간략한 역사
CSS-Tricks의 크리스는 노말라이즈의 간략한 역사에 대한 아티클을 남긴 바 있다.
Reboot, Resets, and Reasoning | CSS-Tricks
모더나이저
Normalize가 표준화 또는 초기화의 기능성을 보여주는 라이브러리라고 한다면 Modernizr는 브라우저를 가장 모던한 형태로 최신화하는 역할을 하는 라이브러리이다. 이는 CSS 뿐 아니라 JS 호환을 위해서도 사용된다.
'UX 개발 > CSS' 카테고리의 다른 글
| Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법 (0) | 2019.10.14 |
|---|---|
| CSS 기본 시스템 폰트 설정 (2019) (0) | 2019.09.05 |
| CSS box-sizing과 초기 설정(border-box) (0) | 2019.09.05 |
| CSS clip 속성 (0) | 2019.09.04 |
| var() - CSS 변수(Variables), 커스텀 프로퍼티 (0) | 2019.09.04 |
