Search
🔄

Next.js 에서의 css-reset

1. 글로벌 CSS 파일에서 Reset 적용 (가장 간단한 방법)
Next.js에서는 app/globals.css 또는 styles/globals.css 파일을 사용하여 전역 스타일을 적용할 수 있습니다.
이 파일에 CSS Reset 또는 Normalize.css를 추가하면 됩니다.
설정 방법
1. app/globals.css (또는 styles/globals.css) 파일을 수정하여 아래 CSS 리셋을 추가합니다.
/* app/globals.css 또는 styles/globals.css */ @import url('https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css'); /* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: Arial, sans-serif; }
CSS
복사
2. Tailwind CSS의 Preflight 기능 활용
Tailwind CSS를 사용한다면 Preflight 기능이 기본적으로 제공됩니다. Tailwind의 @tailwind base;를 적용하면 Normalize.css + 기본적인 리셋이 적용됩니다.
설정 방법
1. tailwind.config.js 설정을 유지합니다. (별도 CSS Reset 불필요)
2. globals.css에서 Tailwind 기본 설정을 적용합니다.
/* app/globals.css 또는 styles/globals.css */ @tailwind base; @tailwind components; @tailwind utilities;
CSS
복사
3. postcss-normalize 라이브러리 사용
postcss-normalize를 사용하면 자동으로 최신 Normalize.css가 적용됩니다.
설정 방법
1. postcss-normalize 패키지 설치
npm install postcss-normalize
CSS
복사
2. postcss.config.js에 추가
module.exports = { plugins: { 'postcss-normalize': {}, }, };
JavaScript
복사