인프런 커뮤니티 질문&답변
작성한 질문수
적용하기 2 듣는중에 막혀서 질문드립니다.
작성
·
247
0
코드를 작성하고 이미지가 나오지 않습니다.
잘못된 부분이 있을까요?
<html>
<head>
<title>그랩마켓</title>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
<div id="header-area">
<img src="images/icons/logo.png" />
</div>
</div>
<div id="body">
<div id="banner">
<img src="images/banners/banner1.png" />
</div>
<h1>판매되는 상품들</h1>
<div id="product-list"></div>
</div>
<div id="footer"></div>
</body>
<script>
var products = [
{
name: "농구공",
price: 100000,
seller: "조던",
imageUrl: "/images/products/basketball1.jpeg",
},
{
name: "축구공",
price: 50000,
seller: "메시",
imageUrl: "/images/products/soccerball1.jpg",
},
{
name: "키보드",
price: 10000,
seller: "그랩",
imageUrl: "/images/products/keyboard1.jpg",
},
];
document.querySelector("#priduct-list").innerHTML =
'<div class="product-card">' +
"<div>" +
'<img class="product-img" src="images/products/basketball1.jpeg" />' +
"</div>" +
'<div class="product-contents">' +
'<span class="product-name">농구공 1호</span>' +
'<span class="product-price">50000원</span>' +
'<div class="product-seller">' +
'<img class="product-avatar" src="images/icons/avatar.png" />' +
"<span>그랩</span>" +
"</div>" +
"</div>" +
"</div>;";
</script>
</html>
해당 코드를 보시면 pridict-list로 오타가 보입니다. product-list로 변경해주셔야 브라우저에서 정상적으로 해당 태그를 읽을 수 있습니다!
document.querySelector("#priduct-list").innerHTML =