Airbnb 홈페이지 만들어보기

[HTML] Airbnb 홈페이지 똑같이 만들어보기

Jan 18, 2024

Contents

내 코드 만들면서 오류 났던 부분

💡

백엔드 개발자라 하더라도 이정도는 해야함.

HTML/CSS 에어비엔비 만들기 - 14 airbnb 완성 버전2

완성 파일

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

파일 다운받아서 똑같이 만들어보기

내 코드

CSS


* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

main {
    display: grid;
}

.pa-30 {
    padding: 30px;
}

.pb-10 {
    padding-bottom: 10px;
}

/* 헤더 영역 */
header {
    background-image: url("../images/background.jpg");
    height: 800px;
    background-size: 100% 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: white;
}

.menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-column-gap: 20px;
    font-weight: 800;
}

.logo {
    font-size: 35px;
    font-weight: 800;
}

.search-box {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 50px;
    width: 430px;
    background-color: white;
    box-shadow: 5px 5px 5px 0px rgb(180, 179, 179);
    border-radius: 5px;
}

.table-title {
    font-size: 25px;
    font-weight: 600;
}

.table-subtitle {
    font-size: 13px;
    font-weight: 600;
}

.btn {
    display: flex;
    justify-content: end;
}

.btn>button {
    color: white;
    background-color: #FF5A5F;
    border: 0px;
    width: 60px;
    height: 40px;
    border-radius: 6px;
    font-weight: 600;
}

.user-write {
    color: gray;
}

.table-item-wh {
    width: 100%;
    height: 40px;
}

.search-box-table input {
    width: 100%;
    height: 40px;
}

/* 바디 영역 */

.body {
    padding-left: 5%;
    padding-right: 5%;
}

.title {
    font-size: 20px;
    font-weight: 600;
    padding-top: 15px;
}

.card-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    grid-column-gap: 7px;
    padding-top: 15px;
}

.card {
    border: 1px solid rgb(196, 192, 192);
    box-shadow: 0px 0px 1px 0px;
    border-radius: 5px;
    width: 100%;
    height: 75px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 10px;
    font-weight: 600;
    font-size: 15px;
}



.subtitle {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 15px;
}

.card-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.card-title {
    display: flex;
    align-items: center;
}

.ad-img img {
    margin-top: 3%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.img-box {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 10px;
    justify-content: space-between;
    padding-top: 15px;
}

.ts {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad2 {
    width: 100%;
    padding-bottom: 10px;
}

.home-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    grid-column-gap: 13px;
    padding-top: 15px;
}

.img>img {
    height: 100%;
    width: 100%;
}

.text1 {
    font-size: 11px;
    color: gray;
    padding-bottom: 3px;
}

.text2 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 3px;
}

