02. CSS 스타일링

이번 장에서 다룰 주제는 아래와 같다.

애플리케이션에 전역 CSS 파일을 추가하는 방법.
두 가지 스타일 지정 방법: Tailwind 및 CSS 모듈.
clsx 유틸리티 패키지를 사용하여 조건부로 클래스 이름을 추가하는 방법

글로벌 스타일

/app/ui 폴더를 살펴보면 global.css라는 파일이 있다. 이 파일을 사용하여 CSS 재설정 규칙, 링크와 같은 HTML 엘리먼트에 대한 사이트 전체 스타일 등과 같은 CSS 규칙을 애플리케이션의 모든 경로에 추가할 수 있다.

애플리케이션의 모든 컴포넌트에서 global.css를 가져올 수 있지만 일반적으로 최상위 컴포넌트에 추가하는 것이 좋다. Next.js에서 최상위 컴포넌트는 루트 레이아웃이다(나중에 자세히 설명).

/app/layout.tsx로 이동하고 global.css 파일을 가져와 애플리케이션에 전역 스타일을 추가한다.

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

개발 서버가 계속 실행 중인 상태에서 변경 사항을 저장하고 브라우저에서 미리 볼수 있다. 이제 웹페이지는 다음과 같이 보일 것이다.

잠깐, CSS 규칙을 추가하지 않았는데, 스타일은 어디서 나온 걸까? global.css 내부를 살펴보면 @tailwind 지시문을 볼 수 있다.

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind는 TSX 마크업에서 직접 유틸리티 클래스를 빠르게 작성할 수 있도록 하여 개발 프로세스 속도를 높이는 CSS 프레임워크이다.

Tailwind에서는 클래스 이름을 추가하여 엘리먼트의 스타일을 지정한다. 예를 들어 "text-blue-500" 클래스를 추가하면 <h1> 텍스트가 파란색으로 변한다.

<h1 className="text-blue-500">I'm blue!</h1>

CSS 스타일은 전역적으로 공유되지만 각 클래스는 각 엘리먼트에 개별적으로 적용된다. 즉, 컴포넌트를 추가하거나 삭제하는 경우 별도의 스타일시트 유지 관리, 스타일 충돌 또는 애플리케이션 확장에 따른 CSS 번들 크기 증가에 대해 걱정할 필요가 없다.

create-next-app을 사용하여 새 프로젝트를 시작하면 Next.js가 Tailwind를 사용할지 묻게된다. yes를 선택하면 Next.js가 자동으로 필요한 패키지를 설치하고 애플리케이션에 Tailwind를 구성한다.

/app/page.tsx를 보면 예제에서 Tailwind 클래스를 사용하고 있음을 알 수 있다.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Tailwind를 처음 사용하는 경우에도 걱정할 필요가 없다. 시간을 절약하기 위해 사용할 모든 컴포넌트의 스타일을 이미 지정하였다.

'Let's play with Tailwind!' 아래 코드를 복사하여 /app/page.tsx의 <p> 엘리먼트 위에 붙여넣어보자.

<div
  className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"
/>

전통적인 CSS 규칙을 작성하거나, 스타일을 JSX와 별도로 유지하는 것을 선호한다면 CSS 모듈을 사용하면 된다.

CSS Module

CSS 모듈을 사용하면 고유한 클래스 이름을 자동으로 생성하여 CSS 범위를 컴포넌트로 지정할 수 있으므로 스타일 충돌에 대해서 걱정할 필요가 없다.

이 과정에서는 Tailwind를 계속 사용하지만 CSS 모듈을 사용하여 동일한 결과를 얻을 수 있는 방법을 잠시 살펴보겠다.

/app/ui 내에서 home.module.css라는 새 파일을 만들고 다음 CSS 규칙을 추가하자.

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

그런 다음 /app/page.tsx 파일 내에서 스타일을 가져오고 추가한 <div>의 tailwind 클래스 이름을 styles.shape로 바꾼다.

app.page.tsx

import styles from '@/app/ui/home.module.css';
 
//...
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
    <div className={styles.shape}></div>;
// ...

변경 사항을 저장하고 브라우저에서 미리 봅니다. 이전과 같은 모양이 표시되어야 한다.

Tailwind 및 CSS 모듈은 Next.js 애플리케이션 스타일을 지정하는 가장 일반적인 두 가지 방법이다. 둘 중 하나를 사용하는지 여부는 단지 선호의 문제이다. 동일한 애플리케이션에서 두 가지를 모두 사용할 수도 있다.

clsx 라이브러리를 사용하여 클래스 이름 전환

상태나 다른 조건에 따라 엘리먼트의 스타일을 조건부로 지정해야 하는 경우가 있을 수 있다.

clsx는 클래스 이름을 쉽게 전환할 수 있는 라이브러리이다. 자세한 내용은 설명서를 살펴보는 것이 좋지만 기본 사용법은 다음과 같다.

상태를 허용하는 InvoiceStatus 컴포넌트를 생성한다고 가정해 보자. 상태는 'pending' 또는 'paid'일 수 있다.

'paid'인 경우 색상이 녹색이기를 원합니다. 'pending'인 경우 색상이 회색이기를 원할 것이다.
clsx를 사용하여 다음과 같이 클래스를 조건부로 적용할 수 있다.

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

기타 스타일링 솔루션

우리가 논의한 접근 방식 외에도 다음을 사용하여 Next.js 애플리케이션의 스타일을 지정할 수도 있다.

.css 및 .scss 파일을 가져올 수 있는 Sass.
styled-jsx, styled-Components, emotion과 같은 CSS-in-JS 라이브러리.
자세한 내용은 CSS 문서를 살펴보자.

'Next.js 개발 가이드 > 06. Learn Next.js 공식 가이드' 카테고리의 다른 글

06. 데이터베이스 설정 (0)	2023.12.23
05. 페이지간 이동 (0)	2023.12.22
04. 레이아웃 및 페이지 만들기 (0)	2023.12.20
03. 폰트 및 이미지 최적화 (0)	2023.12.20
01. 시작 (0)	2023.12.20