🏷️ globals.css

globals.css 파일은 이름 그대로 layout.js에 import 되는 글로벌 스타일이다.

이를 import 하는 방식은 기존 JS 및 React의 방식과 동일하다.

🏷️ .module.css

원하는 컴포넌트에 스타일을 입히고 싶을 때는 파일명.module.css 형태로 파일을 만들어야 한다.

CSS 파일을 작성하는 방식은 기존과 동일하지만, 스타일을 JS에 적용하는 방식은 일반적인 JS 파일에서 사용하는 방식과는 조금 다르다.

우선 다음과 같이 CSS 파일을 import 한 후,

import classes from "./main-header.module.css";

이렇게 객체 형태로 CSS를 적용해야 한다.

<Link className={classes.logo} href="/">
  <Image src={logoImg} alt="A plate with food on it" priority />
</Link>

점 표기법으로 접근이 불가능한 이름일 경우, 다음과 같이, 대괄호 표기법으로도 접근이 가능하다.

<div className={classes["header-background"]}>