개발서버가 여전히 동작하는 동안, 변경사항을 저장하면 브라우저에서 미리보기를 할 수 있습니다. 홈페이지는 아래와 같은 형태를 가질겁니다.
잠깐만요, 당신은 아무 CSS 규칙들을 추가하지 않았습니다. 이 스타일들은 어디서 온 걸까요?
global.css을 본다면, @tailwind라는 명령문을 볼 수 있습니다:
/app/ui/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind
Tailwind는 유틸리티 클래스들을 바로 TSX 마크업에 빠르게 쓰면서 개발 프로세스 속도를 향상 시킬 수 있는 CSS프레임 워크 입니다.
Tailwind에서는, 클래스명을 추가해서 요소들을 꾸밀 수 있습니다. 예를들어, text-blue-500 클래스를 추가하는 것은 <h1> text를 파랗게 만들겁니다.
<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를 처음 사용하는 것이어도 걱정하지마세요. 시간을 아끼기 위해 우린 이미 모든 당신이 사용할 컴퍼넌트를 스타일 해놨습니다.
Tailwind를 가지고 놀아봅시다! 아래 코드를 복사하고 /app/page.tsx 내에 <p>태그 위에 넣어봅시다.
/app/page.tsx
<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 Modules
CSS Modules은 자동으로 생성되는 유니크한 클래스 이름으로 컴퍼넌트의 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 파일에서 해당 스타일을 불러오고(import) <div>의 클래스를 방금 추가한 styles.shape로 바꿉시다:
/app/page.tsx
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} />
// …
)
}
변경사항을 저장하고, 브라우저에서 봅시다. 전과 같은 모양을 볼 수 있을 겁니다.
Tailwind와 CSS Modules은 Next.js 어플리케이션을 스타일하는 가장 많이 쓰는 방법들입니다. 둘 중 하나를 사용하는건 선호의 문제입니다 - 같은 어플리케이션에서 두가지 모두를 사용할 수도 있습니다.
퀴즈할 시간입니다!
익힌걸 테스트해보고 무엇을 배웠는지 봅시다.
CSS 모듈을 사용할때의 장점 하나는 무엇인가요?
클래스 변경(toggle)을 위한 clsx 라이브러리 사용하기
때때로 요소를 상태가, 다른 조건에 의해 다르게 스타일 해야할 경우가 있습니다.
clsx는 클래스명을 쉽게 바꿀(toggle)수 있게 해주는 라이브러리 입니다. 더 세부적인 사항을 위해 문서를 읽어보는걸 추천하지만, 기본적인 사용법은 다음과 같습니다:
status를 받는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’,
},
)}
>
// …
)}
퀴즈할 시간입니다!
익힌걸 테스트해보고 무엇을 배웠는지 봅시다.
코드 에디터에서 `clsx`를 찾아봅시다, 어떤 컴퍼넌트가 클래스 명을 조건으로 받기 위해 이것을 쓰고있나요?
다른 스타일하기 옵션
우리가 이야기한것 외에 추가적으로, Next.js어플리케이션을 스타일할 수 있습니다:
.css.scss파일들을 불러(import)올수 있게해주는 Sass- styled-jsx, styled-components, emotion 같은 CSS-in-JS 라이브러리들
더 많은 정보를 위해 CSS 문서를 읽어보세요.
챕터 2를 완료했습니다.
잘했습니다! Next.js 어플리케이션을 꾸밀 다양한 방법을 배웠습니다.