[CS] normalize vs reset

j.log·2021년 6월 11일

CS

목록 보기

8/10

크로스브라우징을 위해서, 브라우저별로 제공하는 element 의 style 을 통일시키기 위한 목적으로 사용하는 두 css에 대해 알아보자.

reset.css는 기본적으로 제공되는 브라우저 스타일 전부를 제거 하기 위해 사용된다.

reset.css가 적용되면 <H1>~<H6>, <p>, <strong>, <em> 등 과 같은 표준 요소는 완전히 똑같이 보이며 브라우저가 제공하는 기본적인 styling 이 제거된다.

normalize.css는 브라우저 간 일관된 스타일링을 목표로 한다. 즉, 모든 것을 "해제"하기보다는 유용한 기본값을 보존하는 것이다.

<H1>~<H6>과 같은 요소는 브라우저간에 일관된 방식으로 굵게 표시됩니다. 추가적인 디자인에 필요한 style 만 CSS 로 작성해주면 된다.
<sup> 또는 <sub> 와 같은 요소는 normalize.css가 적용된 후 바로 기대하는 스타일을 보여준다. 반면 reset.css를 포함하면 시각적으로 일반 텍스트와 구별 할 수 없다.
normalize.css 는 reset.css 보다 넓은 범위를 가지고 있으며 HTML5 요소의 표시 설정, 양식 요소의 글꼴 상속 부족, pre-font 크기 렌더링 수정, IE9 의 SVG 오버플로 및 iOS 의 버튼 스타일링 버그 등에 대한 이슈를 해결해준다.

jlog