Styling

Styling

 

 

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  const style = {
    padding : "100px",
    display: "flex", // 수평
    gap: "10px", // 간격
  };

  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <div style={style}>
      <div style={squareStyle}>감자</div>
      <div style={squareStyle}>고구마</div>
      <div style={squareStyle}>오이</div>
      <div style={squareStyle}>가지</div>
      <div style={squareStyle}>옥수수</div>
    </div>
  );
}

export default App;

공통 객체 squareStyle 적용

---

위 파일을 css 파일로 별도 분리 할 꺼임.

 

App.js

import logo from './logo.svg';
import './App.css';

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

export default App;

 

App.css

.app-style {
  padding: 100px;
  display: flex;
  gap: 10px;
}

.component-style {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}