[NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css)

 

CSS 사용 방법

 

  1. 첫번째 방법 : css module 사용

 

  2. 두번째 방법 : global.css 사용

 

  3. 파일의 위치

 

  4. suspense & streamed Response를 이용한 세분화 로딩상태 관리

---

상세

  1. 첫번째 방법 : css module 사용

: 일반적인 표준 css 이지만, css 파일에 특정한 이름을 지정함으로 특정 컴포넌트로 스코핑.
=> module.css를 import 하면 그 파일들로부터 객체를 불러올 수 있다

 

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

main-header.js (컴포넌트)에 적용할 css 파일을 경로 depth가 동일할 수 있게 생성해주고, import 해준다.

 <Link className={classes.logo} />

'classes' 라고 명명한 객체를 불러다가, 해당 key를 작성해줌으로 사용합니다.

---

 

  2. 두번째 방법 : global.css 사용

: global.css는 프로젝트 root 경로에 존재하는 파일 (따라서 전역적으로 style의 적용이 이뤄진다.)

<main className="error"></main>

=> root depth가 아닌 곳에서 이를 사용하기 위해서는 위와 같이 

=> className="~~~" (double quote) 사용을 해주면 된다.