카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

product-img에 속성을 넣으려고 했는데 오류가 나요

21.12.19 17:40 작성 조회수 139

<html>

  <head>
    <title>그랩마켓</title>
    <link href="index.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div id="header">
      <div id="header-area">
        <img
          src="C:\Users\82104\Desktop\learn javascript\grab-market\images\icons\logo.png"
        />
      </div>
    </div>
    <div id="body">
      <div id="banner">
        <img
          src="C:\Users\82104\Desktop\learn javascript\grab-market\images\banners\banner1.png"
        />
      </div>
      <h1>판매되는 상품들</h1>
      <div id="product-list">
        <div class="product-card">
          <div>
            <img
              class="product-img"
              src="C:\Users\82104\Desktop\learn javascript\grab-market\images\products\basketball1.jpeg"
            />
          </div>
        </div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
}

#header {
  height: 64px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid;
}

#body {
  min-height: 100%;
  width: 1024px;
  margin: 0 auto;
  padding-bottom: 24px;
}

#footer {
  height: 200px;
  background-color: red;
}

#banner {
  height: 300px;
  background-color: yellow;
}

#header-area {
  width: 1024px;
  height: 100%;
  display: flex;
  align-items: center;
}

#header-area > img {
  width: 128px;
  height: 36px;
}

#banner > img {
  width: 100%;
  height: 300px;
}

#body > h1 {
  margin-top: 16px;
}

#product-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}
.product-card {
  width: 180px;
  height: 300px;
  background-color: gray;
  margin-left: 12px;
  margin-bottom: 12px;
}

.product-img {
}