34. (CSS) 에어비앤비 홈페이지 만들기

박은서

Jan 08, 2026

Contents

1. 문제 2. 풀이 3. 정답 1️⃣ 뼈대 만들기 2️⃣ 레이아웃 3️⃣ 디자인

1. 문제

아래와 같은 화면을 출력하시오.

blog.naver.com

https://blog.naver.com/getinthere/221576015779

2. 풀이


<!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>
      .whole {
        display: grid;
        justify-content: center;
      }
      .airbnb {
        width: 1000px;
      }
      header {
        padding: 15px;
        background-image: url(background.jpg);
        background-size: cover;
        height: 600px;
        display: grid;
        grid-template-rows: max-content 1fr;
      }
      .header_top {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }
      .header_menu {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
        column-gap: 25px;
      }
      .header_text {
        color: white;
        font-size: 15px;
      }
      .header_reservation {
        width: 280px;
        margin-top: 50px;
        margin-left: 30px;
        background-color: white;
        border-radius: 10px;
        padding: 30px 20px 30px 20px;
      }
      .reservation_title {
        width: 80%;
        font-size: 24px;
        color: rgb(68, 68, 68);
        font-weight: 600;
      }
      .reservation_text {
        font-size: 13px;
        color: rgb(68, 68, 68);
        font-weight: 500;
      }
      table {
        width: 100%;
      }
      input {
        width: 98%;
        height: 30px;
        border: 1px solid rgb(204, 204, 204);
      }
      .btn_box1 {
        display: grid;
        justify-content: end;
      }
      .reservation_btn {
        width: 60px;
        height: 35px;
        border: none;
        border-radius: 5px;
        font-size: 15px;
        color: white;
        background-color: rgb(255, 94, 94);
      }
      .title {
        font-size: 25px;
        font-weight: 700;
        color: rgb(87, 87, 87);
      }
      .subtitle {
        font-size: 16px;
        font-weight: 500;
        color: rgb(87, 87, 87);
      }
      .nav_menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 5px;
      }
      .nav_items {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border-radius: 5px;
        border: 1px solid rgb(185, 185, 185);
        box-shadow: 1px 1px 1px 1px rgb(209, 209, 209);
      }
      .nav_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .menu_box {
        display: grid;
        align-items: center;
      }
      .menu_name {
        font-size: 15px;
        font-weight: 500;
        padding-left: 5px;
      }
      .img1 {
        height: 300px;
      }
      .ima_ad1 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
      }
      .trip_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        column-gap: 5px;
        height: 250px;
        background-color: beige;
      }
      .trip_places {
        display: grid;
        grid-template-rows: 4fr 1fr;
      }
      .choo1 {
        background-image: url(choo1.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo2 {
        background-image: url(choo2.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo3 {
        background-image: url(choo3.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo4 {
        background-image: url(choo4.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo5 {
        background-image: url(choo5.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .city {
        display: grid;
        justify-content: center;
        align-items: end;
        color: white;
        font-size: 20px;
        font-weight: 500;
      }
      .price {
        display: grid;
        justify-content: center;
        color: white;
        font-size: 15px;
        font-weight: 400;
      }
      .img2 {
        height: 250px;
        display: grid;
        align-items: end;
        background-image: url(ad2.png);
        background-position: center;
      }
      .btn_box2 {
        display: grid;
        justify-content: center;
        margin-bottom: 60px;
      }
      .hotel_btn {
        width: 140px;
        height: 50px;
        background-color: white;
        border: none;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 500;
      }
      .hotel_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 5px;
      }
      .hotel_img {
        height: 150px;
      }
      .home_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .hotel_subtitle {
        color: gray;
        font-size: 13px;
      }
      .hotel_title {
        font-size: 17px;
        font-weight: 600;
      }
      .review_box {
        display: grid;
        grid-template-columns: max-content max-content max-content;
        column-gap: 5px;
      }
      .star {
        color: green;
        font-size: 13px;
      }
      .num_host {
        color: gray;
        font-size: 13px;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .mb10 {
        margin-bottom: 10px;
      }
      .mt20 {
        margin-top: 20px;
      }
      .mt10 {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="whole">
      <div class="airbnb">
        <header>
          <div class="header_top">
            <div>
              <div class="header_text">௹</div>
            </div>
            <div class="header_menu">
              <div class="header_text">호스트가 되어보세요</div>
              <div class="header_text">도움말</div>
              <div class="header_text">회원가입</div>
              <div class="header_text">로그인</div>
            </div>
          </div>
          <div class="header_box">
            <div class="header_reservation">
              <div class="reservation_title mb20">
                특색 있는 숙소와 즐길 거리를 예약하세요.
              </div>
              <div>
                <table>
                  <tr>
                    <td class="reservation_text" colspan="2">목적지</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <input type="text" placeholder="모든 위치" />
                    </td>
                  </tr>
                  <tr>
                    <td class="reservation_text">체크인</td>
                    <td class="reservation_text">체크아웃</td>
                  </tr>
                  <tr>
                    <td><input type="date" /></td>
                    <td><input type="date" /></td>
                  </tr>
                  <tr>
                    <td class="reservation_text" colspan="2">인원</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <input type="text" placeholder="인원" />
                    </td>
                  </tr>
                </table>
              </div>
              <div class="btn_box1 mt10">
                <button class="reservation_btn">검색</button>
              </div>
            </div>
          </div>
        </header>
        <nav>
          <div class="title mt20 mb10">에어비앤비 둘러보기</div>
          <div class="nav_menu">
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card1.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">숙소 및 부티크 호텔</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card2.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">트립</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card3.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">어드벤처</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card4.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">레스토랑</div>
              </div>
            </div>
          </div>
        </nav>
        <main>
          <section>
            <div class="img1 mt20 mb20">
              <img class="ima_ad1" src="ad1.jpg" />
            </div>
          </section>
          <section>
            <div class="title mb10">추천 여행지</div>
            <div class="trip_box">
              <div class="trip_places choo1">
                <div class="city">파리</div>
                <div class="price">1박 평균 ₩131,641</div>
              </div>
              <div class="trip_places choo2">
                <div class="city">도쿄</div>
                <div class="price">1박 평균 ₩103,762</div>
              </div>
              <div class="trip_places choo3">
                <div class="city">런던</div>
                <div class="price">1박 평균 ₩149,512</div>
              </div>
              <div class="trip_places choo4">
                <div class="city">로스앤젤레스</div>
                <div class="price">1박 평균 ₩159,646</div>
              </div>
              <div class="trip_places choo5">
                <div class="city">바르셀로나</div>
                <div class="price">1박 평균 ₩127,166</div>
              </div>
            </div>
          </section>
          <section>
            <div class="title mt20">에어비앤비 플러스를 만나보세요!</div>
            <div class="subtitle mb10">
              퀄리티와 인테리어 디자인이 검증한 숙소 셀렉션
            </div>
            <div class="img2">
              <div class="btn_box2">
                <button class="hotel_btn">숙소 둘러보기 ></button>
              </div>
            </div>
          </section>
          <section>
            <div class="title mt20 mb10">전 세계 숙소</div>
            <div class="hotel_box">
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home1.png" />
                </div>
                <div class="hotel_subtitle">오두막·BALIAN BEACH, BALI</div>
                <div class="hotel_title">BALIAN TREEHOUSE w beautiful pool</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">185</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home2.png" />
                </div>
                <div class="hotel_subtitle">키클라데스 주택·이아(OIA)</div>
                <div class="hotel_title">Unique Architecture Cave House</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">188</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home3.png" />
                </div>
                <div class="hotel_subtitle">
                  성·트웬티나인 팜스(TWENTYNINE PALMS)
                </div>
                <div class="hotel_title">Tile House</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">367</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home4.png" />
                </div>
                <div class="hotel_subtitle">검증됨·케이프타운</div>
                <div class="hotel_title">
                  Modern, Chic Penthouse with Mountain, City & Sea Views
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">177</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home5.png" />
                </div>
                <div class="hotel_subtitle">아파트 전체·마드리드(MADRID)</div>
                <div class="hotel_title">솔광장에 위치한 개인 스튜디오</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">459</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home6.png" />
                </div>
                <div class="hotel_subtitle">집 전체·HUMAC</div>
                <div class="hotel_title">
                  Vacation house in etno-eco village Humac
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">119</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home7.png" />
                </div>
                <div class="hotel_subtitle">개인실·마라케시</div>
                <div class="hotel_title">The Cozy Palace</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">559</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home8.png" />
                </div>
                <div class="hotel_subtitle">
                  게스트용 별채 전체·로스앤젤레스
                </div>
                <div class="hotel_title">
                  Private Pool House with Amazing Views!
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">170</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  </body>
</html>

3. 정답

1️⃣ 뼈대 만들기

1) Header


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box"></div>
      </div>
    </header>
  </body>
</html>

1-1) Header > search_box


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
  </body>
</html>

2) Main


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
        <div class="around_box"></div>
        <div class="cho_box"></div>
        <div class="ad_box"></div>
        <div class="home_box"></div>
    </main>
  </body>
</html>

2-1) 둘러보기


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box"></div>
      <div class="ad_box"></div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

2-2) 추천 여행지


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box"></div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

2-3) 광고

➡️ 이미지 위에 버튼 만들거면 absolute

이미지 백그라운드 배경으로 하면 나중에 html에서 for문 돌릴 수 없어서 잘 안함!


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

)


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

2️⃣ 레이아웃

1) header


<!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;
      }
      
      header {
        height: 880px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }
      
      .logo {
        display: grid;
        align-items: center;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

2) around_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

3) cho_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

4) ad_box

