카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

footer가 상품카드 쪽을 침범해서 문의드립니다..ㅜ

21.12.11 20:01 작성 조회수 487

/*html*/
 
<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>
        <div class="product-card"></div>
        <div class="product-card"></div>
        <div class="product-card"></div>
        <div class="product-card"></div>
        <div class="product-card"></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 {
  height: 100%;
  width: 1024px;
  margin: 0 auto;
}

#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-card {
  width: 180px;
  height: 300px;
  background-color: gray;
}