---

‼️  |   ERROR   |   반드시 수정해야 함

‼️  |   WARNING   |   무시해도 상관은 없음

---

🪄 div

일종의 박스 개념
하나의 큰 박스를 만들어주고 싶을 때 div를 사용하면 된다.

• div className : div에 스타일을 적용시켜주고 싶을 때 사용한다.
  - 우리가 일반적으로 아는 div class와 다르다는 것을 기억하자.

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

➥ App.css 파일 안에 등록되어 있는 App이라는 이름의 스타일을 가져와서 적용시킨다.

.App {
	text-align: center;
}

📍 import

• import './파일명.css'; : css 파일을 사용해주기 위해서는 파일명.js 상단에 import를 꼭 해주어야 한다!

import './App.css';

➥ 상위 폴더 중 App.css 파일을 불러온다는 의미이다.

---

문법 ①. class를 사용하고 싶을 땐 className

• <div className = "nav"> </div>

문법 ②. 중괄호 문법 (데이터 바인딩)

• {중괄호}: 변수에 저장되어 있는 문자(혹은 기타 자료들)를 html 사이에 넣고 싶으면 중괄호 문법을 사용하면 된다.

let a = 'hello world'
...
<h4> { a } </h4>
<h4 id = { a } > </h4>

➥ 둘의 코드는 같은 코드!

문법 ③. style은 오브젝트 자료 형식으로 사용

• style = { {스타일명: '값'} }

<h4 style={ {color:'white', fontsize:'16px'} }> nav입니다. </h4>

---

ex)

div를 이용해 navbar 만들기

App.css

.App{
	text-align: center;
}

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

App.js

import './App.css';

function App() {
  let a = 'nav'
  return (
    <div className="App">
      <div className="nav">
      <h4 style={ {color:'white', fontsize:'16px'} }> nav입니다. </h4>
      </div>

      <div>
        <p> 데이터 바인딩 사용하면! {a} </p>
      </div>
    </div>
  );
}

export default App;

---

🏷 Reference

코딩애플 React 강의