![[실습]Airbnb 만들어보기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-29T08%3A42%3A25.575Z-95633fa2-83d9-47c1-b4d6-271c356f8fa7&w=2048&q=75)
<!DOCTYPE html>
<html lang="en">
<head>
<title>에어비앤비</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 헤더 start */
header {
background-image: url("images/background.jpg");
height: 800px;
background-size: 100% 100%;
}
nav {
padding: 20px;
display: flex;
justify-content: space-between;
}
.menu {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 10px;
color: white;
font-weight: 800;
}
.logo {
color: white;
font-size: 35px;
font-weight: 800;
}
.search-box {
display: inline-block;
position: relative;
top: 10px;
left: 50px;
width: 400px;
background-color: white;
box-shadow: 5px 5px 10px 0px rgb(187, 186, 186);
padding: 30px;
border-radius: 6px;
}
.search-title {
padding: 10px 40px 10px 0px;
font-size: 29px;
font-weight: 800;
color: rgb(59, 58, 58);
}
.search-sub-title {
color: rgb(59, 58, 58);
padding: 10px 0px;
font-size: 13px;
font-weight: 600;
border: 1px white solid;
}
table {
width: 100%;
border: 1px white solid;
border-collapse: collapse;
}
table input {
width: 100%;
height: 45px;
font-size: 15px;
border: 1px rgb(219, 219, 219) solid;
color: grey;
padding: 5px;
margin: 5px;
}
select {
width: 100%;
height: 45px;
color: grey;
border-color: rgb(216, 212, 212);
margin: 4px;
}
.button {
display: grid;
justify-content: end;
}
button {
background-color: #FF5A5F;
color: white;
width: 70px;
height: 45px;
font-size: 15px;
font-weight: 800;
border-radius: 6px;
border: 0;
margin-top: 20px;
}
/* 헤더 end */
/* 바디 start */
main {
margin: 30px 0px;
}
section {
margin: 30px 100px 0px 100px;
}
.title {
margin-top: 50px;
font-size: 25px;
font-weight: 800;
color: rgb(73, 73, 73);
}
.subtitle {
font-size: 15px;
font-weight: 500;
color: rgb(83, 83, 83);
}
/* 에어비앤비 둘러보기 start */
.card-img1 {
background-image: url(./images/card1.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img2 {
background-image: url(./images/card2.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img3 {
background-image: url(./images/card3.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img4 {
background-image: url(./images/card4.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-content {
display: grid;
align-items: center;
font-weight: 600;
margin: 0 0 0 10px;
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
margin-top: 20px;
}
.card {
display: grid;
grid-template-columns: 1fr 3fr;
border: 1px solid rgb(212, 210, 210);
border-radius: 6px;
box-shadow: 0 0 3px 0 rgb(167, 164, 164);
}
.card-title {
margin-left: 10px;
display: flex;
align-items: center;
font-weight: 800;
}
/* 에어비앤비 둘러보기 end */
.ad-img1 {
background-image: url(./images/ad1.jpg);
border-radius: 15px;
margin: 40px 0px;
height: 350px;
background-size: 100% 100%;
}
/* 추천 여행지 start */
.img-box {
margin-top: 20px;
display: grid;
grid-template-columns: auto auto auto auto auto;
justify-content: space-between;
grid-gap: 10px;
}
.img {
height: 250px;
background-size: 100% 100%;
}
/* 추천 여행지 end */
/* 에어비앤비 플러스를 만나보세요! start */
.ad-img2 {
background-image: url(./images/ad2.png);
margin: 20px 0px;
height: 350px;
background-size: 100% 100%;
}
/* 에어비앤비 플러스를 만나보세요! end */
/* 전 세계 숙소 start */
.home {
width: 260px;
}
.home-box {
margin-top: 20px;
display: grid;
grid-template-columns: auto auto auto auto;
justify-content: space-between;
grid-gap: 10px;
}
.grade-box {
display: flex;
}
.home-img {
height: 180px;
background-size: 100% 100%;
}
.text1 {
margin: 3px 0;
font-size: 13px;
color: rgb(117, 117, 117);
}
.text2 {
width: 100%;
font-size: 18px;
font-weight: 800;
color: rgb(63, 61, 61);
}
.text3 {
margin: 5px 5px;
font-size: 12px;
}
.review {
margin: 5px 5px;
font-size: 12px;
}
.star {
font-size: 15px;
font-weight: 800;
color: #1E7773;
}
/* 전 세계 숙소 end */
</style>
</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">특색 있는 숙소와 즐길 거리를 예약하세요.</div>
<table border="1">
<tr>
<td colspan="2" class="search-sub-title">목적지</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="모든 위치">
</td>
</tr>
<tr>
<td class="search-sub-title">체크인</td>
<td class="search-sub-title">체크아웃</td>
</tr>
<tr>
<td><input type="date"></td>
<td><input type="date"></td>
</tr>
<tr>
<td colspan="2" class="search-sub-title">인원</td>
</tr>
<tr>
<td colspan="2">
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
</table>
<div class="button">
<button>검색</button>
</div>
</div>
</header>
<!-- 헤더 end -->
<!-- 바디 start -->
<div class="body">
<!-- 에어비앤비 둘러보기 start -->
<section>
<div class="title">에어비앤비 둘러보기</div>
<div class="card-box">
<div class="card">
<div class="card-img1"></div>
<div class="card-title">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div class="card-img2"></div>
<div class="card-title">트립</div>
</div>
<div class="card">
<div class="card-img3"></div>
<div class="card-title">어드벤처</div>
</div>
<div class="card">
<div class="card-img4"></div>
<div class="card-title">레스토랑</div>
</div>
</div>
<div class="ad-img1">
</div>
</section>
<!-- 에어비앤비 둘러보기 end -->
<!-- 추천 여행지 start -->
<section>
<div class="title">추천 여행지</div>
<div class="img-box">
<div class="img"><img src="./images/choo1.png"></div>
<div class="img"><img src="./images/choo2.png"></div>
<div class="img"><img src="./images/choo3.png"></div>
<div class="img"><img src="./images/choo4.png"></div>
<div class="img"><img src="./images/choo5.png"></div>
</div>
</section>
<!-- 추천 여행지 end -->
<!-- 에어비앤비 플러스를 만나보세요 start -->
<section>
<div class="title">에어비앤비 플러스를 만나보세요!</div>
<div class="subtitle">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div class="ad-img2"></div>
</section>
<!-- 에어비앤비 플러스를 만나보세요 end -->
<!-- 전 세계 숙소 start -->
<section>
<div class="title">전 세계 숙소</div>
<div class="home-box">
<div class="home">
<div class="home-img"><img src="./images/home1.png"></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="review">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home2.png"></div>
<div class="text1">키클라데스 주택·이아(OIA)</div>
<div class="text2">Unique Architecture Cave House</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">188</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home3.png"></div>
<div class="text1">성 트웬티나인 팜스(TWENTYNINE PALMS)</div>
<div class="text2">Tile House</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">367</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home4.png"></div>
<div class="text1">검증됨·케이프타운</div>
<div class="text2">Morden, Chic Penthouse with Mountain, City & Sea Views</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">177</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home5.png"></div>
<div class="text1">아파트 전체·마드리드(MADRID)</div>
<div class="text2">솔광장에 위치한 개인 스튜디오</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">459</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home6.png"></div>
<div class="text1">집 전체 HUMAC</div>
<div class="text2">Vacation house in etno-eco village Humac</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">119</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home7.png"></div>
<div class="text1">개인실·마라케시</div>
<div class="text2">The Cozy Palace</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">559</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"><img src="./images/home8.png"></div>
<div class="text1">게스트용 별채 전체·로스앤젤레스</div>
<div class="text2">Private Pool House with Amazing views!</div>
<div class="grade-box">
<div class="star">★★★★★</div>
<div class="review">170</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
</div>
</section>
<!-- 전 세계 숙소 end -->
</div>
<!-- 바디 end -->
</main>
</body>
</html>
Share article
![[CSS]Flex](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-29T08%3A31%3A56.243Z-c56fcfc4-c6aa-4237-a706-349c48f8fd9e&w=750&q=75)
![[CSS]Grid](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-29T08%3A29%3A42.567Z-3d8743d9-aad8-4141-b13a-99fc36b580d0&w=750&q=75)