CSS module

global style 작성

• 전체 웹사이트의 background color나 font를 지정하고 싶을 수 있다.
• Reset CSS 적용하는 경우

styles/global.css

• 오로지 global로 적용할 style만 작성한다.
• css module은 아니고 일반적인 css파일이다.
• root에 있는 layout에 import "../styles/global.css" 선언

css module 작성법

1. .module.css 확장자로 작성한다.
2. 일반적인 tags를 위한 CSS코드를 생성하는 방식으로 작성하는게아닌 classname만 작성한다.
   nav(x) .nav(o)
3. 사용시에는 className="nav" 이렇게 작성하지않는다. 충돌이 발생할 수도 있고 class들이 겹칠 수 있다.
4. javascript 파일인 것처럼 import한다.

import styles from '../styles/navigation.module.css"

이 styles는 우리의 classname들을 보유한 javascript object인것처럼 사용한다.

<div className={styles.nav}>

실제로 inspect해서 요소 class이름을 보면 위와 같이 특별한 이름으로 지정된 것을 볼 수 있다. random한 text를 갖기때문에 class의 충돌이 발생할 수 없다.