Next.js 학습코스 따라하기 (Chapter 2)

이상범·2024년 4월 12일

Next.js 가이드 Next.js 강의 Next.js 학습코스 React next.js 자바스크립트 프론트엔드

Next.js (v14 이상)학습코스 (Learn Next.js)

목록 보기

2/15

Next.js 스타일링 완벽 가이드

🎨 글로벌 스타일 설정

전역 CSS 파일 활용

Next.js에서는 /app/ui/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>
  );
}

적용 결과

글로벌 스타일 적용 결과

⚡ Tailwind CSS

Utility-First CSS 프레임워크

Tailwind CSS는 Utility-First 접근 방식을 채택한 CSS 프레임워크입니다. 사전 정의된 유틸리티 클래스를 사용하여 HTML 내에서 직접 스타일링할 수 있습니다.

🔧 기본 사용법

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

📝 실제 적용 예시

/app/page.tsx 파일에서 Tailwind CSS가 어떻게 활용되는지 살펴보겠습니다:

import AcmeLogo from '@/app/ui/acme-logo';
import Link from 'next/link';

export default function Page() {
  return (
    <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">
        {/* <AcmeLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <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">
          <p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
            <strong>Welcome to Acme.</strong> This is the example for the{' '}
            <a href="https://nextjs.org/learn/" className="text-blue-500">
              Next.js Learn Course
            </a>
            , brought to you by Vercel.
          </p>
          <Link
            href="/login"
            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>Log in</span>
          </Link>
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          {/* Add Hero Images Here */}
        </div>
      </div>
    </main>
  );
}

📦 CSS Module

클래스명 충돌 방지 솔루션

CSS Module은 스타일 클래스명의 중첩을 방지하는 기술입니다. 클래스명을 [파일명]_[클래스명]_[해시값] 형태로 자동 변환하여 고유성을 보장합니다.

🛠️ 구현 단계

1단계: 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;
}

2단계: 컴포넌트에서 import 및 사용

// /app/page.tsx
import styles from "./ui/home.module.css"; 

export default function Page() {
  return <div className={styles.shape}></div>;
}

🎯 clsx 라이브러리

조건부 스타일링의 강력한 도구

React 개발에서 상태에 따라 className을 동적으로 변경해야 하는 경우가 많습니다. clsx는 이러한 작업을 깔끔하게 처리할 수 있는 라이브러리입니다.

💡 사용 예시

시나리오: status 값에 따라 다른 스타일 적용

status === "pending" → bg-gray-100 text-gray-500
status === "paid" → bg-green-500 text-white

import clsx from "clsx";

export default function Page() {
  let status = "pending";
  
  const resultClassName = clsx({
    "bg-gray-100 text-gray-500": status === "pending",
    "bg-green-500 text-white": status === "paid",
  });
  
  return (
    <div
      className={`inline-flex items-center rounded-full m-8 px-2 py-1 text-xl ${resultClassName}`}
    >
      clsx 사용해보기
    </div>
  );
}