5️페이지 스타일 입히기

이번 강의는 Next.js 강의이기 때문에 스타일은 최소한만 입힙니다. 스타일링에서 배운 CSS Modules와 전역 스타일을 이용해 봅시다.

CSS Modules

.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'

// ...

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