article thumbnail image
Published 2021. 8. 23. 17:47

웹 화면 구현하기

📱 Full-Stack

index.html

<html>
  <head>
    <title>Grab Market</title>
    <link href="index.css" type="text/css" rel="stylesheet"
  </head>
  <body>
    <div id="header"></div>
    <div id="body">
      <div id="banner">Banner Image</div>
      <h1>Sales Product</h1>
      <div id="product-list"></div>
    </div>
    <div id="footer"></div>
  </body>
</html>

 

index.css

#header {
  height: 64px;
  background-color: black;
}
#body {
  height: 100%;
  background-color: blue;
  width: 1024px;
  margin: 0 auto;
}
#footer {
  height: 200px;
  background-color: red;
}

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

 

1차 완성

index.html

<html>
  <head>
    <title>Grab Market</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>Sales Product</h1>
      <div id="product-list"></div>
    </div>
    <div id="footer"></div>
  </body>
</html>

 

html.css

body {
  margin: 0; /*디폴트 마진설정을 0으로*/
  padding: 0;
}

#header {
  height: 64px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid gray; /*선긋기*/
}
#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%; /*상위 div를 다 가져간다*/
  height: 300px;
}

 

html.index

<html>
  <head>
    <title>Grab Market</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 class="product-card">
          <div>
            <!---->
            <img class="product-img" src="images/products/basketball1.jpeg" />
          <div/>
          <div class="product-contents">
            <!--span은 text쓸 때 사용, 줄바꿈 안된다. 영역이 나눠지지않음-->
            <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>
        <div class="product-card">
          <div>
            <!---->
            <img class="product-img" src="images/products/keyboard1.jpg" />
          <div/>
          <div class="product-contents">
            <!--span은 text쓸 때 사용, 줄바꿈 안된다. 영역이 나눠지지않음-->
            <span class="product-name">키보드 1호</span>
            <span class="product-price">30000원</span>
            <div class="product-seller">
              <img class="product-avatar" src="images/icons/avatar.png" />
              <span>그랩</span>
            </div>
          </div>
        </div>
        <div class="product-card">
          <div>
            <!---->
            <img class="product-img" src="images/products/keyboard2.jpg" />
          <div/>
          <div class="product-contents">
            <!--span은 text쓸 때 사용, 줄바꿈 안된다. 영역이 나눠지지않음-->
            <span class="product-name">키보드 2호</span>
            <span class="product-price">350000원</span>
            <div class="product-seller">
              <img class="product-avatar" src="images/icons/avatar.png" />
              <span>그랩</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

 

index.css

* {
  /*모든 태그에 대해서*/
  margin: 0; /*디폴트 마진설정을 0으로*/
  padding: 0;
}

#header {
  height: 64px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid gray; /*선긋기*/
}
#body {
  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%; /*상위 div를 다 가져간다*/
  height: 300px;
}

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

#product-list {
  display: flex;
  flex-wrap: wrap; /*width를 유지한채로 자기들 끼리 줄바꿈
  안해주면 width를 자기들이 알아서 줄여버린다.*/
  margin-top: 12px;
}
.product-card {
  width: 180px;
  height: 300px;
  margin-right: 12px; /*제품 간격 떨어지게*/
  margin-bottom: 12px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 12px; /*둥글둥글하게 보이게*/
}

.product-img {
  width: 180px;
  height: 210px;
}

.product-contents {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.product-name {
  font-size: 14px;
}
.product-price {
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
}

.product-seller {
  display: flex; /*수평정렬*/
  align-items: center; /*가운데 정렬*/
  margin-top: 12px;
}

.product-avatar {
  width: 24px;
}

'📱 Full-Stack' 카테고리의 다른 글

리액트  (0) 2021.09.18
javascript  (0) 2021.09.15
CSS  (0) 2021.08.18
html  (0) 2021.08.18
복사했습니다!

티스토리툴바