참고
1. 뼈대만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
</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>인원</div>
<div>
<select>
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<button type="submit">검색</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>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
<div>
<div>그림</div>
<div>
<div>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
2. 레이아웃 잡기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
header {
height: 820px;
background-color: rgb(253, 253, 248);
/* 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;
}
.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;
}
.nav_body {
padding: 30px 0px;
}
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 type="submit">검색</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>그림</div>
<div class="around_text">숙소 및 부티크 호텔</div>
</div>
<div class="around_item">
<div>그림</div>
<div class="around_text">트립</div>
</div>
<div class="around_item">
<div>그림</div>
<div class="around_text">어드벤처</div>
</div>
<div class="around_item">
<div>그림</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</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>오두막 BAISAN BAJI</div>
<div>BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span>별별별별별</span>
<span>185 슈퍼호스트</span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>