![[HTML/CSS] 16. 최종 실습 (Airbnb 만들기)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A15%3A32.251Z-f7ffc512-c30f-45eb-8371-db6b6b8d6bbf&w=2048&q=75)
1. 문제 분석
2. 뼈대 만들기
3. 레이아웃
4. CSS
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
div{
}
.header{
background-image: url(images/background.jpg);
background-size: 100% 100%;
height: 850px;
}
.logo img{
width: 50px;
height: 50px;
margin-left: 10px;
margin-top: 10px;
}
.nav{
display: flex;
justify-content: space-between;
margin-bottom: 55px;
}
.menu{
display: flex;
gap: 20px;
margin-top: 20px;
font-weight: bold;
color: white;
}
/* 메인 */
.s-title{
font-size: 23px;
font-weight: bold;
color: rgb(82, 82, 82);
margin-left: 70px;
margin-right: 70px;
margin-top: 30px;
margin-bottom: 20px;
}
.s1-main-img{
height: 350px;
margin-left: 70px;
margin-right: 70px;
margin-top: 30px;
margin-bottom: 10px;
border-radius: 30px;
}
.s1-main-img img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 30px;
}
.card-list{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 30px;
}
.card-item{
display: grid;
grid-template-columns: 2fr 7fr;
border: 1px solid silver;
border-radius: 7px;
height: 70px;
}
.card-img1{
background-image: url(images/card1.jpg);
background-size: 100% 100%;
}
.card-img2{
background-image: url(images/card2.jpg);
background-size: 100% 100%;
}
.card-img3{
background-image: url(images/card3.jpg);
background-size: 100% 100%;
}
.card-img4{
background-image: url(images/card4.jpg);
background-size: 100% 100%;
}
.card-content{
display: flex;
align-items: center;
margin-left: 10px;
}
.s2-img-box{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 30px;
}
.s2-img-item{
height: 250px;
}
.s2-img-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s3-content{
margin-left: 70px;
margin-right: 70px;
margin-bottom: 30px;
}
.s3-img{
margin-left: 70px;
margin-right: 70px;
}
.s3-img img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s4-grid-box{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 30px;
}
.s4-grid-item{
display: flex;
height: 250px;
flex-direction: column;
justify-content: space-between;
}
.s4-img{
height:160px;
}
.s4-img img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s4-sub-title{
font-size: 11px;
color: rgb(136, 136, 136);
}
.s4-title{
font-weight: bold;
}
.s4-footer{
display: flex;
justify-content: start;
gap: 2px;
}
.rating{
font-size: 11px;
}
.rating-count{
font-size: 11px;
}
.host-type{
font-size: 11px;
}
</style>
</head>
<body>
<div class="root">
<div class="header">
<div class="nav">
<div class="logo">
<img src="images/airbnb.png">
</div>
<div class="menu">
<div>호스트가 되어보세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>
</div>
<div class="content">
<div class="reservation">
<div class="title">특색 있는 숙소와 즐길 거리를 예약하세요</div>
<div class="destination">목적지</div>
<div class="checkinout">체크인-체크아웃</div>
<div class="people">인원</div>
<div class="search">검색</div>
</div>
</div>
</div>
<div class="main">
<div class="section1">
<div class="s-title">에어비앤비 둘러보기</div>
<div class="card-list">
<div class="card-item">
<div class="card-img1"></div>
<div class="card-content">숙소 및 부티크 호텔</div>
</div>
<div class="card-item">
<div class="card-img2"></div>
<div class="card-content">트립</div>
</div>
<div class="card-item">
<div class="card-img3"></div>
<div class="card-content">어드벤처</div>
</div>
<div class="card-item">
<div class="card-img4"></div>
<div class="card-content">레스토랑</div>
</div>
</div>
<div class="s1-main-img">
<img src="images/ad1.jpg">
</div>
</div>
<div class="section2">
<div class="s-title">추천 여행지</div>
<div class="s2-img-box">
<div class="s2-img-item">
<img src="images/choo1.png">
</div>
<div class="s2-img-item">
<img src="images/choo2.png">
</div>
<div class="s2-img-item">
<img src="images/choo3.png">
</div>
<div class="s2-img-item">
<img src="images/choo4.png">
</div>
<div class="s2-img-item">
<img src="images/choo5.png">
</div>
</div>
</div>
<div class="section3">
<div class="s-title">에어비앤비 플러스를 만들어보세요!</div>
<div class="s3-content">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div class="s3-img">
<img src="images/ad2.png">
</div>
</div>
<div class="section4">
<div class="s-title">전 세계 숙소</div>
<div class="s4-grid-box">
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home1.png">
</div>
<div class="s4-sub-title">오두막 · BALIAN BEACH, BALI</div>
<div class="s4-title">BALIAN TREEHOUSE w beautiful pool</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">185</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home2.png">
</div>
<div class="s4-sub-title">키클라데스 주택 · 이아(OIA)</div>
<div class="s4-title">Unique Architecture Cave House</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">188</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home3.png">
</div>
<div class="s4-sub-title">성 · 트웬티나인 팜스(TWENTYNINE PALMS)</div>
<div class="s4-title">Tile House</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">367</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home4.png">
</div>
<div class="s4-sub-title">검증됨 · 케이프타운</div>
<div class="s4-title">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">177</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home5.png">
</div>
<div class="s4-sub-title">아파트 전체 · 마드리드(MADRID)</div>
<div class="s4-title">솔광장에 위치한 개인 스튜디오l</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">459</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home6.png">
</div>
<div class="s4-sub-title">집 전체 · HUMAC</div>
<div class="s4-title">Vacation house in etno-eco village Humac</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">119</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home7.png">
</div>
<div class="s4-sub-title">개인실 · 마라케시</div>
<div class="s4-title">The Cozy Palace</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">559</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
<div class="s4-grid-item">
<div class="s4-content">
<div class="s4-img">
<img src="images/home8.png">
</div>
<div class="s4-sub-title">게스트용 별채 전체 · 로스앤젤레스</div>
<div class="s4-title">Private Pool House with Amazing Views!</div>
</div>
<div class="s4-footer">
<div class="rating">★★★★★</div>
<div class="rating-count">170</div>
<div class="host-type">슈퍼호스트</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Share article
![[환경세팅] 8. Apache Tomcat 설치](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A22%3A56.483Z-c09aa6bb-8f83-43aa-a689-f957a5089d4a&w=750&q=75)
![[환경세팅] 7. Cursor 설치](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A21%3A50.083Z-6381f9ee-71c2-470e-87de-257d113d4d4d&w=750&q=75)
![[CSS] 15. 공통 CSS 추출](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A14%3A52.528Z-8ae76f28-8cad-4a54-a57c-f63e01f15d00&w=750&q=75)
![[HTML/CSS] 14. 전체 실습](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A13%3A47.037Z-c6dd320b-fbb1-460a-9ca0-e7e15450805a&w=750&q=75)