tailwind의 preflihgt와 reset.css, nomalize.css

근래 tailwind에 관련한 질문 답변을 처리하던 중, preflight라는 것에 대해서 알게 되었다.
우선 이 preflight라는 것을 이해하기전에, User-agent stylesheet라는 걸 짚고 넘어가야한다.

세상의 모든 웹 브라우저는 기본적으로 각자 내장된 CSS 스타일을 가지고 있다.
그리고 이렇게 브라우저 가지는 기본 CSS 스타일을, User Agent Stylesheet라고 부른다.

User-agent stylesheets
User-agents, or browsers, have basic stylesheets that give default styles to any document. These stylesheets are named user-agent stylesheets.
출저 : https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

기본 CSS 스타일이라는 말처럼, 이 스타일은 HTML 요소에 기본적으로 자동 적용된다.
문제는 이 기본 CSS 스타일(User-agent stylesheets)이 브라우저별로 서로 다를 수 있다는 점이다.
그래서 같은 HTML 문서라도, 브라우저에 따라 조금씩 다르게 보이는 경우가 발생할 수 있다.

예를들어 브라우저별로 body에 기본 적용되어 있는 margin값이 달라, 같은 문서에 대한 여백처리가 다르게 랜더링 될 수 있다.
그래서 개발자는 CSS 작업을 하기에 앞서, 아래처럼 기본 스타일 들을 제거해 주는 작업을 선행해야만 했다.

body {
  margin: 0;
}

위의 예시 뿐만 아니라, h1, h2 등의 헤딩 태그처럼 비교적 사소한 부분에 대해서도, 브라우저별 기본 스타일이 다를 수가 있다.
글자의 크기와 굵기, 또는 폰트의 종류 등등 서로 다른 스타일 속성이 누적되는 미묘한 차이로 발생시킬 수 있고, 이는 디자인 작업을 어렵게 한다.

도대체 기본 스타일들이 왜 있어가지고, 왜 각 브라우저마다 스타일이 달라가지고 이런 문제를 일으키나 싶겠지만,
웹초창기 프론트가 그렇게 화려하지 않았던 시절에는 이 기본 스타일이 어느정도 도움을 주었던 것은 사실이다.
그저 오늘날에 와서는 프론트가 매우 복잡하고 화려해졌기 때문에, 기본 스타일이 서비스 디자인에 오히려 방해가 된다고 여겨지고 있을 뿐이다.

그 덕분에 개발자에게 스타일들을 일일히 초기화 시켜주는 귀찮고 반복되는 일이 생겨버렸는 데, 이 초기화 작업을 미리 해둔 css asset들이 있다
크게 2가지로 reset.css 또는 nomalize.css 로 나뉜다.
두가지 모두 서로 웹브라우저별로 상이하게 적용된 스타일을 표준화 시키는 것을 목적을 두는 것에는 같지만, 그 표준화 정도가 다를 뿐이다.
간략하게 설명하면 아래와 같다.

nomalize.css : 각 웹브라우저가 이미 표준화된 모습을 따르고 있는 건 남기고 그외 요소만 reset 시킨다.
reset.css : 기본 스타일이고 뭐고, 죄다 reset 시킨다.

위와같이 css asset들이 웹브라우저의 기본 스타일을 초기화 및 표준화 시켜주는 역할을, Tailwind에서는 Preflight라는 것이 담당한다.

Tailwind CSS의 Preflight:
Tailwind CSS는 이런 기본 스타일 문제를 해결하기 위해 자체적인 스타일 리셋 도구인 Preflight를 제공합니다.
Preflight는 Normalize.css 기반으로 동작하며, 기본 스타일을 제거하거나 '표준화'하는 데 초점을 맞춥니다.
이를 통해 브라우저 간 스타일 차이를 최소화하고 Tailwind의 유틸리티 클래스와 조화를 이루도록 설계되었습니다.

현재 맥락에서 말하는 표준화란?:
모든 브라우저에서 동일하게 렌더링되도록 HTML 요소 스타일을 통일하는 것

Preflight의 주요 작업: 1.브라우저 기본 스타일 리셋:

• 기본 margin, padding, box-sizing 등 제거.

  2.HTML 기본 스타일 추가:

• 모든 요소에 box-sizing: border-box 설정.

• 텍스트 요소에 inherit 속성 설정으로 스타일 일관성 유지.
  .
  .
  등등의 작업을 말한다.