🪁react/react 실습

bootStrap 사용해보기[자신감up 실습5]

하얀성 2024. 1. 28. 14:56

정리

<div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

 

bootStrap쓰면 항상 나오던 이 문장. 가장 작을 때는 가로 세로 1개만, small 사이즈는 가로세로 2개, ....가로세로3개..

이런식으로 쓴 것이다. grid인데 일정 원하는 비율로 이미지를 구성해주는 기능이 있다. 

렌더링 내용

코드

 

url 내용은 길어서 몇개 지웠다. 

mport "./App.css";
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

function Item(props) {
  return (
    <div class="card">
      <img src={props.url} class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{props.name}</h5>
        <p class="card-text">
          {props.price}
          <br></br>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
      <Item
        name="iPhone 12"
        price="100만원"
        url=""
      />
      <Item
        name="iPhone se"
        price="111만원"
        url=""
      />
      <Item
        name="iPhone 7"
        price="200만원"
        url=""
      />
      <Item
        name="iPhone 13"
        price="210만원"
        url=""
      />
      <Item
        name="iPhone 6s"
        price="100만원"
      />
      <Item
        name="iPhone xr"
        price="100만원"
      />
    </div>
  );
}

export default App;