안녕하세요
K-인사이트입니다.
Next.js 를 활용해 SEO 최적화를 위한 프로젝트를 진행한다면 UI에 스타일을 적용하는 CSS를 익히는 것은 매우 중요한 일입니다. 좋은 기술을 사용하더라도 포장지 역할의 CSS가 미흡하다면 앙꼬 없는 찐빵인 셈입니다. Next.js 에코시스템은 이미 여러분의 걱정을 충분히 고려하여 스타일 적용을 위한 여러가지 방법들을 고안해 두었습니다. 어렵게 고민할 필요없이 이 글을 통해서 멋진 스타일링과 생산성 두마리 토끼를 잡아보시길 바랍니다.
이전 글 바로가기
이 글은 이어진 글입니다. 샘플 프로젝트를 다운로드 받아 환경을 구성해야 한다면 아래의 글을 통해 편리하게 실습 환경을 구성할 수 있습니다.
이 글에서 다루는 내용
Next.js 에서 스타일링을 적용하는 여러가지 방법을 살펴봅니다. 전역 CSS를 적용하는 방법, Tailwind 와 CSS 모듈을 이용한 스타일링 방법, clsx 유틸리티 패키지를 통해 조건을 부여하여 클래스 이름을 추가하는 방법을 알아보겠습니다.
- 전역 CSS를 적용하는 방법
- Tailwind 와 CSS 모듈을 이용한 스타일링 방법
- clsx 유틸리티를 이용한 스타일링 조건 설정 방법
- CSS 모듈화 방법
- 이외 다른 스타일링 방법
전역 스타일 (global styles)
/app/ui 폴더를 보면, global.css 이라고 불리는 파일이 있습니다. 이 파일을 사용해서 CSS 규칙들을 어플리케이션의 모든 라우트들에 적용할 수 있습니다. global.css 를 어떤 컴포넌트에도 임포트가 가능합니다. 하지만 가장 좋은 사례는 최 상단 컴포넌트에 적용하는 것입니다. Next.js 는 이를 루트 레이아웃(Root Layout)이라고 부릅니다.
글로벌 스타일을 어플리케이션에 추가하기 위해서 /app/layout.tsx 로 이동하여 global.css 파일을 적용합니다.
import '@/app/ui/global.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
왼쪽과 오른쪽은 각각 적용전 적용후 화면입니다.
하지만 조금 이상합니다. global.css 에 어떠한 스타일을 적용하지 않았습니다. 파일을 살펴보면 @tailwind 지시자가 선언되어 있음을 볼 수 있습니다. 그렇다면, Tailwind 에 대해서 알아보겠습니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind 란?
Tailwind 는 CSS 프레임워크입니다. TSX 마크업에 유틸리티 클래스를 추가하여 개발 속도를 높입니다. 테일윈드에서 클래스 이름을 추가하는 방식으로 엘리먼트들을 스타일링할 수 있습니다. 예를 들어 text-blue-500 은 h1 태그의 텍스트를 파란색으로 변경합니다.
<h1 className="text-blue-500">I'm blue!</h1>
CSS 스타일이 전역적으로 공유되더라도 각 클래스는 각 엘리먼트에 적용됩니다. 즉, 엘리먼트를 삭제하거나 추가한다면 별도의 스타일시트를 유지 관리하거나 스타일 충돌, 애플리케이션 확장에 따라 커지는 CSS 번들 크기에 대해 걱정할 필요가 없습니다.
Next.js 를 create-next-app 을 통해서 시작한다면 Tailwind 를 사용할 것인지 묻습니다. yes 를 선택하면 자동으로 필요한 패키지들이 설치되고 Tailwind 구성이 완료됩니다. 제공된 코드에서 Tailwind 의 유틸리티 클래스 이름들을 관찰할 수 있습니다.
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 를 통해서 간단한 도형을 그려넣어보겠습니다. 왼쪽 그림의 붉은색 박스에 세모 도형을 추가해보겠습니다. <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 모듈
CSS 모듈은 CSS를 컴포넌트 범위로 제한합니다. 동시에 고유한 클래스 이름을 자동으로 생성하여 스타일 충동을 방지합니다. 예를 들어 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 파일에 CSS 모듈을 임포트하고 아래와 같이 코드를 작성하면 Tailwind 와 동일한 효과를 보입니다.
import styles from '@/app/ui/home.module.css';
<div className={styles.shape} />;
clsx 라이브러리 사용
상태 관리를 통해서 조건에 따라 스타일을 적용하는 구현은 매우 흔합니다. clsx 라이브러는 클래스 이름을 쉽게 토글하도록 도와줍니다. 상세한 내용은 여기를 참고해주세요. 간단한 시나리오를 만들어 clsx 를 적용해보겠습니다.
- InvoiceStatus 컴포넌트를 생성하고 이 컴포넌트는 status 를 인자로합니다. status 는 pending 또는 paid 와 같은 값을 가질 수 있습니다.
- 만약, status 가 ‘paid’ 이라면 색상이 초록색(green)이되고, pending 상태라면 색상이 회색(gray)가 되도록 구현합니다.
아래 코드는 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',
},
)}
>
// ...
)}
이외 다른 스타일링 방법
앞서 언급했던 방법들 외에도 여러 스타일링 방법이 있습니다.
- Sass 를 이용한 방법으로 .css 확장자 대신 .scss 확장자를 사용합니다.
- CSS-in-JS 라이브러리를 사용하는 방법이 있으며 예로 styled-jsx, styled-components, emotion 이 있습니다.
이상입니다.
K-인사이트 올림.
'프로그래밍 > Next.js' 카테고리의 다른 글
NEXT.JS 페이지 이동(Navigating)과 코드 스플리팅 (83) | 2024.04.21 |
---|---|
NEXT.JS 중첩 라우팅(Nested Routing)과 레이아웃(Layout) 적용 (88) | 2024.04.21 |
NEXT.JS 검색엔진 최적화(SEO)를 위한 폰트와 이미지 최적화 (67) | 2024.04.06 |
NEXT.JS 일단 프로젝트부터 생성해서 공부해보자! (59) | 2024.04.02 |