0. 부트스트랩틀을 가져온다.
1. 데이터에 해당하는 키값을 (가격,상품명등)을 자바스크립트로 조작해줌
2. 배열안에 객체가 있는 경우에는, 배열안에서 그 객체의 순서를 먼저 찾고, 키를 찾는다
products[i]['title']
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<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 < Object.keys(products).length; i++){
document.querySelectorAll('h5')[i].textContent = products[i]['title'];
document.querySelectorAll('p')[i].textContent = '가격:'+products[i]['price'];
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 자바스크립트로 html 다루기 (0) | 2023.03.20 |
|---|---|
| 셔츠 사이즈 선택하는 옵션만들기 (select input 다루기) (0) | 2023.03.20 |
| 이벤트 버블링 (0) | 2023.03.20 |
| 반복문으로 탭기능 만들기 (0) | 2023.03.20 |
| 스크롤 이벤트로 만드는 재밌는 기능들 (0) | 2023.03.19 |
