CSS 모듈 사용하기

CSS 모듈은 Next.js에서 컴포넌트별로 스타일을 캡슐화하는 강력한 방법입니다.

이 절에서는 CSS 모듈의 기본 개념, 사용 방법, 그리고 모범 사례에 대해 알아보겠습니다.

CSS 모듈의 기본 개념

CSS 모듈은 CSS 클래스 이름을 자동으로 고유하게 만들어 스타일 충돌을 방지합니다.

이를 통해 컴포넌트별로 독립적인 스타일을 쉽게 적용할 수 있습니다.

CSS 모듈 사용 방법

CSS 파일 생성 : 파일 이름을 [name].module.css 형식으로 지정합니다.

app/Button.module.css

.button {
  padding: 10px 20px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
}

React 컴포넌트에서 import 및 사용

app/Button.js

import styles from './Button.module.css'
 
export default function Button({ children }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  )
}

컴포넌트별 스타일 적용

CSS 모듈을 사용하면 각 컴포넌트에 독립적인 스타일을 쉽게 적용할 수 있습니다.

app/Card.js

import styles from './Card.module.css'
 
export default function Card({ title, content }) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.content}>{content}</p>
    </div>
  )
}

app/Card.module.css

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
 
.title {
  font-size: 1.5em;
  color: #333;
}
 
.content {
  color: #666;
}

전역 스타일과의 조합

CSS 모듈은 전역 스타일과 함께 사용할 수 있습니다.

전역 CSS 파일 생성 (예 : globals.css)
_app.js 또는 layout.js에서 전역 CSS 파일 import

app/layout.js

import './globals.css'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

컴포넌트별 CSS 모듈과 함께 사용

import globalStyles from './globals.module.css'
import localStyles from './Local.module.css'
 
export default function MyComponent() {
  return (
    <div className={`${globalStyles.container} ${localStyles.specific}`}>
      {/* 컴포넌트 내용 */}
    </div>
  )
}

CSS 모듈의 장점

스코프 : 클래스 이름 충돌 방지
모듈성 : 컴포넌트별 스타일 관리 용이
재사용성 : 컴포넌트와 스타일을 쉽게 재사용
성능 : 필요한 CSS만 로드

모범 사례

의미 있는 클래스 이름 사용
컴포넌트와 동일한 이름의 CSS 모듈 파일 생성
중첩된 선택자 사용 자제
공통 스타일은 별도의 모듈로 분리

5장 페이지 및 레이아웃 컴포넌트와의 연결

CSS 모듈은 5장에서 다룬 페이지 및 레이아웃 컴포넌트와 완벽하게 호환됩니다.

각 페이지나 레이아웃 컴포넌트에 대해 별도의 CSS 모듈을 생성하여 스타일을 관리할 수 있습니다.

이를 통해 페이지별, 레이아웃별로 독립적인 스타일을 유지하면서도 전체적인 일관성을 유지할 수 있습니다.

실습 : 반응형 카드 컴포넌트 스타일링

다음 요구사항을 만족하는 반응형 카드 컴포넌트를 CSS 모듈을 사용하여 구현해보세요.

카드 레이아웃 (제목, 내용, 이미지)
반응형 디자인 (모바일, 태블릿, 데스크톱)
호버 효과

구현 예시

app/Card.js

import Image from 'next/image'
import styles from './Card.module.css'
 
export default function Card({ title, content, imageUrl }) {
  return (
    <div className={styles.card}>
      <div className={styles.imageContainer}>
        <Image src={imageUrl} alt={title} layout="fill" objectFit="cover" />
      </div>
      <div className={styles.content}>
        <h2 className={styles.title}>{title}</h2>
        <p className={styles.text}>{content}</p>
      </div>
    </div>
  )
}

app/Card.module.css

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}
 
.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}
 
.imageContainer {
  position: relative;
  width: 100%;
  height: 200px;
}
 
.content {
  padding: 16px;
}
 
.title {
  font-size: 1.5em;
  margin-bottom: 8px;
}
 
.text {
  color: #666;
}
 
@media (min-width: 768px) {
  .card {
    display: flex;
  }
 
  .imageContainer {
    width: 40%;
    height: auto;
  }
 
  .content {
    width: 60%;
  }
}

이 실습을 통해 CSS 모듈을 사용하여 반응형 디자인과 호버 효과를 포함한 복잡한 컴포넌트를 스타일링하는 방법을 경험할 수 있습니다.

이는 실제 프로젝트에서 자주 사용되는 패턴으로, CSS 모듈의 강력함과 유연성을 이해하는 데 도움이 됩니다.

이전으로 다음으로