[HTML, CSS] airbnb 메인페이지 만들기

Jan 18, 2024

Contents

header part SECTION 1 SECTION 2-3 SECTION 4 👏고생하셨습니다 🤗

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

여기 이 과제를 만들어 보겠습니다.

header part

먼저 <header>영역 입니다.


<!-- HEADER START -->
        <header>
            <nav><!-- 상단 navigation bar입니다 -->
								<!-- Airbnb의 로고 svg. -->
                <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>
						<!-- Search box -->
            <div class="search_box">
                <h1>특색 있는 숙소와 즐길 거리를 예약하세요.</h1>
                <table>
                    <tr>
                        <td colspan="2">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" placeholder="모든 위치">
                        </td>
                    </tr>
                    <tr class="check">
                        <td>체크인</td>
                        <td>체크아웃</td>
                    </tr>
                    <tr>
                        <td><input type="date"></td>
                        <td><input type="date"></td>
                    </tr>
                    <tr>
                        <td colspan="2">인원</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select name="" id="">
                                <option value="">인원</option>
                                <option value="">1</option>
                                <option value="">2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div class="btn">
                    <button>검색</button>
                </div>
            </div>
        </header>

맞는지 모르겠네 🤷 css를 넣어 줘야 합니다.


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

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


header {
    background: url(../images/background.jpg);
    height: 800px;
    background-size: 100% 100%;
}
nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
.menu {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 20px;
    color: #FFF;
    font-weight: 900;
}
.logo {
    color: #FFF;
    font-size: 35px;
}
.search_box {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 50px;
    width: 420px;
    height: 500px;
    background: #FFF;
    box-shadow: 5px 5px 10px 0px #ccc;
    font-weight: bold;
    padding: 30px;
    border-radius: 10px;
}
.search_box table {
    width: 100%;
    margin-top: 10px;
}

.search_box td {
    padding: 5px 0;
}
.search_box input {
    width: 100%;
    padding: 15px 5px;
    border: 1px solid #ddd;
}
input,
input::placeholder,
select {
    color: #777;
}
.search_box select {
    width: 100%;
    padding: 15px 0;
    border: 1px solid #ddd;
}
/* 검색버튼 */
.btn {
    display: grid;
    justify-content: end;
    margin-top: 10px;
}
.btn button {
    background-color: #ff9c9f;
    color: white;
    width: 70px;
    height: 45px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
}
.btn button:hover {
    background: #FF5A5F;
    transition: 0.2s;
}

미숙하지만 잘 따라한 것 같아요 ☺️

SECTION 1

첫 섹션입니다.

html을 짜봅니다


<!--SECTION 1 -->
    <section>
        <div class="title">에어비앤비 둘러보기</div>
            <div class="card_box">
                <div class="card">
                    <div class="card_img"><img src="./images/card1.jpg" alt=""></div>
                    <div class="card_title">숙소 및 부티크 호텔</div>
                </div>
                <div class="card">
                    <div class="card_img"><img src="./images/card2.jpg" alt=""></div>
                    <div class="card_title">트립</div>
                </div>
                <div class="card">
                    <div class="card_img"><img src="./images/card3.jpg" alt=""></div>
                    <div class="card_title">어드벤처</div>
                </div>
                <div class="card">
                    <div class="card_img"><img src="./images/card4.jpg" alt=""></div>
                    <div class="card_title">레스토랑</div>
                </div>
            </div>
        <div class="ad_img">
            <img src="./images/ad1.jpg" alt="">
        </div>
    </section>

세로로 나오셨습니다. CSS를 맥여줍시다


/* SECTION 공통 그리드, 타이틀 잡기 */
section {
    width: 90%;
    margin: auto;
}
.title {
    font-size: 30px;
    font-weight: 900;
    margin: 40px 0 20px;
}


/* SECTION 1 */
.card_box {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 5px;
    margin: 30px 0;
    height: 5vw;
}
.card {
    border: 3px solid #ddd;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 4fr;
}
.card_title {
    font-weight: bold;
    padding: 0 5px;
    display: flex;
    align-items: center;
}
.ad_img {
    margin: 50px 0;
    height: 20%;
}
.ad_img img {
    width: 100%;
    border-radius: 10px;
    height: 100%;
}
section {
    width: 90%;
    margin: auto;
}
.title {
    font-size: 30px;
    font-weight: 900;
    margin-top: 30px;
}
.card_box {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 5px;
    margin: 30px 0;
    height: 5vw;
}
.card {
    border: 3px solid #ddd;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 4fr;
}
.card_title {
    font-weight: bold;
    padding: 0 5px;
    display: flex;
    align-items: center;
}
.ad_img {
    margin: 50px 0;
    height: 20%;
}
.ad_img img {
    width: 100%;
    border-radius: 10px;
    height: 100%;
}

제법? 비슷해요

SECTION 2-3

섹션 2와 3은 짧아서 같이 설명하겠습니다. 🙄간단하기도 하구요

🤔그림을 위에 position: absolute;을 하거나 그림을 background로 잡아야 할 것 같아요.

❗블로그 주인장님께서 글이 적힌 이미지를 넣어주셨네요 😕 그대로 넣으면 됩니다. 코딩하는 사람은 편하지만 환률이 변하면 곧바로 이미지를 바꿔야 하겠어요


<!-- SECTION 2 -->
<section>
    <div class="title">추천 여행지</div>
    <div class="r_travel_img">
        <div class="img"><img src="./images/choo1.png" alt=""></div>
        <div class="img"><img src="./images/choo2.png" alt=""></div>
        <div class="img"><img src="./images/choo3.png" alt=""></div>
        <div class="img"><img src="./images/choo4.png" alt=""></div>
        <div class="img"><img src="./images/choo5.png" alt=""></div>
    </div>
</section>

<!-- SECTION 3-->
<section>
    <div class="title">에어비앤비 플로스를 만나보세요!</div>
    <div class="subtitle">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
    <div class="puls_img">
        <img src="./images/ad2.png" alt="">
    </div>
</section>


/* SECTION 2 */
.r_travel_img {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
}

/* SECTION 3 */
.subtitle {
    margin-bottom: 20px;
}
.puls_img img {
    width: 100%;
}

SECTION 4

마지막 섹션입니다.

CSS는 별로 할 게 없어보이는데 HTML가 노가다 입니다.


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


/* SECTION 4 */
.stays_box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}
.stays {
    width: 100%;
}
.stays img {
    height: 15vw; /* 이부분 입니다. */
}
.stays_info {
    color: #aaa;
    font-size: 15px;
}
.stays_name {
    font-weight: bold;
    font-size: 20px;
    margin: 5px 0;
}

8번이미지가 조금 짧아요. 그래서 stays img높이를 vw를 사용해서 동일하게 줘써요

👏고생하셨습니다 🤗

See more posts

[HTML, CSS] airbnb 메인페이지 만들기

header part

SECTION 1

html을 짜봅니다

SECTION 2-3

SECTION 4

👏고생하셨습니다 🤗

More articles

[JDBC] MariaDB를 사용할 겁니다.

[JDBC] DBMS 조금의 이론 들어가요

[HTML,CSS] 웹 페이지 만들기 걸음마

[HTML,CSS] 웹 페이지 만들어 보기