레이아웃 변경하지 않아도 됨

5) home_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }

      .home_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

3️⃣ 디자인


<!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>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      div {
        border: 1px solid black;
        padding: 10px;
      }

      header {
        height: 820px;
        background-image: url(static/images/background.jpg);
        background-size: cover;
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .logo {
        display: grid;
        align-items: center;
        color: white;
        font-size: 35px;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
        column-gap: 10px;
      }

      .menus > div {
        color: white;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
        background-color: white;
        padding: 20px;
      }

      .search_title {
        font-size: 30px;
        font-weight: 600;
        color: rgb(85, 85, 85);
      }

      .search_subtitle {
        font-size: 12px;
        font-weight: 600;
        color: rgb(85, 85, 85);
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search_box input,
      select {
        height: 35px;
        border: 1px solid gray;
        border-radius: 3px;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      .search3 button {
        background-color: #ff5a5f;
        color: white;
        width: 70px;
        height: 45px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 6px;
        border: 0;
        cursor: pointer;
      }

      main {
        padding: 0px 50px;
      }

      .main_title {
        font-size: 20px;
        font-weight: 600;
        color: rgb(68, 66, 66);
        margin: 0 0 20px 0;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 100px auto;
      }

      .img_item {
        height: 100px;
      }

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

      .around_text {
        display: grid;
        align-items: center;
      }

      .around_pic {
        height: 300px;
      }

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

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }

      .cho_item {
        height: 250px;
        position: relative;
      }

      .ghost {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
        color: white;
        font-size: 17px;
        font-weight: 500;
      }

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

      .home_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">
          <svg
            viewBox="0 0 1000 1000"
            role="presentation"
            aria-hidden="true"
            focusable="false"
            style="
              height: 1em;
              width: 1em;
              display: inline-block;
              fill: currentcolor;
            "
          >
                                
            <path
              d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"
            >
                                  
            </path>
                            
          </svg>
        </div>
        <div class="menus">
          <div>호스트가 되어보세요</div>
          <div>도움말</div>
          <div>회원가입</div>
          <div>로그인</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option class="search_subtitle">인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div class="around_pic">
          <img src="/airbnb/static/images/ad1.jpg" />
        </div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">
            <div class="ghost">파리</div>
            <img src="/airbnb/static/images/choo1.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">도쿄</div>
            <img src="/airbnb/static/images/choo2.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">런던</div>
            <img src="/airbnb/static/images/choo3.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">로스앤젤레스</div>
            <img src="/airbnb/static/images/choo4.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">바르셀로나</div>
            <img src="/airbnb/static/images/choo5.png" />
          </div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

⚠️ 나머지는 알아서 만들어보기!

Contents

1. 문제 2. 풀이 3. 정답 1️⃣ 뼈대 만들기 2️⃣ 레이아웃 3️⃣ 디자인

Practice

34. (CSS) 에어비앤비 홈페이지 만들기

박은서

Jan 08, 2026

Contents

1. 문제 2. 풀이 3. 정답 1️⃣ 뼈대 만들기 2️⃣ 레이아웃 3️⃣ 디자인

1. 문제

아래와 같은 화면을 출력하시오.

blog.naver.com

https://blog.naver.com/getinthere/221576015779

2. 풀이


<!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>
      .whole {
        display: grid;
        justify-content: center;
      }
      .airbnb {
        width: 1000px;
      }
      header {
        padding: 15px;
        background-image: url(background.jpg);
        background-size: cover;
        height: 600px;
        display: grid;
        grid-template-rows: max-content 1fr;
      }
      .header_top {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }
      .header_menu {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
        column-gap: 25px;
      }
      .header_text {
        color: white;
        font-size: 15px;
      }
      .header_reservation {
        width: 280px;
        margin-top: 50px;
        margin-left: 30px;
        background-color: white;
        border-radius: 10px;
        padding: 30px 20px 30px 20px;
      }
      .reservation_title {
        width: 80%;
        font-size: 24px;
        color: rgb(68, 68, 68);
        font-weight: 600;
      }
      .reservation_text {
        font-size: 13px;
        color: rgb(68, 68, 68);
        font-weight: 500;
      }
      table {
        width: 100%;
      }
      input {
        width: 98%;
        height: 30px;
        border: 1px solid rgb(204, 204, 204);
      }
      .btn_box1 {
        display: grid;
        justify-content: end;
      }
      .reservation_btn {
        width: 60px;
        height: 35px;
        border: none;
        border-radius: 5px;
        font-size: 15px;
        color: white;
        background-color: rgb(255, 94, 94);
      }
      .title {
        font-size: 25px;
        font-weight: 700;
        color: rgb(87, 87, 87);
      }
      .subtitle {
        font-size: 16px;
        font-weight: 500;
        color: rgb(87, 87, 87);
      }
      .nav_menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 5px;
      }
      .nav_items {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border-radius: 5px;
        border: 1px solid rgb(185, 185, 185);
        box-shadow: 1px 1px 1px 1px rgb(209, 209, 209);
      }
      .nav_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .menu_box {
        display: grid;
        align-items: center;
      }
      .menu_name {
        font-size: 15px;
        font-weight: 500;
        padding-left: 5px;
      }
      .img1 {
        height: 300px;
      }
      .ima_ad1 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
      }
      .trip_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        column-gap: 5px;
        height: 250px;
        background-color: beige;
      }
      .trip_places {
        display: grid;
        grid-template-rows: 4fr 1fr;
      }
      .choo1 {
        background-image: url(choo1.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo2 {
        background-image: url(choo2.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo3 {
        background-image: url(choo3.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo4 {
        background-image: url(choo4.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .choo5 {
        background-image: url(choo5.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .city {
        display: grid;
        justify-content: center;
        align-items: end;
        color: white;
        font-size: 20px;
        font-weight: 500;
      }
      .price {
        display: grid;
        justify-content: center;
        color: white;
        font-size: 15px;
        font-weight: 400;
      }
      .img2 {
        height: 250px;
        display: grid;
        align-items: end;
        background-image: url(ad2.png);
        background-position: center;
      }
      .btn_box2 {
        display: grid;
        justify-content: center;
        margin-bottom: 60px;
      }
      .hotel_btn {
        width: 140px;
        height: 50px;
        background-color: white;
        border: none;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 500;
      }
      .hotel_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 5px;
      }
      .hotel_img {
        height: 150px;
      }
      .home_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .hotel_subtitle {
        color: gray;
        font-size: 13px;
      }
      .hotel_title {
        font-size: 17px;
        font-weight: 600;
      }
      .review_box {
        display: grid;
        grid-template-columns: max-content max-content max-content;
        column-gap: 5px;
      }
      .star {
        color: green;
        font-size: 13px;
      }
      .num_host {
        color: gray;
        font-size: 13px;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .mb10 {
        margin-bottom: 10px;
      }
      .mt20 {
        margin-top: 20px;
      }
      .mt10 {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="whole">
      <div class="airbnb">
        <header>
          <div class="header_top">
            <div>
              <div class="header_text">௹</div>
            </div>
            <div class="header_menu">
              <div class="header_text">호스트가 되어보세요</div>
              <div class="header_text">도움말</div>
              <div class="header_text">회원가입</div>
              <div class="header_text">로그인</div>
            </div>
          </div>
          <div class="header_box">
            <div class="header_reservation">
              <div class="reservation_title mb20">
                특색 있는 숙소와 즐길 거리를 예약하세요.
              </div>
              <div>
                <table>
                  <tr>
                    <td class="reservation_text" colspan="2">목적지</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <input type="text" placeholder="모든 위치" />
                    </td>
                  </tr>
                  <tr>
                    <td class="reservation_text">체크인</td>
                    <td class="reservation_text">체크아웃</td>
                  </tr>
                  <tr>
                    <td><input type="date" /></td>
                    <td><input type="date" /></td>
                  </tr>
                  <tr>
                    <td class="reservation_text" colspan="2">인원</td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <input type="text" placeholder="인원" />
                    </td>
                  </tr>
                </table>
              </div>
              <div class="btn_box1 mt10">
                <button class="reservation_btn">검색</button>
              </div>
            </div>
          </div>
        </header>
        <nav>
          <div class="title mt20 mb10">에어비앤비 둘러보기</div>
          <div class="nav_menu">
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card1.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">숙소 및 부티크 호텔</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card2.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">트립</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card3.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">어드벤처</div>
              </div>
            </div>
            <div class="nav_items">
              <div>
                <img class="nav_img" src="card4.jpg" />
              </div>
              <div class="menu_box">
                <div class="menu_name">레스토랑</div>
              </div>
            </div>
          </div>
        </nav>
        <main>
          <section>
            <div class="img1 mt20 mb20">
              <img class="ima_ad1" src="ad1.jpg" />
            </div>
          </section>
          <section>
            <div class="title mb10">추천 여행지</div>
            <div class="trip_box">
              <div class="trip_places choo1">
                <div class="city">파리</div>
                <div class="price">1박 평균 ₩131,641</div>
              </div>
              <div class="trip_places choo2">
                <div class="city">도쿄</div>
                <div class="price">1박 평균 ₩103,762</div>
              </div>
              <div class="trip_places choo3">
                <div class="city">런던</div>
                <div class="price">1박 평균 ₩149,512</div>
              </div>
              <div class="trip_places choo4">
                <div class="city">로스앤젤레스</div>
                <div class="price">1박 평균 ₩159,646</div>
              </div>
              <div class="trip_places choo5">
                <div class="city">바르셀로나</div>
                <div class="price">1박 평균 ₩127,166</div>
              </div>
            </div>
          </section>
          <section>
            <div class="title mt20">에어비앤비 플러스를 만나보세요!</div>
            <div class="subtitle mb10">
              퀄리티와 인테리어 디자인이 검증한 숙소 셀렉션
            </div>
            <div class="img2">
              <div class="btn_box2">
                <button class="hotel_btn">숙소 둘러보기 ></button>
              </div>
            </div>
          </section>
          <section>
            <div class="title mt20 mb10">전 세계 숙소</div>
            <div class="hotel_box">
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home1.png" />
                </div>
                <div class="hotel_subtitle">오두막·BALIAN BEACH, BALI</div>
                <div class="hotel_title">BALIAN TREEHOUSE w beautiful pool</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">185</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home2.png" />
                </div>
                <div class="hotel_subtitle">키클라데스 주택·이아(OIA)</div>
                <div class="hotel_title">Unique Architecture Cave House</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">188</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home3.png" />
                </div>
                <div class="hotel_subtitle">
                  성·트웬티나인 팜스(TWENTYNINE PALMS)
                </div>
                <div class="hotel_title">Tile House</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">367</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home4.png" />
                </div>
                <div class="hotel_subtitle">검증됨·케이프타운</div>
                <div class="hotel_title">
                  Modern, Chic Penthouse with Mountain, City & Sea Views
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">177</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home5.png" />
                </div>
                <div class="hotel_subtitle">아파트 전체·마드리드(MADRID)</div>
                <div class="hotel_title">솔광장에 위치한 개인 스튜디오</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">459</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home6.png" />
                </div>
                <div class="hotel_subtitle">집 전체·HUMAC</div>
                <div class="hotel_title">
                  Vacation house in etno-eco village Humac
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">119</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home7.png" />
                </div>
                <div class="hotel_subtitle">개인실·마라케시</div>
                <div class="hotel_title">The Cozy Palace</div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">559</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
              <div class="mb20">
                <div class="hotel_img">
                  <img class="home_img" src="home8.png" />
                </div>
                <div class="hotel_subtitle">
                  게스트용 별채 전체·로스앤젤레스
                </div>
                <div class="hotel_title">
                  Private Pool House with Amazing Views!
                </div>
                <div class="review_box">
                  <div class="star">★★★★★</div>
                  <div class="num_host">170</div>
                  <div class="num_host">슈퍼호스트</div>
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  </body>
</html>

3. 정답

1️⃣ 뼈대 만들기

1) Header


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box"></div>
      </div>
    </header>
  </body>
</html>

1-1) Header > search_box


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
  </body>
</html>

2) Main


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
        <div class="around_box"></div>
        <div class="cho_box"></div>
        <div class="ad_box"></div>
        <div class="home_box"></div>
    </main>
  </body>
</html>

2-1) 둘러보기


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box"></div>
      <div class="ad_box"></div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

2-2) 추천 여행지


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box"></div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

2-3) 광고

➡️ 이미지 위에 버튼 만들거면 absolute

이미지 백그라운드 배경으로 하면 나중에 html에서 for문 돌릴 수 없어서 잘 안함!


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box"></div>
    </main>
  </body>
</html>

)


<!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>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">검색 제목</div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div><input type="text" placeholder="모든 위치" /></div>
            <div>
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div>
              <div><input type="date" /></div>
              <div><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div>
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div>
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

2️⃣ 레이아웃

1) header


<!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;
      }
      
      header {
        height: 880px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }
      
      .logo {
        display: grid;
        align-items: center;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</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>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

2) around_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

3) cho_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div>
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

4) ad_box

