# 페이지 스타일 입히기

이번 강의는 Next.js 강의이기 때문에 스타일은 최소한만 입힙니다. [스타일링](https://book.hajoeun.dev/friendly-next-js/next.js-1/undefined-3)에서 배운 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 %}

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