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

정리

<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만원"

        url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTQ9L2_3R7XaP-SReO-QqSVh0T23vn1AA5fiy5us3uF7yjWjgjkW7A1odr4kos6CfujWM&usqp=CAU"

      />

      <Item

        name="iPhone xr"

        price="100만원"

        url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZjHmNx7yAoh-dVx3C_QEU_zf0DQEspmxdjQ&usqp=CAU"

      />

    </div>

  );

}

export default App;