Styling

[학습 목표]
1. 컴포넌트를 스타일링 하는 방법을 숙지합니다.
2. 스타일링 실습을 성공적으로 완료합니다.

컴포넌트 스타일링

• CSS 치트시트
  • padding
  • display : flex
    • alignItems
    • justifyContent
  • gap
  • width, height
  • border
  • borderRadius
• 구현 결과

import React from "react";

const App = () => {
  const style = {
    padding: "100px",
    display: "flex",
    gap: "12px",
  };

  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;

컴포넌트 파일에서 CSS 코드 분리하기

먼저, 컴포넌트 파일에서 className 을 넣어줍니다. 그리고 이 컴포넌트에서 적용할 CSS 파일을 import 해줘야 해요. 경로가 무척 중요하니 잘 확인하시길 바랍니다.

// src/App.js
import React from "react";
import Square from "./components/Square.js";
import "./App.css"; // 🔥 반드시 App.css 파일을 import 해줘야 합니다.

function App() {
  const users = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ];

  return (
    <div className="app-style">
      {users.map((user) => {
        return <Square user={user} key={user.id} />;
      })}
    </div>
  );
}

export default App;

컴포넌트 파일에서 CSS를 분리하기

<!--src/App.css-->
.app-style {
  padding: 100px;
  display: flex;
  gap: 12px;
}