HTML/CSS

[HTML/CSS]15.Airbnb 만들기

손영민's avatar
손영민
Mar 12, 2025
[HTML/CSS]15.Airbnb 만들기
Contents
1.에어비엔비 뼈대 만들기2.에어비엔비 레이아웃 잡기3.css 디자인 하기

1.에어비엔비 뼈대 만들기

notion image
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
      }

      .root {
        display: grid;
        justify-content: center;
      }

      .container {
        width: 100%;
        height: 500px;
      }

      .container2 {
        width: 90%;
        height: 
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="container1">
        <div class="백그라운드 사진">백그라운드 사진
        </div>
        <div class="header">
          <div class="header-logo">로고</div>
          <div class="header-menu">메뉴</div>
        </div>
        <div class="reservation window">
          예약
          <div class="reservation-item">목적지</div>
          <div class="reservation-item">목적지 인풋</div>
          <div class="reservation-item">체크인</div>
          <div class="reservation-item">체크아웃</div>
          <div class="reservation-item">인원</div>
          <div class="reservation-item">검색</div>
        </div>
        </div>
        <div class="container2">
        <div class="browse">
          에어비엔비 둘러보기
          <div class="browse-item">
            <div class="browse-item-img">이미지</div>
            <div class="browse-item-text">텍스트</div>
          </div>
          <div class="browse-item">
            <div class="browse-item-img">이미지</div>
            <div class="browse-item-text">텍스트</div>
          </div>
          <div class="browse-item">
            <div class="browse-item-img">이미지</div>
            <div class="browse-item-text">텍스트</div>
          </div>
          <div class="browse-item">
            <div class="browse-item-img">이미지</div>
            <div class="browse-item-text">텍스트</div>
          </div>
          <div class="배너사진">
            배너사진
        </div>

          <div class="recommend">
            추천 여행지

            <div class="recommend-item">
              <div class="browse-item-img">이미지</div>
              <div class="browse-item-text">텍스트</div>
            </div>

            <div class="recommend-item">
              <div class="recommend-item-img">이미지</div>
              <div class="recommend-item-text">텍스트</div>
            </div>

            <div class="recommend-item">
              <div class="recommend-item-img">이미지</div>
              <div class="recommend-item-text">텍스트</div>
            </div>

            <div class="recommend-item">
              <div class="recommend-item-img">이미지</div>
              <div class="recommend-item-text">텍스트</div>
            </div>

            <div class="recommend-item">
              <div class="recommend-item-img">이미지</div>
              <div class="recommend-item-text">텍스트</div>
            </div>

            </div>
            <div class="에어비엔비 플러스">
                에어비엔비 플러스
                내용
                <div class="배너사진">
                <div class="가운데 버튼">가운데 버튼</div>
                </div>

                <div class="전세계 숙소">전세계 숙소
                    <div class="전세계 숙소 이미지">이미지</div>
                    <div class="전세계 숙소 주소">주소</div>
                    <div class="전세계 숙소 숙소명">숙소명</div>
                    <div class="전세계 숙소 평점">평점</div>
                </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2.에어비엔비 레이아웃 잡기

notion image
notion image
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }

      .root {
        display: grid;
        justify-content: center;
      }

      .container1 {
        width: 100%;
        height: 500px;
      }

      .container2 {
        display: grid;
        width: 90%;
      }

      .header {
        display: flex;
        justify-content: space-between;
      }

      .browse {
        display: flex;
        justify-content: space-between;
      }

      .recommend {
        display: flex;
        justify-content: space-between;
      }

      .전세계숙소모음 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="container1">
        백그라운드 사진
        <div class="header">
          <div class="header-logo">로고</div>
          <div class="header-menu">메뉴</div>
        </div>
        <div class="reservation window">
          예약
          <div class="reservation-item">목적지</div>
          <div class="reservation-item">목적지 인풋</div>
          <div class="reservation-item">체크인</div>
          <div class="reservation-item">체크아웃</div>
          <div class="reservation-item">인원</div>
          <div class="reservation-item">검색</div>
        </div>
      </div>
      <div class="browse-title">에어비엔비 둘러보기</div>
      <div class="browse">
        <div class="browse-item">
          <div class="browse-item-img">이미지</div>
          <div class="browse-item-text">텍스트</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">이미지</div>
          <div class="browse-item-text">텍스트</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">이미지</div>
          <div class="browse-item-text">텍스트</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">이미지</div>
          <div class="browse-item-text">텍스트</div>
        </div>
      </div>
      <div class="배너사진">배너사진</div>
      <div class="recommend-title">추천 여행지</div>
      <div class="recommend">
        <div class="recommend-item">
          <div class="browse-item-img">이미지</div>
          <div class="browse-item-text">텍스트</div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">이미지</div>
          <div class="recommend-item-text">텍스트</div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">이미지</div>
          <div class="recommend-item-text">텍스트</div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">이미지</div>
          <div class="recommend-item-text">텍스트</div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">이미지</div>
          <div class="recommend-item-text">텍스트</div>
        </div>
      </div>
      <div class="에어비엔비 플러스">
        에어비엔비 플러스 내용
        <div class="배너사진">
          <div class="가운데 버튼">가운데 버튼</div>
        </div>
        <div class="전세계숙소제목">전세계 숙소</div>
        <div class="전세계숙소모음">
          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>

          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">이미지</div>
            <div class="전세계 숙소 주소">주소</div>
            <div class="전세계 숙소 숙소명">숙소명</div>
            <div class="전세계 숙소 평점">평점</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 
 

