모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다.
예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다.
브라우저 간 스타일 불일치를 피하기 위해 내장된 브라우저 스타일링을 제거함으로써 브라우저마다의 스타일링 차이점을 없앨 수 있습니다.
이렇게 내장된 브라우저 스타일링을 초기화하기 위해 사용하는 방법이 CSS Reset과 CSS Normalize입니다.
CSS Reset
CSS Reset 스타일시트는 모든 HTML 요소에 대한 내장 스타일링을 제거합니다.
CSS Reset은 보편적으로 Eric Meyer가 제공한 스타일링을 사용합니다.
CSS Normalize
Normalize.css 스타일 시트는 HTML 요소에 대한 브라우저 불일치를 제거합니다. CSS Reset은 모든 HTML 요소에 설정된 내장된 브라우저 스타일링을 제거하는 대신 normalize.css는 유용한 기본값을 보존합니다. Normalize.css는 모든 브라우저에서 일관된 기본 제공 브라우저 스타일을 만들기 위해 만들어졌습니다.
요약하면, Reset 스타일시트는 모든 HTML 요소의 기본값을 초기화해버리지만, Normalize 스타일시트는 브라우저마다 다르게 나타나는 HTML 요소의 기본값을 동일하게 보여주게 하기 위해 스타일 재설정을 해준다는 점에서 차이점이 있습니다.
'개발 > CSS3' 카테고리의 다른 글
| [크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우 (0) | 2020.02.16 |
|---|---|
| display: inline-block 속성 숨겨진 여백 제거 (0) | 2020.02.13 |
| [CSS3] css3 가운데(중앙) 정렬 (0) | 2016.11.09 |
| [CSS3] emmet을 통해 효율적으로 CSS를 작성해보자 (0) | 2016.10.17 |
| [CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법 (1) | 2016.10.14 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
