[Docs]전역 스타일 적용하기

Global Styles

전역 CSS를 로드하고 싶다면 , 다음 내용으로 pages/_app.js라는 파일을 만들자:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

 

App 컴포넌트는 애플리케이션의 모든 페이지를 감싸는 최상위 React 컴포넌트이다.

페이지 간 이동시 상태를 유지하고 싶거나 전역 스타일을 추가하고 싶다면 활용된다.

_app.js를 추가할 때는 개발 서버를 꼭 다시 시작해야 한다.

 

 

전역 CSS 추가하기

오직 pages/_app.js에서만 전역 CSS 파일을 추가할 수 있다. 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문이다.
홈에서 /posts/first-post 페이지로 이동하는 경우 홈의 글로벌 스타일이 의도치 않게 /posts/first-post에 영향을 줄 수 있다.

 

전역 CSS 파일의 위치나 이름은 어떻게 해도 상관없고, 다음과 같이 진행해 보자.

• 최상위 styles 디렉토리를 만들고 그 안에 global.css를 생성한다.
• 다음 CSS를 추가한다. 일부 스타일을 재설정하고 a 태그의 색상을 변경하는 코드다:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

 

마지막으로, _app.js 파일에 CSS 파일을 import 한다:

 

// `pages/_app.js`
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

 

이제 http://localhost:3000/posts/first-post에 접속하면 스타일이 적용된 것을 확인할 수 있다.

_app.js에서 가져온 모든 스타일이 애플리케이션의 모든 페이지에 전역적으로 적용된다.

 

 

Quick Review: Where can you import global CSS files? Only inside pages/_app.js