Css분리

//App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app-wrap">
      <div className="app-item">감자</div>
      <div className="app-item">고구마</div>
      <div className="app-item">오이</div>
      <div className="app-item">가지</div>
      <div className="app-item">옥수수</div>
    </div>
  );
}

export default App;

//App.css

.app-wrap {
  //내부 간격주기
  padding: 100px;
  //배치방식, 가로방향
  display: flex;
  //안의 요소들 사이의 거리
  gap: 12px;
}

.app-item {
  //가로
  width: 100px;
  //세로
  height: 100px;
  //경계선처리
  border: 1px solid lightgreen;
  //경계선 구석 둥글게
  border-radius: 10px;
  //배치방식, 가로방향
  display: flex;
  //수직축 방향 정렬, 가운데정렬
  align-items: center;
  //메인축 방향 정렬, 가운데정렬
  justify-content: center;
}

Css를 선언하는 곳이아닌 사용하는 곳에서는

import "./~~~.css" 필수!