데이터바인딩 하기

    <div class="card-group container">
      <div class="card">
        <img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>Card title</h5>
          <p>가격 : 70000</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>Card title</h5>
          <p>가격 : 70000</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
      <div class="card">
        <img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>Card title</h5>
          <p>가격 : 70000</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>

    <script>
      var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];

      for (let i = 0; i < products.length; i++) {
        document.querySelectorAll(".card-body h5")[i].innerHTML =
          products[i].title;
        document.querySelectorAll(".card-body p")[i].innerHTML =
          "가격 : " + products[i].price;
      }
    </script>