HTML - Airbnb 페이지 만들기 3 (CSS 작성, 완성)

Jan 18, 2024

Contents

1. Header 작성

style.css


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

// 배경 사진의 마진과 패딩값을 제외해서 사진이 화면에 딱 맞게 배치됨.

header {
    background-image: url(../images/background.jpg);
    height: 800px;
    background-size: 100% 100%;
}

// 배경 사진 삽입

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

// 상단의 로고와 메뉴 배치

.menu {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
    color: white;
    font-weight: 800;
}

// 메뉴 내부의 글 배치

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

.search-box {
    display: inline-block;
    position: relative;
    top: 50px;
    left: 60px;
    width: 350px;
    height: 440px;
    background-color: white;
    box-shadow: 3px 3px 3px 0 rgb(187, 186, 186);
    border-radius: 6px;
    padding: 25px 35px 0 35px;
}

// 테이블. relative로 위치 설정

.search-box-title {
    padding: 10px 0;
    font-size: 25px;
    font-weight: 800;
    color: rgb(75, 75, 75);
}

.search-box-name {
    padding: 10px 0;
    font-size: 12px;
    font-weight: 600;
}

.search-box-input {
    height: 45px;
    width: 100%;
    font-size: 15px;
    border: 1px solid 230, 227, 227;
}


.search-box-btn {
    display: grid;
    justify-content: end;
    padding: 15px 0;
}

.search-box-click {
    background-color: #ff385c;
    color: white;
    width: 70px;
    height: 45px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    border: 0;

}

table {
    width: 100%;
}

table input {
    width: 100%;
}

2. Body 작성

style.css


.mb-20 {
    margin-bottom: 20px;
}
//마진을 따로 선택자로 만들어 body의 HTML class에 입력

.title {
    font-size: 25px;
    font-weight: 800;
    color: rgb(66, 66, 66);
}

.body {
    margin: 0 10%;

}

.card-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
}

// 사진 4개를  가로로 배치

.card {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 6px;
    box-shadow: 0 0 3px 0 rgb(170, 170, 170);
}
//사진 내부에서 1/4만 사진이 차지하도록 설정

/* card-img 사진 start */
.card-img1 {
    background-image: url(../images/card1.jpg);
    height: 70px;
    background-size: 100% 100%;
    object-fit: cover;
}

.card-img2 {
    background-image: url(../images/card2.jpg);
    height: 70px;
    background-size: 100% 100%;
    object-fit: cover;

}

.card-img3 {
    background-image: url(../images/card3.jpg);
    height: 70px;
    background-size: 100% 100%;
    object-fit: cover;

}

.card-img4 {
    background-image: url(../images/card4.jpg);
    height: 70px;
    background-size: 100% 100%;
    object-fit: cover;

}

/* card-img 사진 end */


.card-title {
    display: grid;
    align-items: center;
    margin-left: 10px;
    font-weight: 600;

}

.ad-img1 {
    background-image: url(../images/ad1.jpg);
    height: 350px;
    border-radius: 20px;
    background-size: 100% 100%;
    object-fit: cover;

}

section {
    margin: 30px 0;
}

.img-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
}

/* img 사진 start */
.img1 {
    background-image: url(../images/choo1.png);
    height: 250px;
    background-size: 100% 100%;
    object-fit: cover;

}

.img2 {
    background-image: url(../images/choo2.png);
    height: 250px;
    background-size: 100% 100%;
}

.img3 {
    background-image: url(../images/choo3.png);
    height: 250px;
    background-size: 100% 100%;
}

.img4 {
    background-image: url(../images/choo4.png);
    height: 250px;
    background-size: 100% 100%;
}

.img5 {
    background-image: url(../images/choo5.png);
    height: 250px;
    background-size: 100% 100%;
}

/* img 사진 end */



.ad-img2 {
    background-image: url(../images/ad2.png);
    height: 300px;
    background-size: 100% 100%;
}

.home-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}


