안녕하세요, bemyfriends의 Frontend Developer Cindy입니다 🐤
오늘 팀원분이 normalize.css와 sanitize.css 중 어떤 것을 선호하시냐고 물어보셨습니다.
그런데 저는 둘의 차이를 잘 모르기도 하고 딱히 어떤 것을 선호하는지 기준을 갖고 있지 않아서 궁금한 마음에 등장 배경 및 차이점을 조사하게 되었습니다.
reset.css의 등장
다들 한 번쯤은 <a>태그를 작성할 때 파란줄과 밑줄을 없애기 위해 'a 태그 기본 스타일 없애는 법'을 검색해본적이 있을 것입니다. 혹은 <button> 태그를 작성했을 때 회색으로 칠해진 기본 스타일을 본 적이 있을 것입니다. 이 '기본 스타일'은 어디서 나온 것일까요? 어떤 기준으로 작성된 것일까요?
잠시 브라우저 렌더링 과정을 떠올려봅시다. 일반적으로 브라우저가 HTML을 파싱하기 시작하면 DOM 트리를 구축합니다. DOM 트리만으로는 웹 페이지의 모양을 알 수 없으므로 CSS를 파싱하고 각 DOM 노드에 해당되는 계산된 스타일을 확정합니다. 계산된 스타일은 CSS 선택자(selector)로 구분되는 요소에 적용될 스타일에 관한 정보입니다. 그런데 CSS를 전혀 적용하지 않더라도 DOM 노드에는 계산된 스타일이 적용되어 있는 것을 확인할 수 있습니다. <h1>태그는 <h2> 태그보다 크게표시되는 등의 스타일 말이죠. 바로 브라우저에 기본 스타일 시트가 존재하기 때문입니다. 대표적으로 자주 사용되는 Chrome의 경우 Chromium 소스 코드의 html.css 파일을 보면 기본 스타일 시트가 어떻게 작성되어 있는지 확인할 수 있습니다. 하지만 이것은 Chrome의 스타일 시트이고, Safari, Edge 등 브라우저마다 기본으로 적용되어 있는 스타일 시트가 다릅니다.
만약 브라우저마다 다르게 적용되어 있는 기본 스타일을 그대로 가져간다면 어떤 일이 일어날까요? 디자인 의도대로 구현하기 위하여 크롬에는 이것, 사파리엔 저것 등 코드를 추가하며 브라우저마다 일일이 확인해야겠죠. 으 상상만 해도 번거롭지 않나요? 바로 이러한 번거로움을 줄이기 위해 크로스브라우징 대응을 하며 일관된 디자인을 유지하기 위해 모든 브라우저의 기본 스타일을 초기화해주는 reset.css가 등장했습니다.
normalize, sanitize도 들어봤는데...🤔
이처럼 기본 브라우저 스타일을 무시해주는 css가 여럿 존재합니다. reset.css는 모든 브라우저 스타일을 '초기화'합니다. 한편, normalize.css는 브라우저 스타일을 여러 브라우저에서 '똑같이' 보이도록 합니다. 즉, 모든 브라우저에서 일관되게 보여야 하는 크로스 브라우징이 목적일 때 사용하기 적합합니다. 이에 더해 sanitize.css나 modern-normalize 등 normalize.css에서 파생된 css도 등장했습니다.
기본 스타일을 통일해주는 역할을 하는 reset, normalize로 충분할텐데 왜 이에 파생된 css가 등장했을까요? 초기화 작업 뿐만 아니라 개발 생산성을 높여주는 몇가지 실용적인 스타일을 설정하기 위함입니다. 예를 들어 box-sizing: border-box; 등과 같은 속성은 global.css 에 적용하곤 하는데 이러한 스타일이 기본으로 적용되어 있다면 그 스타일 시트 하나만으로 편리하게 스타일을 적용할 수 있겠죠.
다음 그래프를 보면 sanitize.css가 1년 동안 압도적인 인기를 끄는 것을 확인할 수 있습니다.
출처 : https://npmtrends.com/modern-normalize-vs-normalize.css-vs-reset.css-vs-sanitize.css
normalize, sanitize, reset.css 등의 실제 적용된 스타일의 차이점은 codepen에서 확인할 수 있습니다.
다음은 sanitize.css GitHub README에 적혀 있는 normalize.css, sanitize.css, reset.css의 차이점입니다.
normalize.css and sanitize.css correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize.css styles adhere to common developer expectations and preferences. reset.css unstyles all elements. Both sanitize.css and normalize.css are maintained in sync.
sanitize.css의 몇가지 유용한 feature 들을 소개하겠습니다. (더욱 자세한 feature 들을 보려면 공식 GitHub 를 참고해주세요.)
Box sizing defaults to border-box
*, ::before, ::after {
box-sizing: border-box;
}Backgrounds do not repeat by default
*, ::before, ::after {
background-repeat: no-repeat;
}Pseudo-elements inherit text decoration and vertical alignment
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}프로젝트 상황에 맞게 선택하자!
크로스 브라우징으로 보이는게 목적이 아니라면 reset.css를, 크로스 브라우징이 목적이면 normalize.css를, 최근에 가장 많이 사용되고 있고 실용적인 기능을 손쉽게 추가하고싶다면 sanitize.css를 선택하는 등 css 마다 제공하는 기능이 조금씩 다르니 codepen에서 확인해보고 각자의 프로젝트 성향에 맞게 선택하는 것이 가장 좋을 것 같습니다.
어쩌다 보니 css를 주제로 첫 글을 작성하게 되었네요!
다음에 더 유익한 글로 찾아오겠습니다 🙏🏻 읽어주셔서 감사합니다 🙇🏻♀️
참고한 글
