Reset CSS

브라우저가 기본으로 제공하는 HTML 요소 스타일을 최대한 제거해 모든 요소를 같은 출발점에서 스타일링하도록 만드는 CSS 초기화 방식입니다.

핵심 특징

• 강한 초기화: margin, padding, border, font 같은 기본 스타일을 폭넓게 제거
• 높은 통제력: 디자인 시스템처럼 모든 스타일을 직접 정의할 때 유리
• 추가 작업 필요: 기본 스타일을 제거하므로 제목, 목록, 폼 요소 스타일을 다시 정의해야 함

예시

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

언제 쓰나

• 브라우저 기본 스타일에 의존하지 않는 디자인 시스템
• 모든 컴포넌트 스타일을 명시적으로 정의하는 프로젝트
• UI 일관성을 강하게 통제해야 하는 서비스

주의사항

• 접근성이나 사용성에 필요한 기본 스타일도 제거될 수 있음
• 폼 요소, 리스트, 제목 스타일을 다시 설계해야 함
• 팀 전체가 초기화 범위를 이해하고 있어야 유지보수가 쉬움

핵심 정리

Reset CSS는 브라우저 기본 스타일을 지우고 완전히 새로 스타일링하기 위한 방식입니다.

→ Reset CSS와 Normalize CSS가 무엇인가요 → Reset CSS vs Normalize CSS