[NEXT.JS] #4 CSS STYLING (1)

이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다.

[NEXT.JS] #3 pages와 페이지 이동

module.css

첫번째로 .module.css로 생성된 css파일을 import하여 내부의 class를 적용하는 방법을 사용했다.

방장은 next.js 14버전을 사용했기 때문에 하위 버전과 사용법이 다를 수 있다.

components/NavBar.module.css

.active {
    color: tomato;
}

 

components/NavBar.js

import Link from "next/link";
import styles from './NavBar.module.css'
import {useRouter} from "next/router";

export default function NavBar() {
    const router = useRouter()
    return (
        <nav>
            <Link className={router.pathname === '/' ? styles.active: ''} href='/'>home</Link>
            <Link className={router.pathname === '/test' ? styles.active: ''} href='/test'>test</Link>
        </nav>
    )
}

 

router pathname이 /일 때는 home 의 color를, /test일 경우에는 test의 color에 css를 적용하도록 했다.

 

이어서 두 개의 css를 한 element에 적용하는 방법이다.

components/NavBar.module.css

.active {
    color: tomato;
}

.link {
    text-decoration: none;
}

 

components/NavBar.js

import Link from "next/link";
import styles from './NavBar.module.css'
import {useRouter} from "next/router";

export default function NavBar() {
    const router = useRouter()
    return (
        <nav>
            <Link className={[styles.link, router.pathname === '/' ? styles.active: ''].join(' ')} href='/'>home</Link>
            <Link className={[styles.link, router.pathname === '/test' ? styles.active: ''].join(' ')} href='/test'>test</Link>
        </nav>
    )
}

 

위와 같이 두 개의 class를 배열 형태로 묶고 join하면 두 가지 css를 모두 적용할 수 있다.