728x90
현재 프로젝트에는 아무런 스타일도 적용되지 않았습니다.
이번 장에서는 Next.js에서 스타일을 지정하는 다양한 방법을 살펴보겠습니다.
- 전역 CSS 파일 추가하기
- Tailwind와 CSS 모듈
- 유틸리티 패키지 clsx를 사용해 조건부로 클래스 이름을 추가하는 방법
전역 스타일
프로젝트 내부의 /app/ui 폴더에 global.css 파일을 사용해 전역 CSS를 설정할 수 있습니다.
⚠️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 모듈
/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 의 Tailwind 클래스를 다음과 같이 변경합니다.
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className={styles.shape} />
// ...
)
}
라이브러리를 사용하여 clsx 클래스 이름 전환
clsx는 상태나 조건에 따라 클래스 이름을 쉽게 전환할 수 있는 라이브러리 입니다.
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',
},
)}
>
// ...
)}
728x90
'PS > Baekjoon Online Judge' 카테고리의 다른 글
| [백준 05568] 카드 놓기 [Java] (0) | 2025.03.17 |
|---|---|
| [백준 26265] 멘토와 멘티 [Java] (0) | 2025.03.16 |
| [백준 19564] 반복 [Java] (0) | 2025.03.15 |
| [백준 04150] 피보나치 수 [Java] (0) | 2025.03.15 |
| [백준 13419] 탕수육 [Java] (0) | 2025.03.15 |