![[HTML, CSS] airbnb 메인페이지 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-18T03%3A04%3A38.611Z-40bb54ad-9ac5-411f-b7a7-b470157138e1&w=2048&q=75)
여기 이 과제를 만들어 보겠습니다.
header part
먼저 <header>영역 입니다.
<!-- HEADER START -->
<header>
<nav><!-- 상단 navigation bar입니다 -->
<!-- Airbnb의 로고 svg. -->
<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="menu">
<div>호스트가 되어주세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>
</nav>
<!-- Search box -->
<div class="search_box">
<h1>특색 있는 숙소와 즐길 거리를 예약하세요.</h1>
<table>
<tr>
<td colspan="2">목적지</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="모든 위치">
</td>
</tr>
<tr class="check">
<td>체크인</td>
<td>체크아웃</td>
</tr>
<tr>
<td><input type="date"></td>
<td><input type="date"></td>
</tr>
<tr>
<td colspan="2">인원</td>
</tr>
<tr>
<td colspan="2">
<select name="" id="">
<option value="">인원</option>
<option value="">1</option>
<option value="">2</option>
</select>
</td>
</tr>
</table>
<div class="btn">
<button>검색</button>
</div>
</div>
</header>
맞는지 모르겠네 🤷 css를 넣어 줘야 합니다.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}header {
background: url(../images/background.jpg);
height: 800px;
background-size: 100% 100%;
}
nav {
display: flex;
justify-content: space-between;
padding: 20px;
}
.menu {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
color: #FFF;
font-weight: 900;
}
.logo {
color: #FFF;
font-size: 35px;
}
.search_box {
display: inline-block;
position: relative;
top: 10px;
left: 50px;
width: 420px;
height: 500px;
background: #FFF;
box-shadow: 5px 5px 10px 0px #ccc;
font-weight: bold;
padding: 30px;
border-radius: 10px;
}
.search_box table {
width: 100%;
margin-top: 10px;
}
.search_box td {
padding: 5px 0;
}
.search_box input {
width: 100%;
padding: 15px 5px;
border: 1px solid #ddd;
}
input,
input::placeholder,
select {
color: #777;
}
.search_box select {
width: 100%;
padding: 15px 0;
border: 1px solid #ddd;
}
/* 검색버튼 */
.btn {
display: grid;
justify-content: end;
margin-top: 10px;
}
.btn button {
background-color: #ff9c9f;
color: white;
width: 70px;
height: 45px;
font-size: 15px;
font-weight: 700;
border-radius: 6px;
border: 0;
cursor: pointer;
}
.btn button:hover {
background: #FF5A5F;
transition: 0.2s;
}
미숙하지만 잘 따라한 것 같아요 ☺️
SECTION 1
첫 섹션입니다.
html을 짜봅니다
<!--SECTION 1 -->
<section>
<div class="title">에어비앤비 둘러보기</div>
<div class="card_box">
<div class="card">
<div class="card_img"><img src="./images/card1.jpg" alt=""></div>
<div class="card_title">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div class="card_img"><img src="./images/card2.jpg" alt=""></div>
<div class="card_title">트립</div>
</div>
<div class="card">
<div class="card_img"><img src="./images/card3.jpg" alt=""></div>
<div class="card_title">어드벤처</div>
</div>
<div class="card">
<div class="card_img"><img src="./images/card4.jpg" alt=""></div>
<div class="card_title">레스토랑</div>
</div>
</div>
<div class="ad_img">
<img src="./images/ad1.jpg" alt="">
</div>
</section>
세로로 나오셨습니다. CSS를 맥여줍시다
/* SECTION 공통 그리드, 타이틀 잡기 */
section {
width: 90%;
margin: auto;
}
.title {
font-size: 30px;
font-weight: 900;
margin: 40px 0 20px;
}/* SECTION 1 */
.card_box {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
margin: 30px 0;
height: 5vw;
}
.card {
border: 3px solid #ddd;
border-radius: 5px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.card_title {
font-weight: bold;
padding: 0 5px;
display: flex;
align-items: center;
}
.ad_img {
margin: 50px 0;
height: 20%;
}
.ad_img img {
width: 100%;
border-radius: 10px;
height: 100%;
}
section {
width: 90%;
margin: auto;
}
.title {
font-size: 30px;
font-weight: 900;
margin-top: 30px;
}
.card_box {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
margin: 30px 0;
height: 5vw;
}
.card {
border: 3px solid #ddd;
border-radius: 5px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.card_title {
font-weight: bold;
padding: 0 5px;
display: flex;
align-items: center;
}
.ad_img {
margin: 50px 0;
height: 20%;
}
.ad_img img {
width: 100%;
border-radius: 10px;
height: 100%;
}
제법? 비슷해요
SECTION 2-3
섹션 2와 3은 짧아서 같이 설명하겠습니다.
🙄간단하기도 하구요
🤔그림을 위에 position: absolute;을 하거나 그림을 background로 잡아야 할 것 같아요.
❗블로그 주인장님께서 글이 적힌 이미지를 넣어주셨네요 😕 그대로 넣으면 됩니다.
코딩하는 사람은 편하지만 환률이 변하면 곧바로 이미지를 바꿔야 하겠어요
<!-- SECTION 2 -->
<section>
<div class="title">추천 여행지</div>
<div class="r_travel_img">
<div class="img"><img src="./images/choo1.png" alt=""></div>
<div class="img"><img src="./images/choo2.png" alt=""></div>
<div class="img"><img src="./images/choo3.png" alt=""></div>
<div class="img"><img src="./images/choo4.png" alt=""></div>
<div class="img"><img src="./images/choo5.png" alt=""></div>
</div>
</section>
<!-- SECTION 3-->
<section>
<div class="title">에어비앤비 플로스를 만나보세요!</div>
<div class="subtitle">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
<div class="puls_img">
<img src="./images/ad2.png" alt="">
</div>
</section>/* SECTION 2 */
.r_travel_img {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 10px;
}
/* SECTION 3 */
.subtitle {
margin-bottom: 20px;
}
.puls_img img {
width: 100%;
}
SECTION 4
마지막 섹션입니다.
CSS는 별로 할 게 없어보이는데 HTML가 노가다 입니다.
<!-- SECTION 4 -->
<section>
<div class="title">전 세계 숙소</div>
<div class="stays_box">
<div class="stays">
<div class="stays_img"><img src="./images/home1.png" alt=""></div>
<div class="stays_info">오두막 · BALIAN BEACH, BALI</div>
<div class="stays_name">BALIAN TREEHOUSE w beautiful pool</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">185 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home2.png" alt=""></div>
<div class="stays_info">키클라데스 주택 · 이아(OIA)</div>
<div class="stays_name">Unique Architecture Cave House</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">188 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home3.png" alt=""></div>
<div class="stays_info">성 · 트웬티나인 팜스(TWENTYNINE PALMS)</div>
<div class="stays_name">Tile Hous</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">367 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home4.png" alt=""></div>
<div class="stays_info">검증됨 · 케이프타운</div>
<div class="stays_name">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">185 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home5.png" alt=""></div>
<div class="stays_info">아파트 전체 · 마드리드(MADRID)</div>
<div class="stays_name">솔광장에 위치한 개인 스튜디오</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">459 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home6.png" alt=""></div>
<div class="stays_info">집 전체 · HUMAC</div>
<div class="stays_name">Vacation house in etno-eco village Humac</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">119 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home7.png" alt=""></div>
<div class="stays_info">개인실 · 마라케시</div>
<div class="stays_name">The Cozy Palace</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">559 </div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
<div class="stays">
<div class="stays_img"><img src="./images/home8.png" alt=""></div>
<div class="stays_info">게스트용 별채 전체 · 로스앤젤레스</div>
<div class="stays_name">Private Pool House with Amazing Views!</div>
<div class="stays_score">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="score">170</div>
<div class="host_grade">슈퍼호스트</div>
</div>
</div>
</div>
</section>/* SECTION 4 */
.stays_box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.stays {
width: 100%;
}
.stays img {
height: 15vw; /* 이부분 입니다. */
}
.stays_info {
color: #aaa;
font-size: 15px;
}
.stays_name {
font-weight: bold;
font-size: 20px;
margin: 5px 0;
}8번이미지가 조금 짧아요. 그래서 stays img높이를 vw를 사용해서 동일하게 줘써요
👏고생하셨습니다 🤗
Share article
![[JDBC] MariaDB를 사용할 겁니다.](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-22T09%3A10%3A14.297Z-d5c5ca57-6153-4089-a492-0aaa868dc255&w=750&q=75)
![[JDBC] DBMS 조금의 이론 들어가요](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-22T09%3A09%3A10.879Z-46b39c9e-8bd4-427a-af02-53f591e58d5f&w=750&q=75)
![[HTML,CSS] 웹 페이지 만들기 걸음마](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-17T08%3A40%3A10.030Z-058843a4-7ce4-48bf-9dda-45c2e233a931&w=750&q=75)
![[HTML,CSS] 웹 페이지 만들어 보기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-17T08%3A39%3A37.000Z-7cf7bb82-913b-4bb0-894f-90eac1684f05&w=750&q=75)