![[HTML/CSS] 15. Airbnb 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T08%3A37%3A29.820Z-67eb2957-10da-4e5c-8fa9-80743a9df37a&w=2048&q=75)
Airbnb 홈페이지
- 예제의 Airbnb 홈페이지를 참고하여 HTML 파일로 제작하시오.
문제 분석
- header
- background-image
- nav
- logo
- link
- search-box
- 목적지
- 체크인/체크아웃
- 인원
- 검색 버튼
- main
- card
- ad-img1
- card2 (recommended)
- ad-img2 (airbnb plus)
- hotels
코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- <link rel="stylesheet" href="css/style.css"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
/* border: 1px dotted red; */
}
.margin {
margin: 20px 0px;
}
.container {
width: 100%;
}
.header {
position: relative;
background-image: url(./images/background.jpg);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
height: 900px;
margin-bottom: 20px;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 0px 30px;
}
.logo {
margin: 5px;
}
.menu ul {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px 30px;
width: 100%;
list-style-type: none;
}
.menu a {
color: white;
font-weight: 700;
text-decoration: none;
}
.search-title {
font-size: 30px;
font-weight: bold;
}
.search-box {
background-color: white;
position: absolute;
top: 15%;
left: 5%;
width: 425px;
padding: 20px 50px;
border-radius: 10px;
}
.search-input-title {
font-size: 12px;
font-weight: 700;
}
.search-input-text {
width: 100%;
height: 40px;
border: 1px solid lightgray;
}
.search-input-date {
width: 160px;
height: 40px;
border: 1px solid lightgray;
}
.search-input-people {
width: 100%;
height: 40px;
border: 1px solid lightgray;
}
.search-date-box {
display: flex;
justify-content: space-between;
}
.search-btn-box {
display: flex;
justify-content: end;
}
.search-btn {
background-color: rgb(255, 100, 100);
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
width: 18%;
}
.main {
margin: 30px 80px;
}
.card-title {
font-size: 24px;
font-weight: bold;
}
.card-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.card-image {
width: 75px;
height: 75px;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.card-item {
display: flex;
border-radius: 15px;
border: 1px solid #e0e0e0;
box-shadow: 2px 2px 1px 0px rgb(0, 0, 0, 0.2);
margin: 5px;
}
.card-content {
font-size: 15px;
font-weight: bold;
align-self: center;
margin-left: 5px;
}
.back-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.recommend-box {
display: flex;
justify-content: space-between;
}
.recommend-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hotel-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.hotel-item {
margin: 10px 0px;
}
.hotel-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hotel-info {
font-size: 12px;
font-weight: 400;
color: gray;
}
.hotel-recommend {
font-size: 18px;
font-weight: 700;
}
.hotel-rating {
font-size: 12px;
}
.hotel-rating div {
display: inline-block;
}
.hotel-rating-star {
display: flex;
font-size: 10px;
align-items: center;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<div class="logo"><i class="fab fa-airbnb fa" style="font-size:36px;color:white;"></i></div>
<div class="menu">
<ul>
<li><a href="#">호스트가 되어보세요</a></li>
<li><a href="#">도움말</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">로그인</a></li>
</ul>
</div>
</div>
<div class="search-box">
<div class="search-title margin">특색 있는 숙소와 즐길 거리를 예약하세요.</div>
<div class="search-input margin">
<div class="search-input-title">목적지</div>
<div><input class="search-input-text" type="text" placeholder="모든 위치"></div>
</div>
<div class="search-date-box margin">
<div class="search-input">
<div class="search-input-title">체크인</div>
<div><input class="search-input-date" type="date"></div>
</div>
<div class="search-input">
<div class="search-input-title">체크아웃</div>
<div><input class="search-input-date" type="date"></div>
</div>
</div>
<div class="search-input margin">
<div class="search-input-title">인원</div>
<div><select class="search-input-people">
<option value="1">인원</option>
</select></div>
</div>
<div class="search-btn-box"><button class="search-btn">검색</button></div>
</div>
</div>
<div class="main">
<div class="card-title margin">에어비엔비 둘러보기</div>
<div class="card-box margin">
<div class="card-item">
<div class="card-image">
<img src="./images/card1.jpg" alt="">
</div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
<div class="card-item">
<div class="card-image">
<img src="./images/card2.jpg" alt="">
</div>
<div class="card-content">트립</div>
</div>
<div class="card-item">
<div class="card-image">
<img src="./images/card3.jpg" alt="">
</div>
<div class="card-content">어드벤처</div>
</div>
<div class="card-item">
<div class="card-image">
<img src="./images/card4.jpg" alt="">
</div>
<div class="card-content">레스토랑</div>
</div>
</div>
<div class="back-image margin">
<img src="./images/ad1.jpg" alt="">
</div>
<div>
<div class="card-title margin">추천 여행지</div>
<div class="recommend-box margin">
<div class="card-item">
<div class="recommend-image">
<img src="./images/choo1.png" alt="">
</div>
</div>
<div class="card-item">
<div class="recommend-image">
<img src="./images/choo2.png" alt="">
</div>
</div>
<div class="card-item">
<div class="recommend-image">
<img src="./images/choo3.png" alt="">
</div>
</div>
<div class="card-item">
<div class="recommend-image">
<img src="./images/choo4.png" alt="">
</div>
</div>
<div class="card-item">
<div class="recommend-image">
<img src="./images/choo5.png" alt="">
</div>
</div>
</div>
</div>
<div>
<div class="card-title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div class="back-image margin">
<img src="./images/ad2.png" alt="">
</div>
</div>
<div>
<div class="card-title margin">전 세계 숙소</div>
<div class="hotel-box">
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home1.png" alt="">
</div>
<div class="hotel-info">오두막 ㆍ BALIAN BEACH, BALI</div>
<div class="hotel-recommend">BALIAN TREEHOUSE w beautiful pool</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>185</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home2.png" alt="">
</div>
<div class="hotel-info">키클라데스 주택 ㆍ 이아(OIA)</div>
<div class="hotel-recommend">Unique Architecture Cave House</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>188</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home3.png" alt="">
</div>
<div class="hotel-info">성 ㆍ 프웬티나인 팜스<br>(TWENTYNINE PALMS)</div>
<div class="hotel-recommend">Tile House</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>367</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home4.png" alt="">
</div>
<div class="hotel-info">검증됨 ㆍ 케이프 타운</div>
<div class="hotel-recommend">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>177</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home5.png" alt="">
</div>
<div class="hotel-info">아파트 전체 ㆍ 마드리드<br>(MADRID)</div>
<div class="hotel-recommend">솔광장에 위치한 개인 스튜디오</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>459</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home6.png" alt="">
</div>
<div class="hotel-info">집 전체 ㆍ HUMAC</div>
<div class="hotel-recommend">Vacatoin house in etno-eco village Humac</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>119</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home7.png" alt="">
</div>
<div class="hotel-info">개인실 ㆍ 마라케시</div>
<div class="hotel-recommend">The Cozy Palace</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>559</div>
<div>슈퍼호스트</div>
</div>
</div>
<div class="hotel-item">
<div class="hotel-image">
<img src="./images/home8.png" alt="">
</div>
<div class="hotel-info">게스트용 별채 전체 ㆍ 로스앤젤레스</div>
<div class="hotel-recommend">Private Pool House with Amazing Views!</div>
<div class="hotel-rating">
<div class="hotel-rating-star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div>170</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>결과
Share article
![[환경 세팅] 10. Apache Tomcat 설치](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-13T00%3A08%3A12.091Z-1fee11a2-c4d7-42fa-a7e8-ab6327dd8b80&w=750&q=75)
![[HTML/CSS] 17. Display Design](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T08%3A37%3A12.848Z-345a2052-0591-4097-8da1-ff832a222aa6&w=750&q=75)
![[HTML/CSS] 14. 전체 실습 예제](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T08%3A37%3A44.807Z-285a1457-4ca7-4942-ba90-f31021f893fb&w=750&q=75)
![[HTML/CSS] 13. Card 박스 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T08%3A38%3A52.397Z-93a534d8-a362-4405-acbd-152fa2baae75&w=750&q=75)