html 마크업과 products 배열은 써놓고 시작했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>data binding</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600" />
<div class="card-body">
<h5 id="title">Card title</h5>
<p id="price">가격 : 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 id="title">Card title</h5>
<p id="price">가격 : 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 id="title">Card title</h5>
<p id="price">가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script>
let products = [
{ id: 0, price: 90000, title: 'Blossom Dress' },
{ id: 1, price: 50000, title: 'Springfield Shirt' },
{ id: 2, price: 60000, title: 'Black Monastery' },
];
const title = document.querySelectorAll('#title');
const price = document.querySelectorAll('#price');
for (let i = 0; i < title.length; i++) {
title[i].innerHTML = `${products[i].title}`;
price[i].innerHTML = `가격 : ${products[i].price}원`;
}
</script>
</body>
</html>
프론트엔드 개발하는 사람