손에 익는 Next.js
Part 1 - 공식 문서 훑어보기
Part 1 - 공식 문서 훑어보기
  • 왜 Next.js를 배우는가?
    • 1️Next.js가 세상에 있기까지
    • 2️Next.js를 배우는 이유
  • Next.js 기본 배우기
    • 1️Next.js는 무엇인가?
    • 2️Next.js 13
    • 3️서버 컴포넌트
    • 4️라우팅
    • 5️페이지 간 이동
    • 6️스타일링
    • 7️데이터 페칭
    • 8️메타데이터
  • Next.js 손에 익히기
    • 1️프로젝트 소개
    • 2️프로젝트 환경 설정
    • 3️페이지 구성하기
    • 4️페이지 간 이동하기
    • 5️페이지 스타일 입히기
    • 6️날씨 API 사용하기
    • 7️날씨 데이터 조회하기
    • 8️메타데이터 다루기
    • 9️서비스 배포하기
  • 마치며
    • *️후속 강의에 대하여
Powered by GitBook
On this page
  • CSS Modules
  • 전역 스타일링
  1. Next.js 기본 배우기

스타일링

Next.js에서는 CSS Modules, Tailwind CSS, CSS-in-JS, Sass와 같은 스타일링 방식을 지원합니다. 이번 강의에서는 가장 진입 장벽이 낮은 CSS Modules 방식을 기본으로 삼습니다.

CSS Modules

CSS Modules는 CSS 클래스의 이름 중복 문제를 피할 수 있는 지역 스코프의 스타일링 방식입니다. .module.css 확장자로 이름을 붙여 스타일을 정의하고 컴포넌트에서 가져와 사용할 수 있습니다.

styles.module.css
.dashboard {
  padding: 24px;
}
layout.tsx
import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}) {
  return <section className={styles.dashboard}>{children}</section>
}

전역 스타일링

전역 스타일은 app 디렉토리 안에 있는 어떤 layout, page, component 파일에도 선언할 수 있습니다.

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}
app/layout.tsx
// 이렇게 적용된 스타일은 어플리케이션의 모든 경로에 적용됩니다.
import './global.css'
 
export default function RootLayout({
  children,
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

참고 자료

Previous페이지 간 이동Next데이터 페칭

Last updated 1 year ago

6️
https://nextjs.org/docs/app/building-your-application/styling