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

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

mmmmmm02

Aug 28, 2024

Contents

중앙부를 스킵하고, 메인 화면의 하단 section 을 만들어보자.

다 분리 시켜보면 작은 것들이다.

다 쪼개보면 간단하다.

복잡해 보이는 것을 추상화 시켜서 큼지막하게 보는 능력, 설계해 나가는 능력이 필요하다.

한 <section> 에서

<title> 박스랑

사진 전체

두 개로 먼저 나누고,

아래의 빨간 박스로 나누고, 또 그 안에서 나누면 간단.

<span> 은 inline 이다.

박스 하나를 먼저 만들어보자.


<section>
       <div class="sec__title">전 세계 숙소</div>
       <div class="home__box">
             <div class="home">
                   <div>
                       <img src="/images/home1.png">
                   </div>
                   <div>오두막 BALIAN BEACH, BALI</div>
                   <div>BALIAN TREEHOUSE w beautiful pool</div>
                   <div>
                         <span>★★★★★</span>
                         <span>185</span>
                         <span>슈퍼호스트</span>
                   </div>
             </div>
       </div>
</section>

grid 는 부모한테 쓰는 것.


.home__box {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr; /*몇 개씩 걸건지*/
       grid-gap: 10px;
}

여백이 가득한 아래를 보라. 이 때문에라도 박스 설계를 잘해야 한다.

앞에서 해왔던대로 CSS 수정하면 끝이라, 그 과정은 담지 않았다. (아래에 전체 코드 첨부)

그리고 <head> 안에는 아래와 같이 넣어주면 됨^^

실행해보고 F12 눌러서 style.css 가 나오는지 확인^^

127.0.0.1:5500/css/~~

현재 오픈 된 폴더는 웹서버로 잡아준다.

5500 는 위의 Live Server.

웹서버 폴더는 AIRBNB_SAMPLE

웹서버 : 컴퓨터의 특정 폴더를 웹에 개방해주는 것 url 로

/ 의 위치

/css → AIRBNB_SAMPLE

(그렇다면 스프링의 웹서버 폴더는? → static)

크게 통으로 잡는다.

header

nav - section

전체 HTML 코드


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</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 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>
            <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>
    </main>    
</body>

</html>

전체 CSS 코드


*{
    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; /*오른쪽 30픽셀 공간 설정*/
    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;
}

.container { /*main>div 에서 .contatiner 로 바꿈 */
    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__title {
    font-size: 25px;
    font-weight: 800;
    color: rgb(68, 66, 66);
    margin: 20px 0px; /*위쪽, 아래쪽 20픽셀 여백 / 왼쪽 오른쪽 0픽셀 여백*/
}

.sec__content {
    padding-left: 10px;
    display: grid; /*flex -> grid 로바꿔도 똑같이 됨*/
    align-items: center;
    font-weight: 600;
}

.home__box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /*몇개씩 걸건지*/
    grid-gap: 10px;
}

.home__img>img {
    width: 100%;
    object-fit: cover;
}

.info1 {
    margin-top: 5px;
    font-size: 13px;
    color: grey;
}

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

See more posts

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

<main> 의 하단 <section>

More articles

[자바스크립트] 이벤트 Event (2)

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

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

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