.grade-box {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.grade-box-1 {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
}

.star {
    font-size: 10px;
    color: #237672;
}

.count {
    font-size: 13px;
}

.text3 {
    font-size: 13px;
    padding-bottom: 10px;
}

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <title>에어비앤비</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <main>
        <!-- 헤더 start -->
        <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="menu">
                    <div>호스트가 되어보세요</div>
                    <div>도움말</div>
                    <div>회원가입</div>
                    <div>로그인</div>
                </div>
            </nav>
            <div class="search-box pa-30">
                <div class="table-title pb-10">특색 있는 숙소와 즐길 <br>거리를 예약하세요.</div>
                <table class="pb-10 table-item-wh">
                    <tr>
                        <td colspan="2" class="table-subtitle pb-10">목적지</td>
                    </tr>
                    <tr>
                        <td class="pb-10 user-write " colspan="2">
                            <input type="text" class="table-item-wh" placeholder="모든 위치">
                        </td>
                    </tr>
                    <tr>
                        <td class="table-subtitle pb-10">체크인</td>
                        <td class="table-subtitle pb-10">체크아웃</td>
                    </tr>
                    <tr>
                        <td class="pb-10"><input class="user-write table-item-wh" type="date"></td>
                        <td class="pb-10"><input class="user-write table-item-wh" type="date"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="table-subtitle pb-10">인원</td>
                    </tr>
                    <tr>
                        <td class="pb-10" colspan="2">
                            <select class="table-item-wh user-write">
                                <option>인원</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div class="btn">
                    <button>검색</button>
                </div>
            </div>
        </header>
        <!-- 헤더 end -->
        <!-- 바디 start -->
        <div class="body">
            <!-- 에어비앤비 둘러보기 start -->
            <section>
                <div class="title">에어비앤비 둘러보기</div>
                <div class="card-box">
                    <div class="card">
                        <div class="card-img">
                            <img class="card-images" src="./images/card1.jpg">
                        </div>
                        <div class="card-title">숙소 및 부티크 호텔</div>
                    </div>
                    <div class="card">
                        <div class="card-img"><img src="./images/card2.jpg"></div>
                        <div class="card-title">트립</div>
                    </div>
                    <div class="card">
                        <div class="card-img"><img src="./images/card3.jpg"></div>
                        <div class="card-title">어드벤처</div>
                    </div>
                    <div class="card">
                        <div class="card-img"><img src="./images/card4.jpg"></div>
                        <div class="card-title">레스토랑</div>
                    </div>
                </div>
                <div class="ad-img"><img src="./images/ad1.jpg"></div>
            </section>
            <!-- 에어비앤비 둘러보기 end -->

            <!-- 추천 여행지 start -->
            <section>
                <div class="title">추천 여행지</div>
                <div class="img-box">
                    <div class="img"><img class="ts" src="./images/choo1.png"></div>
                    <div class="img"><img class="ts" src="./images/choo2.png"></div>
                    <div class="img"><img class="ts" src="./images/choo3.png"></div>
                    <div class="img"><img class="ts" src="./images/choo4.png"></div>
                    <div class="img"><img class="ts" src="./images/choo5.png"></div>
                </div>
            </section>
            <!-- 추천 여행지 end -->

            <!-- 에어비앤비 플러스를 만나보세요! start -->
            <section>
                <div class="title">에어비앤비 플러스를 만나보세요!</div>
                <div class="subtitle">퀄리티와 인테리어 디자인이 검증된 숙소 컬레션</div>
                <div><img class=ad2 src="./images/ad2.png"></div>
            </section>
            <!-- 에어비앤비 플러스를 만나보세요! end -->

            <!-- 전 세계 숙소 start -->
            <section>
                <div class="title">전 세계 숙소</div>
                <div class="home-box">
                    <div class="home">
                        <div class="img"><img src="./images/home1.png"></div>
                        <div class="text1">오두막 BALIAN BEACH, BALI</div>
                        <div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">185</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home2.png"></div>
                        <div class="text1">키클라데스 주택 이아(OIA)</div>
                        <div class="text2">Unique Architecture Cave House</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">188</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home3.png"></div>
                        <div class="text1">성 트웬티나인 팜스(TWENTYNINE PALMS)</div>
                        <div class="text2">Tile House</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">367</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home4.png"></div>
                        <div class="text1">검증됨 케이프타운</div>
                        <div class="text2">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">117</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home5.png"></div>
                        <div class="text1">아파트 전체 마드리드(MADRID)</div>
                        <div class="text2">솔광장에 위치한 개인 스튜디오</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">459</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home6.png"></div>
                        <div class="text1">집 전체 HUMAC</div>
                        <div class="text2">Vacation house in etno-eco village Humac</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">119</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home7.png"></div>
                        <div class="text1">개인실 마라케시</div>
                        <div class="text2">The Cozy Palace</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">159</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="img"><img src="./images/home8.png"></div>
                        <div class="text1">게스트용 별채 전체 로스앤젤레스</div>
                        <div class="text2">Private Pool House with Amazing Views!</div>
                        <div class="grade-box">
                            <div class="grade-box-1">
                                <div class="star">★★★★★</div>
                                <div class="count">170</div>
                                <div class="text3">슈퍼호스트</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 전 세계 숙소 end -->
        </div>
        <!-- 바디 end -->
    </main>
</body>

</html>

만들면서 오류 났던 부분

크기가 안맞는 현상이 생겼다.

둘다 적용하지말고 텍스트 상자만 적용 시켰어야함.

삭제후 title에만 적용시키는 코드 추가

See more posts

Airbnb 홈페이지 만들어보기

내 코드

만들면서 오류 났던 부분

More articles

Java로 MariaDB 사용

JDBC 기본 지식

CSS Grid

버튼 만들기 예제