Modern Reset 예제

폼 요소

필요한 최소한의 리셋만 적용하여 빠르게 스타일링할 수 있습니다.

제출하기

핵심 원칙

• box-sizing: border-box - 모든 요소에 적용
• margin: 0 - 예기치 않은 여백 제거
• line-height: 1.5 - 가독성 향상
• -webkit-font-smoothing - 폰트 렌더링 개선
• overflow-wrap: break-word - 긴 텍스트 처리
• max-width: 100% - 미디어 요소 반응형

3가지 Reset 비교

항목	Reset.css	Normalize.css	Modern Reset
코드 크기	중간 (~200줄)	큼 (~400줄)	작음 (~10줄)
접근성	나쁨	좋음	좋음
작업량	많음	적음	매우 적음
유지보수	중단됨	활발함	불필요
디자인시스템	비추천	추천	강력 추천

장점

• 최소한의 코드로 최대 효과
• 현대적인 CSS 기능 활용
• 접근성 유지 (outline, focus 등)
• 프레임워크와 조합 용이
• 성능 최적화

추천 대상

다음과 같은 프로젝트에 Modern Reset을 추천합니다:

• 디자인 시스템 구축
• React, Vue 등 모던 프레임워크 프로젝트
• 빠른 프로토타이핑
• 성능이 중요한 웹 애플리케이션