Next.js

CSS 모듈 사용하기

웹 애플리케이션의 시각적인 매력과 사용자 경험은 스타일링(Styling)에 크게 좌우됩니다. React 기반의 Next.js 애플리케이션에서 스타일을 적용하는 방법은 다양하지만, 그중에서도 CSS 모듈(CSS Modules)은 컴포넌트 기반의 개발 철학과 잘 맞아 떨어지며, 스타일 충돌을 방지하고 관리 효율성을 높이는 강력한 기능을 제공합니다.

스타일링(Styling)와 CSS 모듈를 중심으로 CSS 모듈 사용하기의 판단 흐름을 읽습니다.

1

CSS 모듈이란 무엇인가요?

CSS 모듈은 CSS 파일을 불러올 때, 모든 클래스 이름과 애니메이션 이름을 자동으로 고유하게 만들어 컴포넌트 범위로 스타일을 한정하는 방식입니다.

스타일링(Styling)
2

왜 CSS 모듈을 사용해야 할까요?

전통적인 CSS 작성 방식이나 다른 스타일링 방법에는 다음과 같은 문제점들이 있었습니다.

CSS 모듈(CSS Modules)
3

Next.js에서 CSS 모듈 사용하기

Next.js는 CSS 모듈을 기본적으로 지원하며, 추가 설정 없이 바로 사용할 수 있습니다.

CSS 모듈