/*home-img start  */
.home-img1 {
    background-image: url(../images/home1.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img2 {
    background-image: url(../images/home2.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img3 {
    background-image: url(../images/home3.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img4 {
    background-image: url(../images/home4.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img5 {
    background-image: url(../images/home5.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img6 {
    background-image: url(../images/home6.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img7 {
    background-image: url(../images/home7.png);
    height: 180px;
    background-size: 100% 100%;
}

.home-img8 {
    background-image: url(../images/home8.png);
    height: 180px;
    background-size: 100% 100%;
}

/*home-img end  */


.text1 {
    margin: 5px 0;
    font-size: 13px;
    color: grey;
}

.text2 {
    font-size: 18px;
    font-weight: 600;
}

.star {
    font-size: 12px;
    color: rgb(30, 120, 115);
    font-weight: 800;
    display: inline;
}

.count {
    font-size: 12px;
    display: inline;

}

.text3 {
    font-size: 12px;
    display: inline;
}

3. HTML 코드

index.html


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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

</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">
                <div class="search-box-title">특색있는 숙소와 즐길 거리를 예약하세요.</div>
                <table>
                    <tr>
                        <td colspan="2" class="search-box-name">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" placeholder="모든 위치" class="search-box-input">
                        </td>
                    </tr>
                    <tr>
                        <td class="search-box-name">체크인</td>
                        <td class="search-box-name">체크아웃</td>
                    </tr>
                    <tr>
                        <td><input type="date" class="search-box-input"></td>
                        <td><input type="date" class="search-box-input"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="search-box-name">인원
                        </td>

                    </tr>
                    <tr>
                        <td colspan="2">
                            <select class="search-box-input">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>

                            </select>
                        </td>
                    </tr>
                </table>

                <div class="search-box-btn">
                    <button class="search-box-click">검색</button>
                </div>

            </div>
        </header>
        <!-- 헤더 end -->

        <!-- 둘러보기창  -->

        <!-- 바디 start -->
        <div class="body">
            <!-- 에어비앤비 둘러보기 start -->
            <section>
                <div class="title mb-20">에어비앤비 둘러보기</div>
                <div class="card-box">
                    <div class="card">
                        <div class="card-img1"></div>
                        <div class="card-title">숙소 및 부티크</div>
                    </div>
                    <div class="card">
                        <div class="card-img2"></div>
                        <div class="card-title">트립</div>
                    </div>
                    <div class="card">
                        <div class="card-img3"></div>
                        <div class="card-title">어드벤쳐</div>
                    </div>
                    <div class="card">
                        <div class="card-img4"></div>
                        <div class="card-title">레스토랑</div>
                    </div>
                </div>
            </section>

            <section>
                <div class="ad-img1"></div>
            </section>
            <!-- 에어비앤비 둘러보기 end -->

            <br>
            <!-- 추천여행지 start -->
            <section>
                <div class="title mb-20">추천 여행지</div>
                <div class="img-box">
                    <div class="img1"></div>
                    <div class="img2"></div>
                    <div class="img3"></div>
                    <div class="img4"></div>
                    <div class="img5"></div>
                </div>

            </section>
            <!-- 추천여행지 end -->


            <!--에어비앤비 플러스를 만나보세요! start  -->
            <section>
                <div class="title">에어비앤비 플러스를 만나보세요!</div>
                <div class="subtitie mb-20">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
                <div class="ad-img2"></div>
            </section>
            <!--에어비앤비 플러스를 만나보세요! end  -->

            <!-- 전 세계 숙소 start -->
            <section>
                <div class="title mb-20">전 세계 숙소</div>
                <div class="home-box">
                    <div class="home">
                        <div class="home-img1"></div>
                        <div class="text1">오두막-BALIAN BEACH, BALI</div>
                        <div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">185</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img2"></div>
                        <div class="text1">카클라데스 주택-이아(OIA)</div>
                        <div class="text2">Unique Architecture Cave House</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">188</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img3"></div>
                        <div class="text1">성-트웬티나인 팜스(TWENTYNINE PALMS)</div>
                        <div class="text2">Tile House</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">367</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img4"></div>
                        <div class="text1">검증됨-케이프타운</div>
                        <div class="text2">Modern,Chic Penthouse with Mountain,City & Sea Views</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">177</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img5"></div>
                        <div class="text1">아파트 전체-마드리드(MADRID)</div>
                        <div class="text2">솔광장에 위치한 개인 스튜디오</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">459</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img6"></div>
                        <div class="text1">집 전체-HUMAC</div>
                        <div class="text2">Vacation house in etno-ecovillage Humac</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">119</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img7"></div>
                        <div class="text1">개인실-마라케시</div>
                        <div class="text2">The Cozy Palace</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">559</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home-img8"></div>
                        <div class="text1">게스트용 별채 전체-로스앤젤레스</div>
                        <div class="text2">Private Pool House with Amaging Views!</div>
                        <div class="grade-box">
                            <div class="star">★★★★★</div>
                            <div class="count">170</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 전 세계 숙소 end -->


        </div>
        <!-- 바디 end -->
    </main>
</body>

</html>