[ React 기초 ] spuare 만들기

index.jsx

import "./square.style.css";

const Square = () => {
  return <div className="square" />;
};

export default Square;

square.style.css

.square {
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  background-color: blue;
}

1. jsx파일에서 div 로 square를 생성
2. css파일을 import해서 css입혀서 네모를 생성한다.

App.js

import "./App.css";
import Square from "./components/Square";

function App() {
  console.log("hello");

  return (
    <div className="App">
      <Square />
    </div>
  );
}

export default App;

App.css

.App {
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. App안에 export한 square를 넣고, app으로 CSS를 주어 중앙에 배치한다.

[ CSS 문법 ]

• width: 100vw; (view with의 100)
• height: 100vh; (view height 100)

중앙에 놓기

• display: flex;
• justify-content: center;
• align-items: center
  부모태그 App에 줌으로써 요소를 중앙에 놓을 수 있다.