3.css 디자인 하기

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        padding: 10px;
      }

      .background-imgage {
        width: 100%;
        background-image: url(background.jpg);
        background-size: cover;
        background-position: center;
      }

      .root {
        display: grid;
        justify-content: center;

      }

      .container1 {
        width: 100%;
        width: 1500px;
        height: 1000px;
      }

      .header-menu-item {
        display: inline-block;
        margin-right: 10px;
        color: white;
      }

      .reservationwindow {
        position: relative;
        margin-top: 100px;
        margin-left: 50px;
        padding: 20px;
        width: 33%;
        height: 500px;
        background-color: white;
        border-radius: 10px;
      }

      .reservation-item{
        display: grid;
        grid-template-columns: 1fr;
        height: 20px;
      }


      .reservation-item-1 {
        display: grid;
        grid-template-columns: 4fr 5fr;
      }

      .reservation-item-2 {
        width: 60%;
        display: flex;
        justify-content: space-between;
      }

      .reservation-item3 {
        position: absolute;
        right: 20px;
        bottom: 30px;
      }

      .button1 {
        background-color: rgb(255, 74, 74);
        color: white;
        border-radius: 5px;
        width: 60px;
        height: 40px;
      }

      .container2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 75px;
        width: 90%;
      }

      .header {
        display: flex;
        justify-content: space-between;
      }
      

      .browse {     
        border: 1px solid black;
        border-radius: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .browse-item{
        display: flex;
        border: 1px solid black;
        border-radius: 10px;
        margin-right: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .browse-item-img{
        width: 80px;
        height: 80px;
      }
      
      .browse-item-text{
        font-weight: bold;
        width: 120px;
        height: 40px;
      }

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

      .recommend {
        display: flex;
        justify-content: space-between;
      }

      .전세계숙소모음 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      
      .전세계숙소주소{
          font-size: 12px;
      } 

      .전세계숙소숙소명{
        font-size: 25px;
      }

      .전세계숙소평점{
        display: flex;
      }

      .전세계숙소평점이미지{
        width: 50px;
        height: 10px; 
      }


    </style>
  </head>
  <body>
    <div class="root">
      <div class="background-imgage">
        <div class="container1">
          <div class="header">
            <div class="header-logo"><svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 3em; width: 3em; 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="header-menu">
              <div class="header-menu-item">호스트가 되어보세요</div>
              <div class="header-menu-item">도움말</div>
              <div class="header-menu-item">회원가입</div>
              <div class="header-menu-item">로그인</div>
            </div>
          </div>
          <div class="reservationwindow">
            <h1>특색 있는 숙소와 즐길 거리를 예약하세요.</h1>
            <div class="reservation-item">목적지</div>
            <div class="reservation-item">
              <input type="text" placeholder="모든 위치" />
            </div>

            <div class="reservation-item-2">
              <div class="reservation-item-2-item">체크인</div>
              <div class="reservation-item-2-item">체크아웃</div>
            </div>
            <div class="reservation-item-1">
              <input type="date" placeholder="연도-월-일" />
  
              <input type="date" placeholder="연도-월-일" />
            </div>
            <div class="reservation-item">인원</div>
            <div class="reservation-item">
              <input type="number" placeholder="인원" />
            </div>
            <div class="reservation-item3">
              <button class="button1">검색</button>
            </div>
          </div>
        </div>
      </div>
      <div class="container2">
        <div class="browse-title"><h2>에어비엔비 둘러보기</h2></div>
        <div class="browse">
          <div class="browse-item">
          <div class="browse-item-img">
            <img src="card1.jpg" alt="숙소 및 부티크 호텔">
          </div>
          <div class="browse-item-text">숙소 및 부티크 호텔</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">
            <img src="card2.jpg" alt="트립">
          </div>
          <div class="browse-item-text">트립</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">
            <img src="card3.jpg" alt="어드벤처">
          </div>
          <div class="browse-item-text">어드벤처</div>
        </div>
        <div class="browse-item">
          <div class="browse-item-img">
            <img src="card4.jpg" alt="레스토랑">
          </div>
          <div class="browse-item-text">레스토랑</div>
        </div>
      </div>
      <div class="배너사진">
        <img src="ad1.jpg" alt="배너사진">
      </div>
      <div class="recommend-title"><h2>추천 여행지</h2></div>
      <div class="recommend">
        <div class="recommend-item">
          <div class="recommend-item-img">
            <img src="choo1.png" alt="파리">
          </div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">
            <img src="choo2.png" alt="도쿄">
          </div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">
            <img src="choo3.png" alt="런던">
          </div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">
            <img src="choo4.png" alt="로스엔젤레스">
          </div>
        </div>
        <div class="recommend-item">
          <div class="recommend-item-img">
            <img src="choo5.png" alt="바르셀로나">
          </div>
        </div>
      </div>
      <div class="에어비엔비 플러스">
        <h2>에어비엔비 플러스를 만나보세요!</h2>
        퀄리티와 인테리어 디자인이 검증된 숙박 셀렉션
        <div class="배너사진">
          <img src="ad2.png" alt="배너사진">
        </div>
        <div class="전세계숙소제목"><h2>전세계 숙소</h2></div>
        <div class="전세계숙소모음">
          <div class="전세계 숙소">
            <div class="전세계 숙소 이미지">
              <img src="home1.png" alt="숙소 이미지">
            </div>
            <div class="전세계 숙소 내용">
            <div class="전세계숙소주소">
              오두막  -  BALLIAN BEACH, BALI
            </div>
            <div class="전세계숙소숙소명">BALLIAN TREEHOUSE w beautiful pool</div>
            <div class="전세계숙소평점">

              <div class="전세계숙소평점이미지">
                <img src="Screenshot_253.png">
              </div>
              <div class="전세계숙소평점텍스트">185</div>
              <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
            </div>
          </div>
          </div>

          <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home2.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            키클라데스 주택 · 이아(OIA)
          </div>
          <div class="전세계숙소숙소명">Unique Architecture Cave House</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">188</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>

        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home3.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            오성 · 트웬티나인 팜스(TWENTYNINE PALMS)
          </div>
          <div class="전세계숙소숙소명">Tile Housel</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">367</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>

        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home4.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            검증됨 · 케이프타운
          </div>
          <div class="전세계숙소숙소명">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">177</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>


        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home5.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            아파트 전체 · 마드리드(MADRID)
          </div>
          <div class="전세계숙소숙소명">솔광장에 위치한 개인 스튜디오</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">459</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>


        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home6.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            집 전체 · HUMAC
          </div>
          <div class="전세계숙소숙소명">Vacation house in etno-eco village Humac</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">119</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>


        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home7.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            개인실 · 마라케시
          </div>
          <div class="전세계숙소숙소명">The Cozy Palace</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">599</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>


        <div class="전세계 숙소">
          <div class="전세계 숙소 이미지">
            <img src="home8.png" alt="숙소 이미지">
          </div>
          <div class="전세계숙소주소">
            게스트용 별채 전체 · 로스앤젤레스
          </div>
          <div class="전세계숙소숙소명">Private Pool House with Amazing Views!</div>
          <div class="전세계숙소평점">
            <div class="전세계숙소평점이미지">
              <img src="Screenshot_253.png">
            </div>
            <div class="전세계숙소평점텍스트">170</div>
            <div class="전세계숙소평점텍스트">슈퍼 호스트</div>
          </div>
        </div>

        </div>
      </div>
    </div>
  </body>
</html>
 
 
 
Share article

More articles

See more posts

[HTML/CSS]17.인블로그 페이지 만들기

April 14, 2025
[HTML/CSS]17.인블로그 페이지 만들기

[HTML/CSS]16.부트스크랩

April 14, 2025
[HTML/CSS]16.부트스크랩

[환경세팅(설치)]11.Tomcat WAS 설치 가이드

March 12, 2025
[환경세팅(설치)]11.Tomcat WAS 설치 가이드

[HTML/CSS]14.인블로그 페이지 만들기

March 11, 2025
[HTML/CSS]14.인블로그 페이지 만들기

sson17

RSS·Powered by Inblog