1. 문제
아래와 같은 화면을 출력하시오.
2. 풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.whole {
display: grid;
justify-content: center;
}
.airbnb {
width: 1000px;
}
header {
padding: 15px;
background-image: url(background.jpg);
background-size: cover;
height: 600px;
display: grid;
grid-template-rows: max-content 1fr;
}
.header_top {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.header_menu {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
column-gap: 25px;
}
.header_text {
color: white;
font-size: 15px;
}
.header_reservation {
width: 280px;
margin-top: 50px;
margin-left: 30px;
background-color: white;
border-radius: 10px;
padding: 30px 20px 30px 20px;
}
.reservation_title {
width: 80%;
font-size: 24px;
color: rgb(68, 68, 68);
font-weight: 600;
}
.reservation_text {
font-size: 13px;
color: rgb(68, 68, 68);
font-weight: 500;
}
table {
width: 100%;
}
input {
width: 98%;
height: 30px;
border: 1px solid rgb(204, 204, 204);
}
.btn_box1 {
display: grid;
justify-content: end;
}
.reservation_btn {
width: 60px;
height: 35px;
border: none;
border-radius: 5px;
font-size: 15px;
color: white;
background-color: rgb(255, 94, 94);
}
.title {
font-size: 25px;
font-weight: 700;
color: rgb(87, 87, 87);
}
.subtitle {
font-size: 16px;
font-weight: 500;
color: rgb(87, 87, 87);
}
.nav_menu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 5px;
}
.nav_items {
display: grid;
grid-template-columns: 2fr 5fr;
border-radius: 5px;
border: 1px solid rgb(185, 185, 185);
box-shadow: 1px 1px 1px 1px rgb(209, 209, 209);
}
.nav_img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu_box {
display: grid;
align-items: center;
}
.menu_name {
font-size: 15px;
font-weight: 500;
padding-left: 5px;
}
.img1 {
height: 300px;
}
.ima_ad1 {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.trip_box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
column-gap: 5px;
height: 250px;
background-color: beige;
}
.trip_places {
display: grid;
grid-template-rows: 4fr 1fr;
}
.choo1 {
background-image: url(choo1.png);
width: 100%;
height: 100%;
object-fit: cover;
}
.choo2 {
background-image: url(choo2.png);
width: 100%;
height: 100%;
object-fit: cover;
}
.choo3 {
background-image: url(choo3.png);
width: 100%;
height: 100%;
object-fit: cover;
}
.choo4 {
background-image: url(choo4.png);
width: 100%;
height: 100%;
object-fit: cover;
}
.choo5 {
background-image: url(choo5.png);
width: 100%;
height: 100%;
object-fit: cover;
}
.city {
display: grid;
justify-content: center;
align-items: end;
color: white;
font-size: 20px;
font-weight: 500;
}
.price {
display: grid;
justify-content: center;
color: white;
font-size: 15px;
font-weight: 400;
}
.img2 {
height: 250px;
display: grid;
align-items: end;
background-image: url(ad2.png);
background-position: center;
}
.btn_box2 {
display: grid;
justify-content: center;
margin-bottom: 60px;
}
.hotel_btn {
width: 140px;
height: 50px;
background-color: white;
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
}
.hotel_box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 5px;
}
.hotel_img {
height: 150px;
}
.home_img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hotel_subtitle {
color: gray;
font-size: 13px;
}
.hotel_title {
font-size: 17px;
font-weight: 600;
}
.review_box {
display: grid;
grid-template-columns: max-content max-content max-content;
column-gap: 5px;
}
.star {
color: green;
font-size: 13px;
}
.num_host {
color: gray;
font-size: 13px;
}
.mb20 {
margin-bottom: 20px;
}
.mb10 {
margin-bottom: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt10 {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="whole">
<div class="airbnb">
<header>
<div class="header_top">
<div>
<div class="header_text">௹</div>
</div>
<div class="header_menu">
<div class="header_text">호스트가 되어보세요</div>
<div class="header_text">도움말</div>
<div class="header_text">회원가입</div>
<div class="header_text">로그인</div>
</div>
</div>
<div class="header_box">
<div class="header_reservation">
<div class="reservation_title mb20">
특색 있는 숙소와 즐길 거리를 예약하세요.
</div>
<div>
<table>
<tr>
<td class="reservation_text" colspan="2">목적지</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="모든 위치" />
</td>
</tr>
<tr>
<td class="reservation_text">체크인</td>
<td class="reservation_text">체크아웃</td>
</tr>
<tr>
<td><input type="date" /></td>
<td><input type="date" /></td>
</tr>
<tr>
<td class="reservation_text" colspan="2">인원</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="인원" />
</td>
</tr>
</table>
</div>
<div class="btn_box1 mt10">
<button class="reservation_btn">검색</button>
</div>
</div>
</div>
</header>
<nav>
<div class="title mt20 mb10">에어비앤비 둘러보기</div>
<div class="nav_menu">
<div class="nav_items">
<div>
<img class="nav_img" src="card1.jpg" />
</div>
<div class="menu_box">
<div class="menu_name">숙소 및 부티크 호텔</div>
</div>
</div>
<div class="nav_items">
<div>
<img class="nav_img" src="card2.jpg" />
</div>
<div class="menu_box">
<div class="menu_name">트립</div>
</div>
</div>
<div class="nav_items">
<div>
<img class="nav_img" src="card3.jpg" />
</div>
<div class="menu_box">
<div class="menu_name">어드벤처</div>
</div>
</div>
<div class="nav_items">
<div>
<img class="nav_img" src="card4.jpg" />
</div>
<div class="menu_box">
<div class="menu_name">레스토랑</div>
</div>
</div>
</div>
</nav>
<main>
<section>
<div class="img1 mt20 mb20">
<img class="ima_ad1" src="ad1.jpg" />
</div>
</section>
<section>
<div class="title mb10">추천 여행지</div>
<div class="trip_box">
<div class="trip_places choo1">
<div class="city">파리</div>
<div class="price">1박 평균 ₩131,641</div>
</div>
<div class="trip_places choo2">
<div class="city">도쿄</div>
<div class="price">1박 평균 ₩103,762</div>
</div>
<div class="trip_places choo3">
<div class="city">런던</div>
<div class="price">1박 평균 ₩149,512</div>
</div>
<div class="trip_places choo4">
<div class="city">로스앤젤레스</div>
<div class="price">1박 평균 ₩159,646</div>
</div>
<div class="trip_places choo5">
<div class="city">바르셀로나</div>
<div class="price">1박 평균 ₩127,166</div>
</div>
</div>
</section>
<section>
<div class="title mt20">에어비앤비 플러스를 만나보세요!</div>
<div class="subtitle mb10">
퀄리티와 인테리어 디자인이 검증한 숙소 셀렉션
</div>
<div class="img2">
<div class="btn_box2">
<button class="hotel_btn">숙소 둘러보기 ></button>
</div>
</div>
</section>
<section>
<div class="title mt20 mb10">전 세계 숙소</div>
<div class="hotel_box">
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home1.png" />
</div>
<div class="hotel_subtitle">오두막·BALIAN BEACH, BALI</div>
<div class="hotel_title">BALIAN TREEHOUSE w beautiful pool</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">185</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home2.png" />
</div>
<div class="hotel_subtitle">키클라데스 주택·이아(OIA)</div>
<div class="hotel_title">Unique Architecture Cave House</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">188</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home3.png" />
</div>
<div class="hotel_subtitle">
성·트웬티나인 팜스(TWENTYNINE PALMS)
</div>
<div class="hotel_title">Tile House</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">367</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home4.png" />
</div>
<div class="hotel_subtitle">검증됨·케이프타운</div>
<div class="hotel_title">
Modern, Chic Penthouse with Mountain, City & Sea Views
</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">177</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home5.png" />
</div>
<div class="hotel_subtitle">아파트 전체·마드리드(MADRID)</div>
<div class="hotel_title">솔광장에 위치한 개인 스튜디오</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">459</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home6.png" />
</div>
<div class="hotel_subtitle">집 전체·HUMAC</div>
<div class="hotel_title">
Vacation house in etno-eco village Humac
</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">119</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home7.png" />
</div>
<div class="hotel_subtitle">개인실·마라케시</div>
<div class="hotel_title">The Cozy Palace</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">559</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
<div class="mb20">
<div class="hotel_img">
<img class="home_img" src="home8.png" />
</div>
<div class="hotel_subtitle">
게스트용 별채 전체·로스앤젤레스
</div>
<div class="hotel_title">
Private Pool House with Amazing Views!
</div>
<div class="review_box">
<div class="star">★★★★★</div>
<div class="num_host">170</div>
<div class="num_host">슈퍼호스트</div>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
</body>
</html>
3. 정답
1️⃣ 뼈대 만들기
1) Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box"></div>
</div>
</header>
</body>
</html>
1-1) Header > search_box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
</body>
</html>
2) Main
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box"></div>
<div class="cho_box"></div>
<div class="ad_box"></div>
<div class="home_box"></div>
</main>
</body>
</html>
2-1) 둘러보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div>
<div>
<div>카드이미지</div>
<div>숙소 및 부티크 호텔</div>
</div>
<div>
<div>카드이미지</div>
<div>트립</div>
</div>
<div>
<div>카드이미지</div>
<div>어드벤처</div>
</div>
<div>
<div>카드이미지</div>
<div>레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box"></div>
<div class="ad_box"></div>
<div class="home_box"></div>
</main>
</body>
</html>
2-2) 추천 여행지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div>
<div>
<div>카드이미지</div>
<div>숙소 및 부티크 호텔</div>
</div>
<div>
<div>카드이미지</div>
<div>트립</div>
</div>
<div>
<div>카드이미지</div>
<div>어드벤처</div>
</div>
<div>
<div>카드이미지</div>
<div>레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box"></div>
<div class="home_box"></div>
</main>
</body>
</html>
2-3) 광고
➡️ 이미지 위에 버튼 만들거면 absolute
이미지 백그라운드 배경으로 하면 나중에 html에서 for문 돌릴 수 없어서 잘 안함!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div>
<div>
<div>카드이미지</div>
<div>숙소 및 부티크 호텔</div>
</div>
<div>
<div>카드이미지</div>
<div>트립</div>
</div>
<div>
<div>카드이미지</div>
<div>어드벤처</div>
</div>
<div>
<div>카드이미지</div>
<div>레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box"></div>
</main>
</body>
</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>
<style>
div {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">검색 제목</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div><input type="text" placeholder="모든 위치" /></div>
<div>
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div>
<div><input type="date" /></div>
<div><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div>
<div>
<div>카드이미지</div>
<div>숙소 및 부티크 호텔</div>
</div>
<div>
<div>카드이미지</div>
<div>트립</div>
</div>
<div>
<div>카드이미지</div>
<div>어드벤처</div>
</div>
<div>
<div>카드이미지</div>
<div>레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
2️⃣ 레이아웃
1) header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 880px;
background-color: beige;
/* background-image: url(static/images/background.jpg);
background-size: cover; */
}
nav {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.logo {
display: grid;
align-items: center;
}
.nav_body {
padding: 30px 0px;
}
.menus {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
}
.search_box {
width: 500px;
position: relative;
left: 50px;
}
.input_box {
display: grid;
grid-template-columns: auto;
}
.search1 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search3 {
display: grid;
justify-content: end;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">
특색 있는 숙소와 즐길<br />
거리를 예약하세요
</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="모든 위치" />
</div>
<div class="search1">
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div class="search2">
<div class="input_box"><input type="date" /></div>
<div class="input_box"><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div class="input_box">
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="search3">
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div>
<div>
<div>카드이미지</div>
<div>숙소 및 부티크 호텔</div>
</div>
<div>
<div>카드이미지</div>
<div>트립</div>
</div>
<div>
<div>카드이미지</div>
<div>어드벤처</div>
</div>
<div>
<div>카드이미지</div>
<div>레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
2) around_box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 820px;
background-color: beige;
/* background-image: url(static/images/background.jpg);
background-size: cover; */
}
nav {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.nav_body {
padding: 30px 0px;
}
.menus {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
}
.search_box {
width: 500px;
position: relative;
left: 50px;
}
.input_box {
display: grid;
grid-template-columns: auto;
}
.search1 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search3 {
display: grid;
justify-content: end;
}
main {
padding: 0px 50px;
}
.around_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.around_item {
display: grid;
grid-template-columns: 2fr 5fr;
}
.around_text {
display: grid;
align-items: center;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">
특색 있는 숙소와 즐길<br />
거리를 예약하세요
</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="모든 위치" />
</div>
<div class="search1">
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div class="search2">
<div class="input_box"><input type="date" /></div>
<div class="input_box"><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div class="input_box">
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="search3">
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div class="around_list">
<div class="around_item">
<div>img</div>
<div class="around_text">숙소 및 부티크 호텔</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">트립</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">어드벤처</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
3) cho_box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 820px;
background-color: beige;
/* background-image: url(static/images/background.jpg);
background-size: cover; */
}
nav {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.nav_body {
padding: 30px 0px;
}
.menus {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
}
.search_box {
width: 500px;
position: relative;
left: 50px;
}
.input_box {
display: grid;
grid-template-columns: auto;
}
.search1 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search3 {
display: grid;
justify-content: end;
}
main {
padding: 0px 50px;
}
.around_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.around_item {
display: grid;
grid-template-columns: 2fr 5fr;
}
.around_text {
display: grid;
align-items: center;
}
.cho_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">
특색 있는 숙소와 즐길<br />
거리를 예약하세요
</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="모든 위치" />
</div>
<div class="search1">
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div class="search2">
<div class="input_box"><input type="date" /></div>
<div class="input_box"><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div class="input_box">
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="search3">
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div class="around_list">
<div class="around_item">
<div>img</div>
<div class="around_text">숙소 및 부티크 호텔</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">트립</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">어드벤처</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
4) ad_box
레이아웃 변경하지 않아도 됨
5) home_box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 820px;
background-color: beige;
/* background-image: url(static/images/background.jpg);
background-size: cover; */
}
nav {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.nav_body {
padding: 30px 0px;
}
.menus {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
}
.search_box {
width: 500px;
position: relative;
left: 50px;
}
.input_box {
display: grid;
grid-template-columns: auto;
}
.search1 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search3 {
display: grid;
justify-content: end;
}
main {
padding: 0px 50px;
}
.around_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.around_item {
display: grid;
grid-template-columns: 2fr 5fr;
}
.around_text {
display: grid;
align-items: center;
}
.cho_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.home_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">logo</div>
<div class="menus">
<div>m1</div>
<div>m2</div>
<div>m3</div>
<div>m4</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">
특색 있는 숙소와 즐길<br />
거리를 예약하세요
</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="모든 위치" />
</div>
<div class="search1">
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div class="search2">
<div class="input_box"><input type="date" /></div>
<div class="input_box"><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div class="input_box">
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="search3">
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div class="around_list">
<div class="around_item">
<div>img</div>
<div class="around_text">숙소 및 부티크 호텔</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">트립</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">어드벤처</div>
</div>
<div class="around_item">
<div>img</div>
<div class="around_text">레스토랑</div>
</div>
</div>
<div>이미지</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
<div class="cho_item">그림</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
3️⃣ 디자인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 820px;
background-image: url(static/images/background.jpg);
background-size: cover;
}
nav {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
}
.logo {
display: grid;
align-items: center;
color: white;
font-size: 35px;
}
.nav_body {
padding: 30px 0px;
}
.menus {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
column-gap: 10px;
}
.menus > div {
color: white;
}
.search_box {
width: 500px;
position: relative;
left: 50px;
background-color: white;
padding: 20px;
}
.search_title {
font-size: 30px;
font-weight: 600;
color: rgb(85, 85, 85);
}
.search_subtitle {
font-size: 12px;
font-weight: 600;
color: rgb(85, 85, 85);
}
.input_box {
display: grid;
grid-template-columns: auto;
}
.search_box input,
select {
height: 35px;
border: 1px solid gray;
border-radius: 3px;
}
.search1 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.search3 {
display: grid;
justify-content: end;
}
.search3 button {
background-color: #ff5a5f;
color: white;
width: 70px;
height: 45px;
font-size: 15px;
font-weight: 700;
border-radius: 6px;
border: 0;
cursor: pointer;
}
main {
padding: 0px 50px;
}
.main_title {
font-size: 20px;
font-weight: 600;
color: rgb(68, 66, 66);
margin: 0 0 20px 0;
}
.around_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.around_item {
display: grid;
grid-template-columns: 100px auto;
}
.img_item {
height: 100px;
}
.img_item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.around_text {
display: grid;
align-items: center;
}
.around_pic {
height: 300px;
}
.around_pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cho_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.cho_item {
height: 250px;
position: relative;
}
.ghost {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
color: white;
font-size: 17px;
font-weight: 500;
}
.cho_item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>
</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="menus">
<div>호스트가 되어보세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>
</nav>
<div class="nav_body">
<div class="search_box">
<div class="search_title">
특색 있는 숙소와 즐길<br />
거리를 예약하세요
</div>
<div class="search_subtitle">목적지</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="모든 위치" />
</div>
<div class="search1">
<div class="search_subtitle">체크인</div>
<div class="search_subtitle">체크아웃</div>
</div>
<div class="search2">
<div class="input_box"><input type="date" /></div>
<div class="input_box"><input type="date" /></div>
</div>
<div class="search_subtitle">인원</div>
<div class="input_box">
<select>
<option class="search_subtitle">인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="search3">
<button>검색</button>
</div>
</form>
</div>
</div>
</header>
<main>
<div class="around_box">
<div class="main_title">에어비앤비 둘러보기</div>
<div class="around_list">
<div class="around_item">
<div class="img_item">
<img src="/airbnb/static/images/card1.jpg" />
</div>
<div class="around_text">숙소 및 부티크 호텔</div>
</div>
<div class="around_item">
<div class="img_item">
<img src="/airbnb/static/images/card1.jpg" />
</div>
<div class="around_text">트립</div>
</div>
<div class="around_item">
<div class="img_item">
<img src="/airbnb/static/images/card1.jpg" />
</div>
<div class="around_text">어드벤처</div>
</div>
<div class="around_item">
<div class="img_item">
<img src="/airbnb/static/images/card1.jpg" />
</div>
<div class="around_text">레스토랑</div>
</div>
</div>
<div class="around_pic">
<img src="/airbnb/static/images/ad1.jpg" />
</div>
</div>
<div class="cho_box">
<div class="main_title">추천 여행지</div>
<div class="cho_list">
<div class="cho_item">
<div class="ghost">파리</div>
<img src="/airbnb/static/images/choo1.png" />
</div>
<div class="cho_item">
<div class="ghost">도쿄</div>
<img src="/airbnb/static/images/choo2.png" />
</div>
<div class="cho_item">
<div class="ghost">런던</div>
<img src="/airbnb/static/images/choo3.png" />
</div>
<div class="cho_item">
<div class="ghost">로스앤젤레스</div>
<img src="/airbnb/static/images/choo4.png" />
</div>
<div class="cho_item">
<div class="ghost">바르셀로나</div>
<img src="/airbnb/static/images/choo5.png" />
</div>
</div>
</div>
<div class="ad_box">
<div class="main_title">에어비앤비 플러스를 만나보세요!</div>
<div>퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div>그림</div>
</div>
<div class="home_box">
<div class="main_title">전 세계 숙소</div>
<div class="home_list">
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div class="home_item">
<div>그림</div>
<div>
<div>오두막 BALIAN BEACH, BALI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>★★★★★</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
⚠️ 나머지는 알아서 만들어보기!
Share article