CSS Modules

• JS 파일처럼 import 하면, CSS가 적용된다.
• 클래스 내부에 요소에 css를 적용하기 위해서는, 요소 앞에 반드시 클래스 명을 써 주어야 한다.

.nav ul {
    display: flex;
}

return (
        <nav className={styles.nav}>
            <ul>
                <li>
                    <Link href="/">Home</Link> {path === "/" ? "🔥":""}
                </li>
                <li>
                    <Link href="/about-us">About Us</Link>{path === "/about-us" ? "🔥":""}
                </li>
                <li>
                    <button onClick={()=>setCount((c) => c+1)}>{count}</button>
                </li>
            </ul>
        </nav>
    );

폴더 구조

styles라는 폴더 안에 모두 모아도 되고, component 양이 많다면 폴더별로 따로 구성해도 좋다.

css 파일명은 항상 이름.module.css 이어야 한다.