NextJS 시작 #5 | CSS Module

NextJs 어플리케이션에 CSS를 추가하는 방법은 아주 많다

• 태그에 그냥 스타일을 주는 것
• CSS module 사용
• 등등

module

1. 컴포넌트파일이름.module.css 파일 생성
2. 해당 컴포넌트파일에 import styles from "./NavBar.module.css"; 와 같이 import
3. 컴포넌트의 요소에 <nav className={styles.nav}> 와 같이 클래스네임 지정
4. 3과 같이 지정한 클래스네임은 브라우저에서 동작할때 랜덤문자열과 함께 클래스네임이 지정된다
   • 컴포넌트간 클래스네임 중복을 방지해줘서 파일 단위로 중복된 클래스네임 사용 가능
5. 한 요소에 두 개이상의 클래스 네임을 지정하고 싶은 경우 백틱을 사용하거나 배열을 사용하여 join 으로 한칸 띄어서 문자열이 되게 한다.
6. module 외에 클래스네임을 아예 사용하지 않는 CSS 방법도 존재한다. 다음 글에서 알아보자

참조

코드스테이츠 프론트엔드 부트캠프