by
Aug 20. 2020
그림으로 이해하는 CSS Reset
CSS Reset? Normalize? 1분이면 이해하기 충분!
프론트 엔드(Front-End) 개발을 전문으로 하는 Eljah Manor가 그린
"Visualizing CSS Resets" 아티클 번역.
시각 장애인을 위한 캡션
그림으로 이해하는 CSS 리셋
번역: 이듬(E.UID)
장면 1
CSS 리셋은 일관성 없는 다양한 브라우저의 기본 스타일을 초기화하는 목적으로 사용한답니다.
브라우저가 유리컵이고, 기본 스타일을 물로 상상해봐요.
장면 2
브라우저마다 서로 조금씩 다른 기본 스타일을 가져요.
(비교 이미지) 브라우저 A — 브라우저 B — 브라우저 C
(이미지 설명) 채워진 물 높이가 각각 다른 물 컵
장면 3
CSS Reset은 기본 스타일 대부분을 제거하고, 새롭게 스타일을 추가해요.
(비교 이미지) 브라우저 A — 브라우저 B — 브라우저 C
(이미지 설명) 남아있는 기본 스타일이 거의 없고, 새로 추가한 스타일이 채워진 물 컵
장면 4
CSS Normalize는 일관되지 않은 스타일만 제거하고, 가능한 기본 스타일을 유지해요.
(비교 이미지) 브라우저 A — 브라우저 B — 브라우저 C
(이미지 설명) 기본 스타일로 대부분 채워진 동일한 높이의 물 컵
