HTML&CSS

실습 - 에어비앤비 만들기

Jan 18, 2024
실습 - 에어비앤비 만들기
notion image

1. 박스 설계하기

notion image
 

2. 구조화하기

💡
시멘틱 구조
<header>: 웹 페이지나 섹션의 머릿말 <nav>: 내비게이션 링크들을 그룹화 <main>: 문서의 주요 내용을 포함 <article>: 독립적으로 구분되거나 재사용될 수 있는 콘텐츠를 정의. <section>: 문서의 섹션 <aside>: 부가적인 정보를 포함하는 영역을 정의 <footer>: 웹 페이지나 섹션의 꼬리말
 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>
    <main>
        <!-- 헤더 start -->
        <header>
            <nav>
                <div class="logo">로고</div>
                <div class="menu">
                    <div>호스트가 되어주세요</div>
                    <div>도움말</div>
                    <div>회원가입</div>
                    <div>로그인</div>
                </div>
            </nav>
            <div class="search-box">
                하얀박스
            </div>
        </header>
        <!-- 헤더 end -->

        <!-- 바디 start -->
        <div class="body">
            <!-- 에어비앤비 둘러보기 start -->
            <section>
                <div class="title">에어비앤비 둘러보기</div>
                <div class="card-box">
                    <div class="card">
                        <div class="card-img">카드사진</div>
                        <div class="card-title">숙소 및 부티크 호텔</div>
                    </div>
                    <div class="card">
                        <div class="card-img">카드사진</div>
                        <div class="card-title">트립</div>
                    </div>
                    <div class="card">
                        <div class="card-img">카드사진</div>
                        <div class="card-title">어드벤처</div>
                    </div>
                    <div class="card">
                        <div class="card-img">카드사진</div>
                        <div class="card-title">레스토랑</div>
                    </div>
                </div>
                <div class="ad-img">
                    사막 사진
                </div>
            </section>
            <!-- 에어비앤비 둘러보기 end -->

            <!-- 추천 여행지 start -->
            <section>
                <div class="title">추천 여행지</div>
                <div class="img-box">
                    <div class="img">사진1</div>
                    <div class="img">사진2</div>
                    <div class="img">사진3</div>
                    <div class="img">사진4</div>
                    <div class="img">사진5</div>
                </div>
            </section>
            <!-- 추천 여행지 end -->

            <!-- 에어비앤비 플러스를 만나보세요 start -->
            <section>
                <div class="title">에어비앤비 플러스를 만나보세요!</div>
                <div class="subtitle">퀄리티와 인텔리어 디자인이 검증된 숙소 컬렉션</div>
                <div class="ad-img">집 사진</div>
            </section>
            <!-- 에어비앤비 플러스를 만나보세요 end -->

            <!-- 전 세계 숙소 start -->
            <section>
                <div class="title">전 세계 숙소</div>
                <div class="home-box">
                    <div class="home">
                        <div class="home-img"></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-img"></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-img"></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-img"></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-img"></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-img"></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-img"></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-img"></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>
            </section>
            <!-- 전 세계 숙소 end -->
        </div>
        <!-- 바디 end -->
    </main>
</body>

</html>
notion image

3. 여백 부여하기

* {
     margin: 0px;  //무력화
     padding: 0px; //무력화
     box-sizing: border-box; // 보더 크기 => 보더 값을 포함해서 총 합을 맞출 수 있음
        }
 
 
팀 프로젝트할때 컨벤션으로 꼭 규칙을 정해야 함
한번에 검색해서 잊어버리는 일이 없도록 해야 함
 
notion image

4. 각각 텍스트 내용 입력하기

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

