1. 완성할 것 (박스 확인)

image.png

2. 뼈대 만들기

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
      </div>
    </div>
  </body>
</html>

3. 레이아웃 하기

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>사진<br /><br /></div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
      </div>
    </div>
  </body>
</html>

4. 디자인하기

<https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80>

<https://a0.muscache.com/4ea/air/v2/pictures/a77ee672-e790-4362-8cc5-52bec1371ece.jpg?t=r:w375-h250-sfit,e:fjpg-c80>

<https://a0.muscache.com/4ea/air/v2/pictures/38f2bfd6-1f4d-46d7-babf-61657deef302.jpg?t=r:w375-h250-sfit,e:fjpg-c80>

<https://a0.muscache.com/4ea/air/v2/pictures/da2d8e97-90b7-409f-94ac-5ab0327c289b.jpg?t=r:w375-h250-sfit,e:fjpg-c80>

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border: 1px solid rgb(187, 184, 184);
        border-radius: 5px;
        box-shadow: 5px 5px 0px 0px rgb(185, 183, 183);
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mb10 {
        margin-bottom: 10px;
      }

      .mt5 {
        margin-top: 5px;
      }
      main {
        display: grid;
        justify-content: center;
      }
      section {
        width: 1000px;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <div class="title">에어비앤비 둘러보기</div>
        <div class="grid_box mt5">
          <div class="grid_item">
            <div>
              <img
                src="<https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80>"
              />
            </div>
            <div class="content">숙소 및 호텔</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="<https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80>"
              />
            </div>
            <div class="content">트립</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="<https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80>"
              />
            </div>
            <div class="content">어드벤처</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="<https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80>"
              />
            </div>
            <div class="content">레스토랑</div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>