1. html에 class 넣을 땐 className
// (App.js...)
import './App.css';
function App() {
return (
<div className="App">
<div className="black-nav">
<h4>블로그임</h4>
</div>
</div>
);
}
export default App;/* (App.css...) */
.black-nav {
background : black;
width : 100%;
display : flex;
color : white;
padding : 20px;
}2. 변수를 html에 넣고 싶다면 { 중괄호 }
import "./App.css";
function App() {
let post = "강남 우동 맛집";
return (
<div className="App">
<div className="black-nav">
<div>블로그임</div>
<div>{post}</div>
</div>
</div>
);
}
export default App;
강남 우동 맛집
이라고 출력이 된다.
href, id, className, src 등 여러가지 html 속성들에도 가능합니다.
function App(){
var data = 'red';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
<div className={data}>안녕하세요</div>
</div>
</div>
)
}위처럼 쓰면
이 된다.
이것을 데이터바인딩 이라고 한다.
3. html에 style속성을 넣고 싶다면
태그에 인라인 방식으로 스타일을 지정하고 싶다면
JSX 상에서는 style={ } 안에 자료형 { } 자료형으로 집어넣어야합니다.
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>이와 같이 작성해야 합니다.
- { 속성명: ‘속성값’ }
- font-size 처럼 속성명에 대시기호를 쓸 수 없습니다.
fontSize 와 같이 카멜기법으로 작성해 줘야합니다.
