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
복사
