Merge pull request #180 from milliwonkim/main

02-app > 01-building-your-application > 04-styling > 01-css-modules.mdx 번역

docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx

@@ -1,27 +1,29 @@
 ---
-title: CSS Modules
-description: Style your Next.js Application with CSS Modules.
+title: CSS 모듈
+description: CSS 모듈로 Next.js 앱에 스타일 적용하기
 ---
 
 <PagesOnly>
 
 <details open>
-  <summary>Examples</summary>
+  <summary>예시</summary>
 
-- [Basic CSS Example](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
+- [기본 CSS 예시](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
 
 </details>
 
 </PagesOnly>
 
-Next.js has built-in support for CSS Modules using the `.module.css` extension.
+Next.js는 `.module.css` 확장자를 사용하여 CSS 모듈을 기본적으로 지원합니다.
 
-CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.
+CSS 모듈은 고유한 클래스 이름을 자동으로 생성해서 CSS를 로컬로 범위를 지정합니다.
+따라서 충돌에 대한 걱정 없이 다른 파일에서 동일한 클래스 이름을 사용 가능합니다.
+이 방식으로 CSS 모듈을 컴포넌트 단위로 CSS를 적용할 수 있습니다.
 
-## Example
+## 예시
 
 <AppOnly>
-CSS Modules can be imported into any file inside the `app` directory:
+CSS 모듈은 app 디렉토리 안에서 어떤 파일이든 임포트할 수 있습니다.
 
 ```tsx filename="app/dashboard/layout.tsx" switcher
 import styles from './styles.module.css'
@@ -57,22 +59,20 @@ export default function DashboardLayout({
 
 <PagesOnly>
 
-For example, consider a reusable `Button` component in the `components/` folder:
-
-First, create `components/Button.module.css` with the following content:
+예를 들어, components 디렉토리 안의 재사용 가능한 Button 컴포넌트를 생각해 봅시다.
+먼저, 다음의 코드를 `components/Button.module.css` 파일 안에 만듭니다.
 
 ```css filename="Button.module.css"
 /*
-You do not need to worry about .error {} colliding with any other `.css` or
-`.module.css` files!
+다른 .css 혹은 .module.css 파일과 충돌하는 .error {} 대해서 고려할 필요는 없습니다.
 */
 .error {
   color: white;
   background-color: red;
 }
 ```
 
-Then, create `components/Button.js`, importing and using the above CSS file:
+그리고, `components/Button.js` 파일을 만들고, 다음의 CSS 파일을 자바스크립트 파일에 임포트합니다.
 
 ```jsx filename="components/Button.js"
 import styles from './Button.module.css'
@@ -81,8 +81,7 @@ export function Button() {
   return (
     <button
       type="button"
-      // Note how the "error" class is accessed as a property on the imported
-      // `styles` object.
+      // 어떻게 error 클래스가 임포트한 styles object의 속성으로 접근되었는지 확인해 주세요.
       className={styles.error}
     >
       Destroy
@@ -93,20 +92,22 @@ export function Button() {
 
 </PagesOnly>
 
-CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**.
-Regular `<link>` stylesheets and global CSS files are still supported.
+CSS 모듈은 _선택적 기능_ 이면서, **`.module.css` 확장자로만 파일 안에서 사용 가능합니다**
+일반적으로 `<link>` 스타일시트, 전역 CSS 파일들도 물론 사용 가능합니다.
+
+프로덕션 단계에서 모든 CSS 모듈 파일들은 자동으로 **최소한의 용량과 코드 분할 형식**으로 수많은 `.css` 파일들로 연결됩니다.
 
-In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
-These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
+이 `.css` 파일들은 앱에서 실시간 실행 경로(hot execution paths)를 나타내고, 브라우저의 페인트 단계에서 최소한의 CSS 코드가 로드됩니다.
 
-## Global Styles
+## 전역 스타일
 
 <AppOnly>
-Global styles can be imported into any layout, page, or component inside the `app` directory.
 
-> **Good to know**: This is different from the `pages` directory, where you can only import global styles inside the `_app.js` file.
+전역 스타일은 `app` 디렉토리 안의 layout, page, component 디렉토리에 모두 임포트할 수 있습니다.
 
-For example, consider a stylesheet named `app/global.css`:
+> **참고**: 전역 스타일을 `_app.js` 파일 안에만 임포트할 수 있는 `pages` 디렉토리와는 다릅니다.
+
+예를 들어, `app/global.css`라는 스타일시트를 생각해 봅시다.
 
 ```css
 body {
@@ -116,10 +117,10 @@ body {
 }
 ```
 
-Inside the root layout (`app/layout.js`), import the `global.css` stylesheet to apply the styles to every route in your application:
+앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일시트를 루트 레이아웃(`app/layout.js`) 안에 임포트합니다.
 
 ```tsx filename="app/layout.tsx" switcher
-// These styles apply to every route in the application
+// 이 스타일은 앱 안의 모든 라우트에 적용됩니다.
 import './global.css'
 
 export default function RootLayout({
@@ -136,7 +137,7 @@ export default function RootLayout({
 ```
 
 ```jsx filename="app/layout.js" switcher
-// These styles apply to every route in the application
+// 이 스타일은 앱 안의 모든 라우트에 적용됩니다.
 import './global.css'
 
 export default function RootLayout({ children }) {
@@ -152,9 +153,9 @@ export default function RootLayout({ children }) {
 
 <PagesOnly>
 
-To add a stylesheet to your application, import the CSS file within `pages/_app.js`.
+앱에 스타일시트를 적용하기 위해, `pages/_app.js` 안에 CSS 파일을 임포트하세요.
 
-For example, consider the following stylesheet named `styles.css`:
+예를 들어, `styles.css` 라는 다음의 스타일 시트를 생각해 봅시다.
 
 ```css filename="styles.css"
 body {
@@ -166,29 +167,34 @@ body {
 }
 ```
 
-Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present.
-Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
+[`pages/_app.js` 파일](/docs/pages/building-your-application/routing/custom-app)이 존재하지 않는다면, 이 파일을 만드세요.
+
+그 후, `styles.css` file을 `pages/_app.js`에 [`임포트하세요.`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
 
 ```jsx filename="pages/_app.js"
 import '../styles.css'
 
-// This default export is required in a new `pages/_app.js` file.
+// 이 default export는 새로운 `pages/_app.js`파일에 필요합니다.
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
 ```
 
-These styles (`styles.css`) will apply to all pages and components in your application.
-Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)**.
+이 스타일(`styles.css`)은 앱 안의 모든 페이지와 컴포넌트에 적용됩니다.
+스타일시트의 글로벌 특성을 고려했을 때, 또 충돌을 방지하기 위해, **[`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)안에만 이 스타일들을 import**할 수 있습니다.
 
-In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
+개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 스테이트를 계속해서 유지할 수 있습니다.
 
-In production, all CSS files will be automatically concatenated into a single minified `.css` file. The order that the CSS is concatenated will match the order the CSS is imported into the `_app.js` file. Pay special attention to imported JS modules that include their own CSS; the JS module's CSS will be concatenated following the same ordering rules as imported CSS files. For example:
+모든 CSS 파일은 프로덕션 배포 단계에서 자동적으로 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS를 임포트한 순서와 같습니다.
+
+특히 임포트된 JS 모듈 중 고유의 CSS를 가지는 JS 모듈에 주의하세요. JS 모듈 안의 CSS는 임포트된 CSS 파일과 동일한 정렬 방식으로 연결됩니다.
+
+예를 들면,
 
 ```jsx
 import '../styles.css'
-// The CSS in ErrorBoundary depends on the global CSS in styles.css,
-// so we import it after styles.css.
+// ErrorBoundary 안의 CSS는 style.css의 전역 CSS에 의존합니다.
+// 그러므로 styles.css 다음에 CSS를 임포트해야 합니다.
 import ErrorBoundary from '../components/ErrorBoundary'
 
 export default function MyApp({ Component, pageProps }) {
@@ -202,11 +208,11 @@ export default function MyApp({ Component, pageProps }) {
 
 </PagesOnly>
 
-## External Stylesheets
+## 외부 스타일시트
 
 <AppOnly>
 
-Stylesheets published by external packages can be imported anywhere in the `app` directory, including colocated components:
+외부 패키지에 의한 스타일시트는 함께 위치한 컴포넌트들을 포함해서, `app` 디렉토리 안의 어디서든 임포트할 수 있습니다.
 
 ```tsx filename="app/layout.tsx" switcher
 import 'bootstrap/dist/css/bootstrap.css'
@@ -236,21 +242,22 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **Good to know**: External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use `<link rel="stylesheet" />`.
+> **참고**: 외부 스타일시트는 npm 패키지를 이용하거나, 다운로드되거나, 코드베이스에 지정된 곳을 이용해서 직접 import 되어야 합니다. `<link rel="stylesheet" />`를 사용할 수 없습니다.
 
 </AppOnly>
 
 <PagesOnly>
 
-Next.js allows you to import CSS files from a JavaScript file.
-This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
+Next.js는 자바스크립트 파일 안에 있는 CSS 파일을 임포트할 수 있습니다.
+자바스크립트 파일에서 CSS를 임포트할 수 있는 이유는 자바스크립트의 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)의 컨셉을 Next.js가 확장했기 때문입니다.
+
+### `node_modules`에서 스타일을 임포트하기
 
-### Import styles from `node_modules`
+Next.js **9.5.4** 버전부터, 앱 안의 어디서든 `node_modules`의 CSS 파일을 임포트할 수 있습니다.
 
-Since Next.js **9.5.4**, importing a CSS file from `node_modules` is permitted anywhere in your application.
+`bootstrap` 혹은 `nprogress` 같은 전역 스타일시트를 이용하려면, `pages/_app.js` 안에 그 파일을 임포트해야합니다.
 
-For global stylesheets, like `bootstrap` or `nprogress`, you should import the file inside `pages/_app.js`.
-For example:
+예를 들어
 
 ```jsx filename="pages/_app.js"
 import 'bootstrap/dist/css/bootstrap.css'
@@ -260,7 +267,8 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-For importing CSS required by a third-party component, you can do so in your component. For example:
+서드파티 컴포넌트에 필요한 CSS를 임포트 할 경우 본인의 컴포넌트에 임포트할 수 있습니다.
+예를 들어
 
 ```jsx filename="components/example-dialog.js"
 import { useState } from 'react'
@@ -290,10 +298,10 @@ function ExampleDialog(props) {
 
 </PagesOnly>
 
-## Additional Features
+## 추가 기능
 
-Next.js includes additional features to improve the authoring experience of adding styles:
+Next.js는 스타일 작업 경험을 개선하기 위한 추가 기능들을 포함합니다.
 
-- When running locally with `next dev`, local stylesheets (either global or CSS modules) will take advantage of [Fast Refresh](/docs/architecture/fast-refresh) to instantly reflect changes as edits are saved.
-- When building for production with `next build`, CSS files will be bundled into fewer minified `.css` files to reduce the number of network requests needed to retrieve styles.
-- If you disable JavaScript, styles will still be loaded in the production build (`next start`). However, JavaScript is still required for `next dev` to enable [Fast Refresh](/docs/architecture/fast-refresh).
+- `next dev`로 로컬 실행 단계에서, 로컬 스타일시트(아니면 전역 혹은 CSS 모듈)은 수정된 스타일시트를 즉시 반영하게 해주는 [Fast Refresh](/docs/architecture/fast-refresh)를 사용할 수 있다는 것이 이점입니다.
+- `next build`로 프로덕션 배포를 위한 빌드단계에서, CSS 파일들은 스타일을 반환 받기 위해 필요한 네트워크 요청 수를 최소화 하기 위해 최소한의 갯수와 최소한의 용량으로 구성된 `css` 파일들로 번들링됩니다.
+- 자바스크립트를 비활성화할 경우에도, 스타일은 여전히 프로덕션 배포를 위한 빌드(`next start`)안에 로드 됩니다. 다만, [Fast Refresh](/docs/architecture/fast-refresh)를 사용하려면 `next dev`를 위한 자바스크립트가 여전히 필요합니다.