Reset CSS와 Normalize CSS

규갓 God Gyu·2025년 3월 4일

면접질문

목록 보기
82/142

모두 브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일

Reset CSS는 모든 브라우저의 기본 스타일을 완전히 제거하는 방식
ex - HTML 요소에 기본적으로 적용된 여백, 패딩, 글자 크기 등을 초기화하여, 모든 요소를 스타일이 전혀 없는 상태로 만듬

개발자는 완전 통제된 상태에서 스타일링 시작할 수 있음
스타일을 처음부터 새롭게 작성해야 하지만, 완전한 스타일 통일성을 보장

/* 모든 요소의 기본 스타일을 초기화 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Normalize CSS는 브라우저 간 스타일 차이를 줄이는 데 중점을 둔 방식
모든 요소의 기본 스타일 완전 제거하는 대신, 브라우저 간에 일관되지 않은 스타일만 수정해서 자연스러운 기본값 유지
ex - 제목 태그의 기본 크기나 폰트를 브라우저마다 일관되게 조장하면서 요소의 기본적 스타일은 그대로 둠

/* 브라우저 기본 스타일을 일관되게 유지 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
a {
  background-color: transparent;
}

데드라인이 넉넉하지 않은 프로젝트엔 처음부터 스타일링하기 어려우니 Normalize CSS
디자인 시스템과 같이 모든 것을 직접 스타일링하는 것이 중요한 상황에선 Reset CSS를 선택하는게 유리

profile
웹 개발자 되고 시포용

0개의 댓글