CSS 작성법(module css)

1. Inline Style

객체, 카멜케이스

function App() {
  return (
    <div className="App">
      <h1 style={{
        color: "red",
        borderTop: "20px solid #000",
        marginBottom: "50px",
        opacity: 0.5,
      }}>Hello</h1>
    </div>
  );
}

export default App;

2. styles

className={styles.box}로 갖고 올 경우 새로운 클래스가 생성됨
css가 겹치지 않음!

1. 컴포넌트명.module.css 파일 생성(.module 은 필수인 듯?)
   

2. import styles from "./컴포넌트명.module.css"
   

3. className={styles.클래스명}
   

4. 결과