리액트 레이아웃 만들 때 쓰는 JSX문법

import logo from './logo.svg';
import './App.css';   -> App.css에 있는 내용을 가지고 오게끔 한다.

function App() {

  let post = "강남 우동 맛집"

  return (
    <div className="App">
     <div className ="black-nav">  ->css파일에 black-nav라는 css 속성을 가지고 올 때 
      <h4 style={{color:'red', fontSize :'16px'}}>블로그임</h4>
      -> css 파일에 적지 않아도, 자체적으로 css 줄 수 있음
      style ={{ }} 형식은 이렇게 된다. 자료형이기 떄문에 {}추가

     </div>
     <h4>{post}</h4>  -> 중괄호를 쳐주고, 변수를 가지고 올 수 있다.
    </div>
  );
}

export default App;

(App.css)

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