JSX 문법은 3개가 끝

상단 메뉴 만들어보기

import './App.css'

function App() {
  return (
      <div className='App'>
        <div className="black-nav">
          <h4>블로그임</h4>
        </div>
      </div>
  );
}

export default App

.App {
  text-align:center;
}

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

JSX 문법 1.

class 넣을 땐 className

<div className="black-nav">
	<h4>블로그임</h4>
</div>

JSX 문법 2.

변수넣을 땐 {중괄호}

⇒ 데이터바인딩

<h4>{ post }</h4>

JSX 문법 3.

style 넣을 땐 style={ {스타일명 : ‘값’} }

<h4 style={ {color : 'red', fontSize : '16px'} }>블로그임</h4>

참고

에러메시지는 터미널/브라우저에서 확인