ㅁ 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;
'Frame-Work > React-JS' 카테고리의 다른 글
6. React - props(속성값) (0) | 2021.05.18 |
---|---|
5. React - State, useState(상태값) (0) | 2021.05.18 |
4. React - 이벤트 처리(Handing Events) (0) | 2021.05.18 |
2. React - Component 만들기 (0) | 2021.05.18 |
1. React 프로젝트 기본구조 (0) | 2021.05.18 |
댓글