[Daily] Reset CSS와 Normalize CSS

밍구·2025년 7월 13일
0

Daily

목록 보기
9/9

Reset CSS와 Normalize CSS

용도 :

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

Reset CSS : 모든 브라우저의 기본 스타일을 완전히 제거하는 방식

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

장점 : 완전한 스타일 통일
단점 : 모든 요소를 초기화 하기 때문에, 스타일을 새로 작성해야한다.
사용 예시 : 디자인 시스템과 같이 모든 것을 직접 스타일링 하는 것이 중요한 상황

Normalize CSS : 브라우저 간 스타일 차이를 줄이는데 중점을 둔 방식

장점 : 모든 요소의 기본 스타일을 완전히 제거하지 않고, 일관 되지 않은 스타일만 수정한다.
단점 : 통일성이 비교적 떨어진다.
사용 예시 : 데드라인이 넉넉하지 않은 프로젝트

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

0개의 댓글