[공식문서] NextJS - Assets, Metadata, and CSS #6

CSS 스타일링에 대해 이제 이야기해보겠습니다.

http://localhost:3000에 접속하면 이미 index 페이지에 일부 스타일이 적용된 것을 볼 수 있습니다. 파일 구조를 살펴보면 styles라는 폴더가 있고 그 안에 두 가지 CSS 파일이 있는데요: 전역 스타일시트 (globals.css)와 CSS 모듈 (Home.module.css)입니다.

프로젝트에 이러한 파일이 없는 경우 다음 링크에서 스타터 코드를 다운로드할 수 있습니다:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/assets-metadata-css-starter"

 

CSS 모듈

CSS 모듈을 사용하면 자동으로 고유한 클래스 이름을 생성하여 컴포넌트 수준에서 CSS를 로컬로 스코프 지정할 수 있습니다. 이렇게 하면 서로 다른 파일에서 동일한 CSS 클래스 이름을 사용하더라도 클래스 이름 충돌에 대해 걱정하지 않아도 됩니다.

CSS 모듈 외에도 다양한 방식으로 Next.js 애플리케이션을 스타일링할 수 있습니다. 예를 들어:

.css 및 .scss 파일을 가져올 수 있는 Sass

Tailwind CSS와 같은 PostCSS 라이브러리

styled-jsx, styled-components, emotion과 같은 CSS-in-JS 라이브러리

 

이번 레슨에서는 CSS 모듈과 Sass를 Next.js에서 사용하는 방법에 대해 이야기하겠습니다.

 

이제 시작해보겠습니다!