HTML 엘리먼트 기본 스타일 제거하기
January 23, 2020
css 작업을 하기 위해 normalize.css 와 같은 도구를 사용하곤 한다. 그 이유는 브라우저마다 HTML tag에 각자의 기본적인 스타일을 적용하고, 개발자 입장에서 통일된 스타일을 제공하기 위해 초기화 하는 것이다.
이런 도구들은 여럿 있는데, 그 중에는 초기화 작업 뿐만 아니라 몇가지 실용적인 자체 스타일을 설정하기도 한다. 예를 들어, 스타일을 편하게 하기 위해 자주 쓰이는 트릭인 box-sizing: border-box; 속성을 글로벌하게 적용한다던지 말이다.
많이 쓰이는 normalize.css 의 경우에는 브라우저마다 서로 다른 스타일을 초기화 해 주는데, 신기하게도 이미 통일된 규격은 그대로 유지한다고 한다. 이 외에도 sanitize.css 나 modern-normalize 등 과 같이 normalize.css 에서 파생되어 실용적인 기능들을 추가한 라이브러리들도 존재한다. 이들에 대한 시각적인 비교는 다음 링크에서 확인할 수 있다. codepen
다음 링크에서 확인할 수 있듯이, normalize.css vs sanitize.css vs reset-css vs modern-normalize, npm trents 사용량은 normalize.css 가 압도적으로 많았지만, sanitize.css 가 매섭게 추격 하고 있고, 아직 나머지 둘은 대중적인진 않다. normalize.css 에서 모던한 브라우저를 모두 지원하면서 실용적인 기능을 넣고도 유사한 파일 크기를 유지한 modern-normalize 도 손이 가지만, 나는 sanitize.css 도 좋은 것 같다.
이들 대부분이 npm으로 제공되고, css파일로도 제공되니 사용하면서 원하지 않는 부분을 제거하며 튜닝하는 방법도 있겠다…만 그냥 학습용으로만 들여다 볼 것 같다.