<head>
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" sizes="76x76" type="image/x-icon"
        href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico">
    <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-title m-20">
                    특색 있는 숙소와 즐길 거리를 예약하세요.</div>

                <table class="table m-20">
                    <tr>
                        <td colspan="2" class="search-subtitle ">목적지</td>
                    </tr>
                    <td colspan="2"><input type="text" placeholder="모든 위치"></td>
                    <tr>
                        <td class="search-subtitle">체크인</td>
                        <td class="search-subtitle">체크아웃</td>
                    </tr>
                    <td><input type="date"></td>
                    <td><input type="date"></td>
                    <tr>
                        <td colspan="2" class="search-subtitle ">인원</td>
                    </tr>
                    <td colspan="2" class="class">
                        <select>
                            <option>인원</option>
                            <option>1</option>
                            <option>2</option>
                        </select>
                    </td>
                </table>

                <div class="search-btn m-20">
                    <button>검색</button>
                </div>
            </div>
        </header>
        <!-- 헤더 end -->

        <!-- 바디 start -->
        <div class="body ml-100 mr-100">
            <!-- 에어비앤비 둘러보기 start -->
            <section>
                <div class="title mb-20">에어비앤비 둘러보기</div>
                <div class="card-box mb-20">
                    <div class="card">
                        <div class="card-img card1 "></div>
                        <div class="card-title ml-10">숙소 및 부티크 호텔</div>
                    </div>
                    <div class="card">
                        <div class="card-img card2"></div>
                        <div class="card-title ml-10">트립</div>
                    </div>
                    <div class="card">
                        <div class="card-img card3"></div>
                        <div class="card-title ml-10">어드벤처</div>
                    </div>
                    <div class="card">
                        <div class="card-img card4"></div>
                        <div class="card-title ml-10">레스토랑</div>
                    </div>
                </div>
                <div class="ad-img1 mt-20"></div>
            </section>
            <!-- 에어비앤비 둘러보기 end -->

            <!-- 추천 여행지 start -->
            <section>
                <div class="title mb-20">추천 여행지</div>
                <div class="img-box">
                    <div class="img ib1"></div>
                    <div class="img ib2"></div>
                    <div class="img ib3"></div>
                    <div class="img ib4"></div>
                    <div class="img ib5"></div>
                </div>
            </section>
            <!-- 추천 여행지 end -->

            <!-- 에어비앤비 플러스를 만나보세요 start -->
            <section>
                <div class="title mb-10">에어비앤비 플러스를 만나보세요!</div>
                <div class="subtitle 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-img hi1"></div>
                        <div class="text1 mt-5 ">오두막 BALIAN BEACH, BALI</div>
                        <div class="text2 mt-5 ">BALIAN TREEHOUSE w beautiful pool</div>
                        <div class="grade-box mt-5 ">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">185</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi2"></div>
                        <div class="text1 mt-5">키클라데스 주택·dldk(OIA)</div>
                        <div class="text2 mt-5">Unique Architecture Cave House</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">188</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi3"></div>
                        <div class="text1 mt-5">성·트윈티나인 팜스(TWENTYNINE PALMS)</div>
                        <div class="text2 mt-5">Title House</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">367</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi4"></div>
                        <div class="text1 mt-5">검증됨·케이프타운</div>
                        <div class="text2 mt-5">Modern, Chic Penthouse with Mountain, City &Sea Views</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">177</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi5"></div>
                        <div class="text1 mt-5">아파트 전체 마드리드(MADRID)</div>
                        <div class="text2 mt-5">솔광장에 위치한 개인 스튜디오</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">459</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi6"></div>
                        <div class="text1 mt-5">집 전체·HUMAC</div>
                        <div class="text2 mt-5">Vacation house in etno-eco village Humac</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">119</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi7"></div>
                        <div class="text1 mt-5">개인실·마라케시</div>
                        <div class="text2 mt-5">The Cozy Palace</div>
                        <div class="grade-box mt-5">
                            <div class="star">⭐⭐⭐⭐⭐</div>
                            <div class="count">559</div>
                            <div class="text3">슈퍼호스트</div>
                        </div>
                    </div>
                    <div class="home">
                        <div class="home-img hi8"></div>
                        <div class="text1 mt-5">게스트용 별채 전체·로스트앤젤레스</div>
                        <div class="text2 mt-5">Private Pool House with Amazing Views!</div>
                        <div class="grade-box mt-5">
                            <span class="star">⭐⭐⭐⭐⭐</span>
                            <span class="count">170</span>
                            <span class="text3">슈퍼호스트</span>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 전 세계 숙소 end -->
        </div>
        <!-- 바디 end -->
    </main>
</body>

</html>
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.m-20 {
    margin: 20px;
}

.ml-100 {
    margin-left: 100px;
}

.ml-10 {
    margin-left: 10px;
}

.mr-100 {
    margin-right: 100px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 5px;
}

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

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

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

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

.search-box {
    background-color: white;
    display: inline-block;
    position: relative;
    top: 20px;
    left: 50px;
    width: 430px;
    box-shadow: 0 3px 3px 0 rgb(241, 214, 214);
    border-radius: 6px;
}

table {
    width: 100%;
    font-size: 30px;
}

.table {
    width: 90%;
    height: 90%;
    justify-content: center;
}

table>tr {
    margin: 10px;
}

table input {
    width: 100%;
    height: 45px;
    color: rgb(100, 98, 98);
    font-size: 15px;
    border: 1px solid rgb(230, 227, 227);
}

table select {
    border: 1px solid rgb(230, 227, 227);
}


.search-title {
    font-size: 30px;
    font-weight: 800;
    color: rgb(75, 75, 75);
}

.search-subtitle {
    font-size: 12px;
    font-weight: 600;
}

.search-btn {
    display: grid;
    justify-content: end;
}

.search-btn button {
    background-color: #FF5A5F;
    width: 70px;
    height: 45px;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    border-radius: 10%;
    color: white;
    cursor: pointer;
    justify-content: end;
}

select {
    width: 100%;
    height: 40px;
    color: rgb(75, 75, 75);
}


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

.card-box {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
    font-size: 12px;
    font-weight: 600;
}

.card {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 10px;
    box-shadow: 0 3px 3px 0 rgb(170, 170, 170);
    align-items: center;
    font-weight: 600;
}

.card1 {
    background-image: url(./images/card1.jpg);
    background-size: 100% 100%;
    height: 60px;
    width: 70px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.card2 {
    background-image: url(./images/card2.jpg);
    background-size: 100% 100%;
    height: 60px;
    width: 70px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.card3 {
    background-image: url(./images/card3.jpg);
    background-size: 100% 100%;
    height: 60px;
    width: 70px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.card4 {
    background-image: url(./images/card4.jpg);
    background-size: 100% 100%;
    height: 60px;
    width: 70px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

section {
    margin: 30px 0;
}

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

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

.ib1 {
    background-image: url(./images/choo1.png);
    background-size: 100% 100%;
    height: 350px;
}

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

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

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

.ib5 {
    background-image: url(./images/choo5.png);
    background-size: 100% 100%;
    height: 350pxpx;
}

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

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

.text1 {
    font-size: 13px;
    color: gray;
}

.text2 {
    font-size: 18px;
    font-weight: 600;
    color: rgb(60, 60, 60);
}

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

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

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

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

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

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

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

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

.grade-box {
    display: flex;
}

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

.count,
.text3 {
    font-size: 12px;
}
notion image
Share article

More articles

See more posts

DBMS 통신의 이해

January 19, 2024
DBMS 통신의 이해

실습 - Insta 만들기

January 18, 2024
실습 - Insta 만들기

Display - Flex

January 17, 2024
Display - Flex

실습 - vacation 만들기

January 17, 2024
실습 - vacation 만들기

vosw1

RSS·Powered by Inblog