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

➡️ 지역 스타일 입히기

// app/page.module.css
.list {
  list-style: none;
}

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

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

// app/page.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>
  )
}

➡️ 전역 스타일 입히기

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

이렇게 선언한 파일을 layout.tsx 파일에 불러온다.

// app/layout.tsx
import './globals.css'

// ...