Airbnb 사이트 만들어보기

1. header 만들기

• HTML 코드

<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>
        <section>
            <div class="form__search">
                <div class="title__search">특색 있는 숙소와 즐길 거리를 예약하세요.</div>
                <table>
                    <tr>
                        <td colspan="2" class="sub__title__search">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="input__search" type="text" placeholder=" 모든 위치">
                        </td>
                    </tr>
                    <tr>
                        <td class="sub__title__search">체크인</td>
                        <td class="sub__title__search">체크아웃</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="sub__title__search">인원</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select class="input__search">
                                <option>인원</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div class="button__box">
                    <button class="button__search">검색</button>
                </div>
            </div>
        </section>
    </header>
   

• CSS 코드

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

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

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

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

        .menu {
            display: flex;
        }

        .menu>div {
            margin-right: 30px;
            color: white;
            font-weight: 800;
        }

        .form__search {
            position: relative;
            top: 10px;
            left: 50px;
            width: 430px;
            background-color: white;
            border-radius: 6px;
            padding: 20px 30px;
            /*가로 세로*/
            box-shadow: 0 4px 4px 0 rgb(214, 214, 214);
        }

        table {
            width: 100%;
        }

        .input__search {
            height: 45px;
            width: 100%;
            color: rgb(100, 100, 100);
            font-size: 15px;
            border: 1px solid rgb(230, 230, 230);
        }

        .sub__title__search {
            font-size: 12px;
            font-weight: 600;
            padding: 10px 0px;
        }

        .title__search {
            font-size: 30px;
            font-weight: 800;
            padding: 10px 0px;
            color: rgb(75, 75, 75);
        }

        .button__search {
            background-color: #FF5A5F;
            color: white;
            width: 70px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 0px;
            cursor: pointer;
        }

        .button__box {
            height: 60px;
            display: flex;
            justify-content: end;
            align-items: center;
        }
       
        </style>

• display: flex;: 부모 요소를 Flexbox 컨테이너로 설정합니다. 자식 요소들은 자동으로 플렉스 아이템이 되어, 유연한 배치와 정렬을 할 수 있습니다.

• justify-content: space-between;: 플렉스 컨테이너 내의 자식 요소들을 수평 축에서 정렬할 때 사용합니다. 자식 요소들 사이에 동일한 간격을 주며, 첫 번째 요소는 왼쪽 끝에, 마지막 요소는 오른쪽 끝에 배치됩니다.

• position: relative;는 CSS에서 요소의 위치를 설정하는 방법 중 하나입니다. 이 속성을 사용하면 요소가 원래 위치를 기준으로 상대적으로 이동할 수 있습니다. 기본 위치 유지: 요소는 원래 위치에 배치되지만, top, right, bottom, left 속성을 사용하여 이 위치에서 상대적으로 이동할 수 있습니다. 다른 요소에 영향 없음: 요소가 이동하더라도, 이동된 위치는 다른 요소의 배치에 영향을 주지 않고, 원래 위치가 여전히 공간을 차지합니다.

• align-items: center;는 CSS Flexbox 레이아웃에서 사용되는 속성으로, 플렉스 컨테이너 내의 플렉스 아이템들을 교차 축(수직 축)에서 중앙에 정렬하는 데 사용됩니다.

2. Section

1. main(Section)

 <main>
        <div class="container">
            <section>
                <div class="sec__title">에어비앤비 둘러보기</div>
                <div class="card__box">
                    <div class="card">
                        <div><img class="card__img" src="/images/card1.jpg"></div>
                        <div class="sec__content">숙소 및 부티크 호텔</div>
                    </div>
                    <div class="card">
                        <div><img class="card__img" src="/images/card2.jpg"></div>
                        <div class="sec__content">트립</div>
                    </div>
                    <div class="card">
                        <div><img class="card__img" src="/images/card3.jpg"></div>
                        <div class="sec__content">어드벤처</div>
                    </div>
                    <div class="card">
                        <div><img class="card__img" src="/images/card4.jpg"></div>
                        <div class="sec__content">레스토랑</div>
                    </div>
                </div>
            </section>
        </div>

2. CSS

 main {
            display: flex;
            justify-content: center;
        }

      .container {
            width: 80%;
        }

        .card__img {
            height: 70px;
            object-fit: cover;
        }

        .card__box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 5px;
        }

        .card {

            display: flex;
            border: 1px solid rgb(210, 210, 210);
            border-radius: 6px;
            box-shadow: 0 0 3px 0 rgb(170, 170, 170);
        }
        .sec__title{
            font-size: 25px;
            font-weight: 800;
            color: rgb(68, 66, 66);
            margin: 20px 20px;
        }

        .sec__content {
            padding-left: 10px;
            display: grid;
            align-items: center;
            font-weight: 600;
        }

• object-fit: cover;는 CSS 속성으로, 이미지나 비디오 같은 콘텐츠가 요소의 크기에 맞게 조정될 때, 콘텐츠의 비율을 유지하면서 요소의 전체 영역을 덮도록 합니다.

• grid-template-columns: 1fr 1fr 1fr 1fr;는 CSS Grid 레이아웃에서 그리드 컨테이너의 열 너비를 정의하는 속성입니다. 이 설정은 그리드를 4개의 동일한 열로 나누는 것을 의미합니다.

3. sub(Section)

1. sub

 <section>
                <div class="sec__title" >전 세계 숙소</div>
                <div class="home__box">
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home1.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home2.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home3.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home4.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home5.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home6.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home7.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
                <div class="home">
                    <div class="home__img">
                        <img src="/images/home8.png">
                    </div>
                    <div class="info1">오두막 BALIAN BEACH, BALI</div>
                    <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                    <div>
                        <span class="star">★★★★★</span>
                        <span class="count">185</span>
                        <span class="type">슈퍼호스트</span>
                    </div>
                </div>
            </div>
            </section>
        </div>

2. CSS

.sec__title{
    font-size: 25px;
    font-weight: 800;
    color: rgb(68, 66, 66);
    margin: 20px 20px;
}

.sec__content {
    padding-left: 10px;
    display: grid;
    align-items: center;
    font-weight: 600;
}

.bottom {
    height: 600px;
}
.home__box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}
.home__img>img{
    width: 100%;
    object-fit: cover;
}
.info1{
    font-size: 13px;
    color: gray;
}
.info2{
    font-size: 18px;
    font-weight: 600;
    color:rgb(60, 60, 60);
}

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