# 페이지 스타일 입히기

이번 강의는 Next.js 강의이기 때문에 스타일은 최소한만 입힙니다. [스타일링](/friendly-next-js/next.js-1/undefined-3.md)에서 배운 CSS Modules와 전역 스타일을 이용해 봅시다.

### CSS Modules

`.module.css`라는 확장자 파일을 하나 만들어줍니다.

{% code title="app/page.module.css" %}

```css
.list {
  list-style: none;
}

.list li {
  font-size: 14px;
  margin-bottom: 4px;
}
```

{% endcode %}

 앞서 선언한 파일을 불러와 컴포넌트에 사용합니다.

{% code title="app/page.tsx" %}

```tsx
import s from './page.module.css'

export default function Home() {
  return (
    <ul className={s.list}>
      <li>
        <Link href="/Seoul">서울</Link>
      </li>
      <li>
        <Link href="/London">런던</Link>
      </li>
      <li>
        <Link href="/Paris">파리</Link>
      </li>
    </ul>
  )
}
```

{% endcode %}

### 전역 스타일링

홈과 상세에서 모두 사용하는 몇가지 요소를 전역에서 스타일링 해보겠습니다.&#x20;

{% code title="app/global.css" %}

```css
button {
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  color: white;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  background-color: green;
}
```

{% endcode %}

이렇게 선언한 파일을 `layout.tsx` 파일에 불러오면 끝입니다.

{% code title="app/layout.tsx" %}

```tsx
import './globals.css'

// ...
```

{% endcode %}

그 외에 몇가지 컴포넌트에 스타일을 적용하면서 자신만의 디자인을 입혀봐도 좋겠네요!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://book.hajoeun.dev/friendly-next-js/next.js-2/undefined-4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.