HTML

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

Jan 18, 2024
HTML - Airbnb 페이지 만들기 3 (CSS 작성, 완성)
Contents
1. Header 작성2. Body 작성3. HTML 코드
 
 

1. Header 작성

notion image
 

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 작성

 
notion image
 

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>
 
notion image
 
 
index.html 과 style.css 를 합치면 사진과 같이 실행된다.
Share article

More articles

See more posts

DBMS(Database Management System) 란?

January 19, 2024
DBMS(Database Management System) 란?

Address already in use 에러 해결

January 19, 2024
Address already in use 에러 해결

HTML - Airbnb 페이지 만들기 2 (HTML 작성)

January 18, 2024
HTML - Airbnb 페이지 만들기 2 (HTML 작성)

HTML - Airbnb 페이지 만들기 1 (구조화)

January 18, 2024
HTML - Airbnb 페이지 만들기 1 (구조화)

{CODE-RYU};

RSS·Powered by Inblog