[Next.js Learn] Assets, Metadata, and CSS(5) - CSS Styling

CSS 스타일링(CSS Styling)

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

보시다시피, 우리의 인덱스 페이지(http://localhost:3000)는 이미 일부 스타일이 적용되어 있습니다. 파일 구조를 살펴보면 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 Modules)

CSS 모듈은 자동으로 고유한 클래스 이름을 생성하여 컴포넌트 수준에서 CSS를 지역적으로 적용할 수 있게 해줍니다. 이를 통해 서로 다른 파일에서 동일한 CSS 클래스 이름을 사용할 때 클래스 이름 충돌에 대해 걱정할 필요가 없습니다.

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

• .css 및 .scss 파일을 가져올 수 있는 Sass
• Tailwind CSS와 같은 PostCSS 라이브러리
• styled-jsx, styled-components, emotion과 같은 CSS-in-JS 라이브러리

이 강의에서는 Next.js에서 CSS 모듈과 Sass를 사용하는 방법에 대해 알아보겠습니다. 시작해보겠습니다!

출처: https://nextjs.org/learn/basics/assets-metadata-css/css-styling