레이아웃 변경하지 않아도 됨

5) home_box


<!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;
      }
      header {
        height: 820px;
        background-color: beige;
        /* background-image: url(static/images/background.jpg);
        background-size: cover; */
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      main {
        padding: 0px 50px;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }

      .around_text {
        display: grid;
        align-items: center;
      }

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }

      .home_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">logo</div>
        <div class="menus">
          <div>m1</div>
          <div>m2</div>
          <div>m3</div>
          <div>m4</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option>인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div>img</div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div>img</div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div>이미지</div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
          <div class="cho_item">그림</div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

3️⃣ 디자인


<!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>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      div {
        border: 1px solid black;
        padding: 10px;
      }

      header {
        height: 820px;
        background-image: url(static/images/background.jpg);
        background-size: cover;
      }

      nav {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .logo {
        display: grid;
        align-items: center;
        color: white;
        font-size: 35px;
      }

      .nav_body {
        padding: 30px 0px;
      }

      .menus {
        display: grid;
        grid-template-columns: max-content max-content max-content max-content;
        column-gap: 10px;
      }

      .menus > div {
        color: white;
      }

      .search_box {
        width: 500px;
        position: relative;
        left: 50px;
        background-color: white;
        padding: 20px;
      }

      .search_title {
        font-size: 30px;
        font-weight: 600;
        color: rgb(85, 85, 85);
      }

      .search_subtitle {
        font-size: 12px;
        font-weight: 600;
        color: rgb(85, 85, 85);
      }

      .input_box {
        display: grid;
        grid-template-columns: auto;
      }

      .search_box input,
      select {
        height: 35px;
        border: 1px solid gray;
        border-radius: 3px;
      }

      .search1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .search3 {
        display: grid;
        justify-content: end;
      }

      .search3 button {
        background-color: #ff5a5f;
        color: white;
        width: 70px;
        height: 45px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 6px;
        border: 0;
        cursor: pointer;
      }

      main {
        padding: 0px 50px;
      }

      .main_title {
        font-size: 20px;
        font-weight: 600;
        color: rgb(68, 66, 66);
        margin: 0 0 20px 0;
      }

      .around_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .around_item {
        display: grid;
        grid-template-columns: 100px auto;
      }

      .img_item {
        height: 100px;
      }

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

      .around_text {
        display: grid;
        align-items: center;
      }

      .around_pic {
        height: 300px;
      }

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

      .cho_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }

      .cho_item {
        height: 250px;
        position: relative;
      }

      .ghost {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
        color: white;
        font-size: 17px;
        font-weight: 500;
      }

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

      .home_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">
          <svg
            viewBox="0 0 1000 1000"
            role="presentation"
            aria-hidden="true"
            focusable="false"
            style="
              height: 1em;
              width: 1em;
              display: inline-block;
              fill: currentcolor;
            "
          >
                                
            <path
              d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"
            >
                                  
            </path>
                            
          </svg>
        </div>
        <div class="menus">
          <div>호스트가 되어보세요</div>
          <div>도움말</div>
          <div>회원가입</div>
          <div>로그인</div>
        </div>
      </nav>
      <div class="nav_body">
        <div class="search_box">
          <div class="search_title">
            특색 있는 숙소와 즐길<br />
            거리를 예약하세요
          </div>
          <div class="search_subtitle">목적지</div>
          <form action="#">
            <div class="input_box">
              <input type="text" placeholder="모든 위치" />
            </div>
            <div class="search1">
              <div class="search_subtitle">체크인</div>
              <div class="search_subtitle">체크아웃</div>
            </div>
            <div class="search2">
              <div class="input_box"><input type="date" /></div>
              <div class="input_box"><input type="date" /></div>
            </div>
            <div class="search_subtitle">인원</div>
            <div class="input_box">
              <select>
                <option class="search_subtitle">인원</option>
                <option>1</option>
                <option>2</option>
              </select>
            </div>
            <div class="search3">
              <button>검색</button>
            </div>
          </form>
        </div>
      </div>
    </header>
    <main>
      <div class="around_box">
        <div class="main_title">에어비앤비 둘러보기</div>
        <div class="around_list">
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">숙소 및 부티크 호텔</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">트립</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">어드벤처</div>
          </div>
          <div class="around_item">
            <div class="img_item">
              <img src="/airbnb/static/images/card1.jpg" />
            </div>
            <div class="around_text">레스토랑</div>
          </div>
        </div>
        <div class="around_pic">
          <img src="/airbnb/static/images/ad1.jpg" />
        </div>
      </div>
      <div class="cho_box">
        <div class="main_title">추천 여행지</div>
        <div class="cho_list">
          <div class="cho_item">
            <div class="ghost">파리</div>
            <img src="/airbnb/static/images/choo1.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">도쿄</div>
            <img src="/airbnb/static/images/choo2.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">런던</div>
            <img src="/airbnb/static/images/choo3.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">로스앤젤레스</div>
            <img src="/airbnb/static/images/choo4.png" />
          </div>
          <div class="cho_item">
            <div class="ghost">바르셀로나</div>
            <img src="/airbnb/static/images/choo5.png" />
          </div>
        </div>
      </div>
      <div class="ad_box">
        <div class="main_title">에어비앤비 플러스를 만나보세요!</div>
        <div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
        <div>그림</div>
      </div>
      <div class="home_box">
        <div class="main_title">전 세계 숙소</div>
        <div class="home_list">
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
          <div class="home_item">
            <div>그림</div>
            <div>
              <div>오두막 BALIAN BEACH, BALI</div>
              <div>BALIAN TREEHOUSE w beautiful pool</div>
              <div>
                <span>★★★★★</span>
                <span>185 슈퍼호스트</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

⚠️ 나머지는 알아서 만들어보기!

Contents

1. 문제 2. 풀이 3. 정답 1️⃣ 뼈대 만들기 2️⃣ 레이아웃 3️⃣ 디자인