[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (1)

HTML, CSS 와 함께 airbnb 웹사이트 메인 화면의 main 부분 만들기 (1)

mmmmmm02

Aug 28, 2024

Contents

header 를 만들었으니, main 도 크게 크게 쪼개서 만들어보자.

실제 프로젝트 돌입 전 체험판이라, 가장 상단의 section 과 가장 하단의 section 만 만들어보겠다.

두근두근

상단의 섹션 먼저 고고싱.

<main> 에서

<div> 와

<section> 하나의 섹션을 먼저 만들어서 진행

</main>

글자 넣고 class 명도 붙였으면, CSS 가서 또 만들어주고~~

‘이미지’ 는 아래의 코드로 바꿔주자.


<img class="card__img" src="/images/card1.jpg">


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

CSS 로 이쁘게 배치 고고싱.

grid 가 flex 랑 똑같은데, 여기서는 grid 를 쓰는 게 낫다.

4개를 감싸고 있는게 card box.

💡

일반적인 가로 배치는 flex 로 하고, 다른 건 grid 로 하자


.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);
}

grid 를 썼을 때, grid-gap 을 사용하면 카드 사이사이 갭을 바로 줄 수 있다. 이것도 grid 를 쓰는 장점.

추가한 CSS

지금까지의 전체 코드


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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;
            /*height: 500px; 이젠 지워도 됨*/
            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; /*너무 붙어있는 애 띄워줌, 가로는 패딩안줄거라 0 */
        }

        .title__search {
            font-size: 30px;
            font-weight: 800; /*진하기*/
            padding: 10px 0px; /*아래 위로 padding 넣어주기*/
            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: 0;
            cursor: pointer;
        }

        .button__box {
            height: 60px;
            display: flex; /*사용해서 끝으로 보내기*/
            justify-content: end; /*가로 정렬*/
            align-items: center; /*세로 정렬*/
        }

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

        main>div {
            width: 80%; /*더 늘리고싶으면 90 100 늘리면 됨 */
        }

        .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__content {
            padding-left: 10;
            display: grid; /*flex -> grid 로바꿔도 똑같이 됨*/
            align-items: center;
        }

    </style>
</head>

<body>
    <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>
    <main>
        <div>
            <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>
    </main>    
</body>

</html>

앗! 위의 코드에서 아래의 코드까지 추가 하고 넘어가자 .

See more posts

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (1)

<main> 상단 <section>

More articles

[자바스크립트] 기본 문법 (1)

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (1)