Next.js 15 Fullstack Web Apps · 강의

CSS 모듈과 전역 스타일

로컬 범위 지정을 위해 CSS 모듈로 스타일을 구성하고 전역 스타일을 효과적으로 관리합니다.

CSS 모듈과 전역 스타일은(는) CoddyKit의 무료 Next.js 15 Fullstack Web Apps 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack Web Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Styling Your Next.js App

Welcome to styling in Next.js! Creating visually appealing and user-friendly interfaces is crucial for any web application.

Next.js offers powerful and flexible ways to manage your styles, from simple global stylesheets to component-specific solutions. In this lesson, we'll explore two fundamental methods: CSS Modules and Global Styles.

The Global CSS Problem

In traditional web development, all CSS styles are often global. This can lead to issues:

Naming Conflicts: Two different parts of your application might use the same class name, causing unintended style overrides.
Maintenance Headaches: Changing a style in one place might accidentally break the layout or appearance elsewhere.
Lack of Isolation: Styles aren't tied directly to the components they affect, making it harder to understand and manage them.

CSS Modules were created to solve these problems!

What are CSS Modules?

CSS Modules are a way to locally scope CSS by automatically creating unique class names. This means that styles defined in one CSS Module file will only apply to the component that imports it.

Key benefits:

No Conflicts: Unique class names prevent accidental overrides.
Component Isolation: Styles are encapsulated within their components.
Easier Maintenance: You can confidently change styles without worrying about side effects.

Creating a CSS Module File

To create a CSS Module in Next.js, you simply name your CSS file with the .module.css extension. For example, if you're styling a button, you might create Button.module.css.

Here's what a simple CSS Module might look like:

// app/ui/Button.module.css
.primaryButton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.primaryButton:hover {
  background-color: #0056b3;
}

Using a CSS Module in React

Once you have a .module.css file, you can import it into any React component. Next.js then processes these styles, making them available as a JavaScript object.

The class names defined in your CSS Module become properties of this imported object. For instance, .primaryButton becomes styles.primaryButton.

Try running this example to see how a component imports and uses a CSS Module. The actual styling would be applied by Next.js during the build process.

// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module

export default function PrimaryButton({ text }) {
  return (
    // 'styles.primaryButton' uses the class from Button.module.css
    <button className={styles.primaryButton}>
      {text}
    </button>
  );
}

// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
//   return (
//     <div>
//       <h1>My App</h1>
//       <PrimaryButton text="Click Me" />
//     </div>
//   );
// }

Global Styles in Next.js

While CSS Modules are great for component-level styling, some styles need to apply universally across your entire application. These are called Global Styles.

You'd use global styles for:

CSS resets (e.g., to normalize browser defaults).
Base typography (e.g., default font family, line height for body).
Layout styles that affect the entire page structure.
Utility classes that are truly global (e.g., .hidden).

Implementing Global Styles

In Next.js 15 with the App Router, global styles are typically imported into your root app/layout.js file. This ensures they are available to all pages and components within your application.

First, create a global CSS file, usually named globals.css in your app directory:

// app/globals.css
html, body {
  padding: 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f8f8fa;
  color: #333;
}

h1 {
  color: #1a1a1a;
  font-size: 2em;
  margin-bottom: 0.5em;
}

Then, import it into your app/layout.js to apply these styles application-wide:

// app/layout.js
import './globals.css'; // Import global styles

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children} {/* All pages will be rendered within this layout */}
      </body>
    </html>
  );
}

// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
//   return (
//     <main>
//       <h1>Hello, Global Styles!</h1>
//       <p>This text uses the font and color defined in globals.css.</p>
//     </main>
//   );
// }

CSS Modules vs. Global: Best Practices

Knowing when to use each styling method is key to a well-organized Next.js application:

Use CSS Modules for: Component-specific styles. If a style belongs to a single component (e.g., a button, a card, a navigation item), it should likely be in a CSS Module.
Use Global Styles for: Application-wide defaults, resets, base typography, and main layout structures. Styles that truly affect every part of your app or establish a baseline.

Mixing both approaches allows for powerful and maintainable styling.

Combining Styles & Specificity

Sometimes you might need to apply multiple styles or conditional styles. You can combine CSS Module classes with regular global classes, or even inline styles:

import styles from './MyComponent.module.css';

function MyComponent({ isActive }) {
  const activeClass = isActive ? 'global-active-class' : '';
  return (
    <div className={`${styles.container} ${activeClass}`} >
      ... 
    </div>
  );
}

Remember that CSS specificity rules still apply. More specific selectors (e.g., IDs, inline styles) will override less specific ones (e.g., class names).

Quick Check on Styles

Which of the following statements about styling in Next.js are TRUE?

Recap: Styling for Success

You've mastered the fundamentals of styling in Next.js 15!

CSS Modules provide local scope, solving the global CSS problem with unique class names for component-specific styles.
Global Styles are used for application-wide defaults, resets, and base layouts, typically imported in app/layout.js.

By effectively combining these two powerful methods, you can build maintainable, scalable, and visually consistent Next.js applications. Keep practicing to make your UIs shine!

자주 묻는 질문

“CSS 모듈과 전역 스타일” 강의는 무료인가요?

네 — “CSS 모듈과 전역 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack Web Apps 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“CSS 모듈과 전역 스타일”에서 뭘 배우나요?

로컬 범위 지정을 위해 CSS 모듈로 스타일을 구성하고 전역 스타일을 효과적으로 관리합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack Web Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack Web Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack Web Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“CSS 모듈과 전역 스타일” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack Web Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack Web Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Next.js 15 Fullstack Web Apps(으)로 돌아가기