인라인 적용

**html 태그 안에서 css 코드를 직접 입력**한다.

• 가장 높은 우선순위를 가짐
• camelCase로 명시해야함

import React from 'react';
const Main = () => {
  return (
    <>
      <h3 
        style={{
          color: "yellow", 
          backgroundColor: "black"
        }}
      >안녕하세요. 이정호입니다.</h3>
    </>
  );

CSS 파일 작성 후 import

**별도의 CSS 파일을 작성한 후 import**한다.

• 케밥 케이스로 명시

.nameBox {
	color: yellow;
	background-color: black;
}

import React from 'react';
import "./Main.css";
const Main = () => {
  return (
    <>
      <h3 className="name_box">안녕하세요. 이정호 입니다.</h3>
    </>
  );
};

Sass 사용

Sass는 CSS를 보완 + 확장해서 **CSS 코드를 더욱 간결하고 효율적으로 작성**할 수 있음

/* sass */
$font-stack: Helvetica, sans-serif
#primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

/* scss */
$font-stack: Helventica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}