브라우저마다 다른 기본 스타일(제목 여백, 목록 들여쓰기 등)을 지우거나 맞춰서, 같은 출발점에서 스타일링하게 하는 기법.
- 전체 선택자(Universal Selector) 리셋:
* { margin: 0; padding: 0; box-sizing: border-box }. 가장 단순하다.box-sizing이 무엇을 바꾸는지는 CSS 박스 모델을 본다 - Eric Meyer의 Reset CSS: 많은 요소의 기본값을 명시적으로 0으로 돌리는 고전적인 리셋
- Normalize.css: 지우지 않고, 쓸모 있는 기본값은 살리면서 브라우저 간 차이만 맞춘다
- 현대식 최소 리셋: 필요한 몇 줄만 둔다
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }Tailwind는 Preflight라는 자체 리셋을 기본으로 넣는다. Tailwind를 붙이자마자 h1이 본문 글자와 같은 크기가 되고 목록 기호가 사라지는 이유가 이것이다. 리셋은 가장 약한 레이어(Tailwind v4에서는 base)에 두어야 다른 스타일을 방해하지 않는다. 레이어 밖에 둔 전역 태그 스타일은 레이어 안의 규칙을 모두 이기므로 주의한다.
참고: Eric Meyer — CSS Tools: Reset CSS · Normalize.css · Tailwind CSS — Preflight