<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 : <span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 :<span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 :<span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
/* //cardtitle
document.querySelectorAll('.title')[0].innerHTML = products[0].title;
//jquery
$('.title').eq(0).html(products[0].title);
document.querySelectorAll('.title')[1].innerHTML = products[1].title;
document.querySelectorAll('.title')[2].innerHTML = products[2].title;
//price
document.querySelectorAll('.price')[0].innerHTML = products[0].price;
document.querySelectorAll('.price')[1].innerHTML = products[1].price;
document.querySelectorAll('.price')[2].innerHTML = products[2].price;
*/
for(let i = 0; i<products.length; i++){
document.querySelectorAll('.title')[i].innerHTML = products[i].title;
document.querySelectorAll('.price')[i].innerHTML = products[i].price;
}
</script>
</body>
