3. React - CSS 만들기

ㅁ css 만들기 3가지 방법

---

1. css

import World from './World';

export default function Hello(){

    return(

        <div>

            <h1 style={

                {

                    color : '#f00',

                    borderRight : '2xp solid #000',     // 주위사항  border-Right - 사용하면 오류 발생

                    marginBottom : '30px',  

                    opacity : 0.5,

                }

            }>Hello</h1>

            <World />

            <World />

        </div>

    );

}

---

2. css

Hello.js 컨포넌트 Hello.css 생성

Hello.css

.box{

    width: 100px;

    height: 100px;

    background-color: crimson;

}

Hello.js

import World from './World';

import './Hello.css';       // Hello.css import

export default function Hello(){

    return(

        <div>

            <h1 style={

                {

                    color : '#f00',

                    borderRight : '2xp solid #000',     // 주위사항  border-Right - 사용하면 오류 발생

                    marginBottom : '30px',  

                    opacity : 0.5,

                }

            }>Hello</h1>

            <World />

            <World />

            <div className="box">App</div>

        </div>

    );

}

---

3. css

ㅇ 모듈 css 생성

Hello.module.css  // module 만드는 이름 해당 컴포넌트 이름 . module . css 

.box{

    width: 100px;

    height: 100px;

    background-color: crimson;

}

Hello.js

import World from './World';

import './Hello.css';       // Hello.css import

import styles from './Hello.module.css';    // module

export default function Hello(){

    return(

        <div>

            <h1 style={

                {

                    color : '#f00',

                    borderRight : '2xp solid #000',     // 주위사항  border-Right - 사용하면 오류 발생

                    marginBottom : '30px',  

                    opacity : 0.5,

                }

            }>Hello</h1>

            <World />

            <World />

            <div className="box">App</div> 

            <div className={styles.box}>App</div> 

        </div>

    );

}

---

4. css 전역(React 실행 js 공통 css) module

App.module.css

.box{

    width: 100px;

    height: 100px;

    background-color: crimson;

}

App.js

import './App.css';

import Hello from './component/Hello';  // Hello component 추가

import Welcom from './component/Welcom';

import styles from './App.module.css';

function App() {

  return (

    <div className="App">

      <Hello />

      <Welcom />

      <div className={styles.box}>App css Module</div>

    </div>

  );

}

export default App;

---