https://www.youtube.com/watch?v=-1auqB4hvus&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=5

🔍 React에서 CSS를 적용하는 세 가지 방법

1. Inline Style 적용

객체 형식으로 작성한다.
여기서 주의할 점은
1) 카멜케이스를 사용한다.
2) px같은 단위가 들어가는 숫자는 '' / ""를 사용하며, 숫자만 사용할경우 사용하지 않아도 된다.

<h1
  style={{
    color: "#f00",
    borderRight: "2px solid #000",
    marginBottom: "30px",
    opacity: 0.5,
 }}
>

2. React app 생성시 기본으로 있는 css파일 사용

index.css는 전체 프로젝트, App.css는 App 컴포넌트에 관련된 코드가 적혀져 있으나..

사실 App.css는 App 컴포넌트에만 적용되는 것이 아니다.

컴포넌트.css 파일과 App.css에 각각 다른 색상의 박스를 만들면
App.css파일의 박스 색상으로 덮어지는것을 확인할 수 있다.

이는 css들이 각 컴포넌트에 종속되는게 아니라
Head에 들어가 전 페이지에 영향을 미치기 때문이다.

3. 각 컴포넌트별로 특화된 module.css 사용

1. module.css 생성

Componentname.module.css

컴포넌트이름.module.css라는 이름의 css파일을 만든다.

여기서 컴포넌트 이름의 첫 글자는 대문자로 적어준다.

2. import

import styles from "파일경로"

해당 컴포넌트.js 파일에서 import 한다.

3. className 수정

기존에는 <div className="classname">처럼 문자열로 표기하였지만,
이제는 아래처럼 표기해준다.

<div className={styles.classname}></div>