[React] 리액트 컴포넌트에 CSS 파일 적용하기

컴포넌트에 CSS 적용하기

 1. style (Inline) 속성

function Nav() {
    return (
        <nav>
            <ul style={{				// 중괄호 두개 연달아 사용
                border: '1px solid red',
            }}>
                <li><a href='1.html'>HTML</a></li>
                <li><a href='2.html'>CSS</a></li>
                <li><a href='3.html'>JavaScript</a></li>
            </ul>
        </nav>
    )
}

 

 2. module 적용

// App.module.css //            // module 단어 필수

.border {
border: 1px solid red;
}

import styles from './App.module.css';
...
function Nav() {
    return (
        <nav>
            <ul className={styles.border}>                 // classname = {변수.태그이름 }
                <li><a href='1.html'>HTML</a></li>
                <li><a href='2.html'>CSS</a></li>
                <li><a href='3.html'>JavaScript</a></li>
            </ul>
        </nav>
    )
}
...