Css(style) 파일 적용하기(Global, Module)

 

Nextjs Css 적용 기초 수준 Ex

 

Nextjs는 global css와 module css방식을 사용한다.

global은 전체에 영향을 주는 범위이고,
module은 부분적 영역에 영향을 주는 범위 차이가 있다.

 

Global적용

'/pages/_app.tsx'파일에서만 적용가능. import '../styles/globals.css'

import '../styles/globals.css'
import type { AppProps } from 'next/app'

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

 

Module적용

'style/Home.module.css'파일 처럼, 파일 확장자를 'Xxx.module.css'로 된 파일만 적용가능.

'pages/index.tsx'에 import styles from '../styles/Home.module.css'로 적용되어 있다.

import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

...

return (
	<main className={styles.main}>
        <div className={styles.description}>
		...
);