[Next.js] 전역 CSS

CSS 모듈은 구성 요소 수준 스타일에 유용합니다.

그러나 모든 페이지에서 일부 CSS를 로드 하는 경우도 Next.js에서도 지원합니다.

 

전역 CSS 파일을 로드하려면 pages/_app.js에서 설정합니다.

_app.js는 다른 모든 페이지에서 공통적으로 사용하는 최상위 구성 요소입니다.

예를 들어 _app.js를 사용하여 페이지 사이트를 탐색 할 때 상태를 유지 할 수 있습니다.

 

❗pages/_app.js에 내용을 수정 할 때는 Ctrl+c로 서버를 중지 시킨 후 npm run dev로 다시 실행 시켜야 합니다.

---

전역 CSS 추가

 

Next.js에서는 전역 CSS 파일을 pages/_app.js에 가져와 추가 할 수 있습니다.

다른 곳에서는 전역 CSS를 가져 올 수 없습니다.

 

전역 CSS를 다른 곳에서 사용 할 수 없는 이유는 pages/_app.js가 페이지의 모든 요소에 영향을 미치기 때문입니다.

 

전역 CSS 파일을 사용하여 다음을 수행 해보겠습니다.

- styles 디렉토리에 globals.css로 접근 합니다.

- styles/globals.css에서 a 태그의 색상을 변경하는 CSS 코드를 작성합니다.

---

Learn | Next.js