Reset 라이브러리 사용의 장점
검증된 코드
- 오랜 기간 많은 개발자들에 의해 테스트되고 개선된 코드
- 브라우저 업데이트에 따른 지속적인 관리와 업데이트
- HTML5 요소까지 고려한 포괄적인 초기화
유지보수 편의성
- 라이브러리 업데이트만으로 최신 브라우저 호환성 확보 가능
- 개별적으로 관리할 필요가 없어 시간 절약
- 팀 프로젝트에서 표준화된 초기화 방식 적용 가능
다양한 선택지
- Reset CSS: 모든 스타일을 완전히 초기화
- Normalize CSS: 브라우저 간 일관성만 맞춤
수기 Global.css 작성의 특징
장점
- 프로젝트 맞춤형 최적화: 실제 사용하는 요소들만 선별적으로 초기화
- 파일 크기 최소화: 불필요한 코드 제거
- 학습 효과: CSS 기본 동작 원리에 대한 깊은 이해
단점
- 관리 부담: 새로운 브라우저 버전에 따른 직접 업데이트 필요
- 일관성 부족: 팀원마다 다른 초기화 방식
- 개발 시간 소요: 처음부터 모든 요소를 고려해서 작성
권장사항
라이브러리 사용을 권장하는 경우
- 팀 프로젝트에서 표준화가 필요한 경우
- 빠른 개발이 우선순위인 경우
- CSS 초기화 경험이 부족한 경우
- 지속적인 유지보수가 중요한 프로덕션 환경
수기 작성을 권장하는 경우
- 성능 최적화가 매우 중요한 경우
- 매우 제한적인 요소들만 사용하는 프로젝트
- CSS에 대한 깊은 이해를 원하는 학습 목적
- 라이브러리 의존성을 최소화하고 싶은 경우
TailwindCSS와 Preflight
Preflight 특징
TailwindCSS는 Preflight라는 내장 CSS reset 시스템을 제공한다:
- Normalize.css 기반으로 브라우저 간 일관성 확보
- 모든 요소의 기본 스타일 완전 제거
- TailwindCSS 유틸리티 클래스와 완벽한 호환성
TailwindCSS에서 많이 사용되는 Reset 방식
1. 기본 Preflight 활용 (가장 일반적)
@tailwind base;
@tailwind components;
@tailwind utilities;2. 커스텀 Reset in @layer base
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html, body {
margin: 0;
padding: 0;
}
}3. @tailwindcss/typography 플러그인
텍스트 콘텐츠가 많은 프로젝트용:
npm i @tailwindcss/typography4. Un-reset 패턴
외부 HTML 콘텐츠에 기본 스타일 복원:
.unreset {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
}Preflight 사용법 상세
기본 사용 (자동 적용)
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Next.js 적용
// app/layout.tsx
import './globals.css'
export default function RootLayout({ children }) {
return (
<html lang="ko">
<body>{children}</body>
</html>
)
}Preflight 비활성화
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
},
}커스텀 Base 스타일 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Noto Sans KR', system-ui, sans-serif;
}
body {
@apply text-gray-900 bg-white;
}
button:focus,
input:focus {
@apply outline-none ring-2 ring-blue-500;
}
}특정 영역에서 Preflight 해제
@layer components {
.unreset {
@apply [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4;
@apply [&_p]:mb-4;
@apply [&_ul]:list-disc [&_ul]:pl-5;
@apply [&_a]:text-blue-600 [&_a]:underline;
}
}결론
일반적인 권장사항
- React/Next.js 일반 프로젝트: 검증된 reset 라이브러리 사용
- TailwindCSS 프로젝트: 기본 Preflight로 충분
- 콘텐츠 위주 프로젝트: @tailwindcss/typography 플러그인 활용
- 성능 최적화 필수: 필요한 부분만 선별적 초기화
TailwindCSS는 다른 CSS 프레임워크와 달리 자체적으로 강력한 reset 시스템을 내장하고 있어, 대부분의 경우 추가적인 reset 라이브러리가 필요하지 않다는 것이 가장 큰 특징이다.
