[복습용] 컴포넌트의 태그에 CSS 적용

컴포넌트에 포함되는 태그에 CSS 를 적용하는 방법

(1) 태그에 직접 인라인 스타일로 적용하는 방법. 이 때, CSS 문법에서의 대쉬 "-"를 쓰지 않고, 카멜케이스로 적어야 한다. (예: border-right 대신에 borderRight 로 적는다 ) 하지만 큰 프로젝트에서는 적용하기 힘든 방법이다.

export default function Component () {
	return (
    	<div>
        	<p style={
            	{
                	color: 'red',
                    borderRight: '2px solid #000',
                    backgroundColor: 'blue',
                    marginBottom: '30px',
                    opacity: 1,
                }
            }>
            	Hello
            </p>
        </div>
    );
}

(2) 컴포넌트별 css 모듈을 작성하고 이용하는 방법.
Hello.js 모듈에서 사용할 css 는 Hello.module.css 파일에 작성한다.
css 파일이 header 에서 중복되는 문제를 해결할 수 있다.

/* Hello.module.css */
.box {
    width: 200px;
    height: 50px;
    background-color: blueviolet;
}

// Hello.js
import styles from "./Hello.module.css";

export default function Hello () {
	return (
    	<div>
        	<p className={styles.box}> 
            	Hello 
            </p>
        </div>
    );
}