![[HTML/CSS] 14. Airbnb 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T13%3A05%3A59.056Z-130034c4-bcd8-4366-b1d3-751e9bf3e3b9&w=2048&q=75)
1. html 모양 구성
2. 완성
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="root">
<header class="header">
<nav class="nav">
<div class="nav-icon">
<i class="fa-brands fa-airbnb"></i>
</div>
<ul class="nav-list">
<li>호스트가 되어보세요</li>
<li>도움말</li>
<li>회원가입</li>
<li>로그인</li>
</ul>
</nav>
<div class="reservation-container">
<div class="reservation-title">
<h1>특색 있는 숙소와 즐길 거리를 예약하세요.</h1>
</div>
<form class="reservation-form">
<div class="reservation-destination reservation-div">
<div class="reservation-destination-label label">
<label for="destination">목적지</label>
</div>
<div class="reservation-destination-input">
<input
type="text"
placeholder="모든 위치"
id="destination"
/>
</div>
</div>
<div class="reservation-date">
<div
class="reservation-date-checkin label reservation-div"
>
<div><label for="checkin">체크인</label></div>
<div><input type="date" id="checkin" /></div>
</div>
<div
class="reservation-date-checkout label reservation-div"
>
<div>
<label for="checkout">체크아웃</label>
</div>
<div><input type="date" id="checkout" /></div>
</div>
</div>
<div class="reservation-people reservation-div">
<div class="reservation-people-label label">
<label for="인원">인원</label>
</div>
<div class="reservation-people-select">
<select id="인원">
<option value="default">인원</option>
<option value="1">1명</option>
<option value="2">2명</option>
<option value="3">3명</option>
<option value="4">4명</option>
<option value="5">5명</option>
</select>
</div>
</div>
<div class="reservation-btn">
<button>검색</button>
</div>
</form>
</div>
</header>
<main class="main">
<section class="section look-around">
<div class="look-around-title title">
<h2>에어비앤비 둘러보기</h2>
</div>
<div class="look-around-grid">
<div class="look-around-grid-item">
<div><img src="img/card1.jpg" /></div>
<div class="look-around-grid-item-text">
<p>숙소 및 부티크 호텔</p>
</div>
</div>
<div class="look-around-grid-item">
<div><img src="img/card2.jpg" /></div>
<div class="look-around-grid-item-text">
<p>트립</p>
</div>
</div>
<div class="look-around-grid-item">
<div><img src="img/card3.jpg" /></div>
<div class="look-around-grid-item-text">
<p>어드벤처</p>
</div>
</div>
<div class="look-around-grid-item">
<div><img src="img/card4.jpg" /></div>
<div class="look-around-grid-item-text">
<p>레스토랑</p>
</div>
</div>
</div>
<div class="look-around-view">
<img src="img/ad1.jpg" />
</div>
</section>
<section class="section recommend-places">
<div class="recommend-places-title title">
<h2>추천 여행지</h2>
</div>
<div class="recommend-places-grid">
<div class="recommend-places-grid-item">
<img src="img/choo1.png" />
</div>
<div class="recommend-places-grid-item">
<img src="img/choo2.png" />
</div>
<div class="recommend-places-grid-item">
<img src="img/choo3.png" />
</div>
<div class="recommend-places-grid-item">
<img src="img/choo4.png" />
</div>
<div class="recommend-places-grid-item">
<img src="img/choo5.png" />
</div>
</div>
</section>
<section class="section ad">
<div class="ad-title title">
<h2>에어비앤비 플러스를 만나보세요!</h2>
<p>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</p>
</div>
<div class="ad-view">
<img src="img/ad2.png" />
</div>
</section>
<section class="section lodging">
<div class="lodging-title title">
<h2>전 세계 숙소</h2>
</div>
<div class="lodging-grid">
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home1.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
오두막▪BALIAN BEACH, BALI
</p>
<h3 class="lodging-grid-item-title">
BALIAN TREEHOUSE w beautiful pool
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>185</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home2.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
키클라데스 주택▪이아(OIA)
</p>
<h3 class="lodging-grid-item-title">
Unique Architecture Cave House
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>188</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home3.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
성▪트웬티나인 팜스(TWENTYNINE PALMS)
</p>
<h3 class="lodging-grid-item-title">
Tile House
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>367</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home4.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
검증됨▪케이프타운
</p>
<h3 class="lodging-grid-item-title">
Modern, Chic Penthouse with Mountain, City &
Sea Views
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>177</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home5.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
아파트 전체▪마드리드(MADRID)
</p>
<h3 class="lodging-grid-item-title">
솔광장에 위치한 개인 스튜디오
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>459</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home6.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
집 전체▪HUMAC
</p>
<h3 class="lodging-grid-item-title">
Vacation house in etno-eco vaillage Humac
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>119</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home7.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
개인실▪마라케시
</p>
<h3 class="lodging-grid-item-title">
The Cozy Palace
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>559</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
<div class="lodging-grid-item">
<div class="lodging-grid-item-img">
<img src="img/home8.png" />
</div>
<div class="lodging-grid-item-info">
<p class="lodging-grid-item-location">
게스트용 별채 전체▪로스앤젤레스
</p>
<h3 class="lodging-grid-item-title">
Private Pool House with Amazing Views!
</h3>
<div class="lodging-grid-item-footer">
<div
class="lodging-grid-item-footer-rating"
>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<div>170</div>
<div>슈퍼호스트</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>CSS 코드
폴더 구조
style.css
/* css/style.css */
@import url("common.css");
@import url("header.css");
@import url("main.css");common.css
/* css/common.css */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
li {
list-style: none;
}
input,
select {
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 0;
font-size: 16px;
}
input,
label,
select {
width: 100%;
}
button {
border: none;
}header.css
/* css/header.css */
.header {
height: 95vh;
background-image: url(../img/background.jpg);
background-size: cover;
background-position: center;
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.nav-icon {
font-size: 36px;
color: white;
}
.nav-list {
display: flex;
gap: 30px;
}
.nav-list li {
color: white;
font-weight: 600;
cursor: pointer;
}
.reservation-container {
position: absolute;
top: 150px;
left: 50px;
background-color: white;
width: 430px;
padding: 20px 30px;
border-radius: 5px;
}
.reservation-title {
font-size: 15px;
text-wrap: balance;
}
.reservation-form {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.reservation-form label {
font-weight: 600;
font-size: 13px;
}
.reservation-div {
display: grid;
gap: 10px;
}
.reservation-date {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.reservation-btn {
display: flex;
justify-content: end;
padding: 20px 0;
}
.reservation-btn button {
background-color: rgb(255, 94, 94);
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
}main.css
/* css/main.css */
.main {
padding: 30px 80px;
display: grid;
gap: 30px;
}
.section {
display: grid;
gap: 30px;
}
.look-around-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.look-around-grid-item {
display: grid;
grid-template-columns: 1fr 3fr;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.look-around-grid-item-text {
padding: 25px 10px;
display: flex;
align-items: center;
font-weight: 600;
}
.look-around-view {
border-radius: 30px;
overflow: hidden;
}
.recommend-places-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.lodging-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lodging-grid-item {
display: grid;
grid-template-rows: 180px;
}
.lodging-grid-item-img {
margin-bottom: 5px;
}
.lodging-grid-item-info {
display: grid;
gap: 5px;
align-content: start;
}
.lodging-grid-item-location {
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
}
.lodging-grid-item-title {
font-weight: 600;
font-size: 18px;
}
.lodging-grid-item-footer {
display: flex;
align-items: center;
font-size: 12px;
gap: 5px;
}
.lodging-grid-item-footer-rating {
font-size: 8px;
}Share article
![[프로그래머스] 17. 공배수](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T13%3A12%3A55.874Z-e30e4735-849e-4126-8892-49b57413b997&w=750&q=75)
![[프로그래머스] 16. n의 배수](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T13%3A09%3A33.283Z-04d1c1e7-6b41-425c-bab2-0dd05f33afac&w=750&q=75)
![[HTML/CSS] 13. 전체 실습 예제](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T13%3A04%3A49.598Z-8850b992-ec2d-4eab-8c9a-367f9461370c&w=750&q=75)
![[HTML/CSS] 12. Card 박스 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T13%3A02%3A44.324Z-476c7bf2-fbea-4297-9df2-8eecf531ff3d&w=750&q=75)