1. 구조 나누기 + 시멘틱 태그
[ 시멘틱 태그란? ]
- 웹 페이지의 내용을 의미론적으로 구분, 검색 엔진이나 웹 브라우저가 문서 구조를 파악하게 함 (문서의 구조를 나타내는 역할)
[ 시멘틱 태그의 종류 ]
<header> <nav> <article> <section> <main> <aside> <footer>
2. AirBnB nav 만들어보기
[ html 구조 시멘틱 태그를 사용해서 나누기 1 ]
[ 구조 세세하게 나누기 2 ]
여기까지 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>에어비앤비</title>
</head>
<body>
<main>
<!-- 헤더 start -->
<header>
<nav>
<div class="logo">로고</div>
<div class="menu">
<div>호스트가 되어주세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>
</nav>
<div class="search-box">
하얀박스
</div>
</header>
<!-- 헤더 end -->
<!-- 바디 start -->
<div class="body">
<!-- 에어비앤비 둘러보기 start -->
<section>
<div class="title">에어비앤비 둘러보기</div>
<div class="card-box">
<div class="card">
<div class="card-img">카드사진</div>
<div class="card-title">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div class="card-img">카드사진</div>
<div class="card-title">트립</div>
</div>
<div class="card">
<div class="card-img">카드사진</div>
<div class="card-title">어드벤처</div>
</div>
<div class="card">
<div class="card-img">카드사진</div>
<div class="card-title">레스토랑</div>
</div>
</div>
<div class="ad-img">
사막 사진
</div>
</section>
<!-- 에어비앤비 둘러보기 end -->
<!-- 추천 여행지 start -->
<section>
<div class="title">추천 여행지</div>
<div class="img-box">
<div class="img">사진1</div>
<div class="img">사진2</div>
<div class="img">사진3</div>
<div class="img">사진4</div>
<div class="img">사진5</div>
</div>
</section>
<!-- 추천 여행지 end -->
<!-- 에어비앤비 플러스를 만나보세요 start -->
<section>
<div class="title">에어비앤비 플러스를 만나보세요!</div>
<div class="subtitle">퀄리티와 인텔리어 디자인이 검증된 숙소 컬렉션</div>
<div class="ad-img">집 사진</div>
</section>
<!-- 에어비앤비 플러스를 만나보세요 end -->
<!-- 전 세계 숙소 start -->
<section>
<div class="title">전 세계 숙소</div>
<div class="home-box">
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
</div>
</section>
<!-- 전 세계 숙소 end -->
</div>
<!-- 바디 end -->
</main>
</body>
</html>2. style 부분
<table> 태그로 하얀 박스 내용물 작성
전체 코드
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>에어비앤비</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/magin.css">
</head>
<body>
<main>
<!-- 헤더 start -->
<header class="ml-50 mr-50 mt-30">
<!-- 네비 start -->
<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="menu">
<div>호스트가 되어보세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>
</nav>
<!-- 네비 end -->
<div class="search-box pa30">
<div>특색 있는 숙소와 즐길 거리를 예약하세요.</div>
<table border="1" class="mb-30 mt-20">
<tr>
<td colspan="2">목적지</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="모든 위치">
</td>
</tr>
<tr>
<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 class="select-menu">
<option>인원</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
</table>
<div>
<button class="search-btn">검색</button>
</div>
</div>
</header>
<!-- 헤더 end -->
<!-- 바디 start -->
<div class="body ml-100 mr-100">
<!-- 에어비앤비 둘러보기 start -->
<section>
<div class="title mt-30 mb-10">에어비앤비 둘러보기</div>
<div class="card-box mb-30">
<div class="card">
<div class="card-img1"></div>
<div class="card-title">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div class="card-img2"></div>
<div class="card-title">트립</div>
</div>
<div class="card">
<div class="card-img3"></div>
<div class="card-title">어드벤처</div>
</div>
<div class="card">
<div class="card-img4"></div>
<div class="card-title">레스토랑</div>
</div>
</div>
<div class="ad-img1 mb-30">
</div>
</section>
<!-- 에어비앤비 둘러보기 end -->
<!-- 추천 여행지 start -->
<section>
<div class="title mt-10 mb-10">추천 여행지</div>
<div class="img-box mb-30">
<div class="img-rec1"></div>
<div class="img-rec2"></div>
<div class="img-rec3"></div>
<div class="img-rec4"></div>
<div class="img-rec5"></div>
</div>
</section>
<!-- 추천 여행지 end -->
<!-- 에어비앤비 플러스를 만나보세요 start -->
<section>
<div class="title">에어비앤비 플러스를 만나보세요!</div>
<div class="subtitle mb-10">퀄리티와 인텔리어 디자인이 검증된 숙소 컬렉션</div>
<div class="ad-img2 mb-30"></div>
</section>
<!-- 에어비앤비 플러스를 만나보세요 end -->
<!-- 전 세계 숙소 start -->
<section>
<div class="title mb-10">전 세계 숙소</div>
<div class="home-box">
<div class="home">
<div class="home-img1"></div>
<div class="text1">오두막 BALIAN BEACH, BALI</div>
<div class="text2">BALIAN TREEHOUSE w beautiful pool</div>
<div class="grade-box mb-10">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">185</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img2"></div>
<div class="text1">키클라데스 주택ㆍ이아(OIA)</div>
<div class="text2">Unique Architecture Cave House</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">188</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img3"></div>
<div class="text1">성ㆍ트웬티나인 팜스(TWENTYNINIE PALMS)</div>
<div class="text2">Tile House</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">367</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img4"></div>
<div class="text1">검증됨ㆍ케이프타운</div>
<div class="text2">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">177</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img5"></div>
<div class="text1">아파트 전체ㆍ마드리드(MADRID)</div>
<div class="text2">솔광장에 위치한 개인 스튜디오</div>
<div class="grade-box mb-10">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">459</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img6"></div>
<div class="text1">집 전체ㆍHUMAC</div>
<div class="text2">Vacation house in etno-eco village Humac</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">119</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img7"></div>
<div class="text1">개인실ㆍ마라케시</div>
<div class="text2">The Cozy Palace</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">559</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
<div class="home">
<div class="home-img8"></div>
<div class="text1">게스트용 별채 전체ㆍ로스앤젤레스</div>
<div class="text2">Private Pool House with Amazing Views!</div>
<div class="grade-box">
<div class="star">⭐⭐⭐⭐⭐</div>
<div class="count">170</div>
<div class="text3">슈퍼호스트</div>
</div>
</div>
</div>
</section>
<!-- 전 세계 숙소 end -->
</div>
<!-- 바디 end -->
</main>
</body>
</html>CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
background-image: url(../images/background.jpg);
height: 800px;
background-size: 100% 100%;
}
nav {
padding: 20px;
display: flex;
justify-content: space-between;
}
.menu {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
color: white;
font-weight: 800;
}
.logo {
color: white;
font-size: 35px;
font-weight: 800;
}
.search-box {
display: inline-block;
position: relative;
top: 10px;
left: 50px;
width: 430px;
height: 500px;
background-color: white;
box-shadow: 5px 5px 10px 0 rgb(112, 112, 112);
border-radius: 1%;
}
.search-box div {
font-size: 36px;
font-weight: 700;
}
.select-menu {
width: 100%;
height: 40px;
border: 1px solid rgb(173, 173, 173);
border-radius: 3px;
margin-top: 10px;
color: rgb(119, 119, 119);
}
.search-btn {
color: white;
background-color: #FF5A5F;
border: none;
border-radius: 7px;
width: 60px;
height: 35px;
font-size: 15px;
font-weight: 700;
position: absolute;
left: 79%;
}
table {
width: 100%;
border-collapse: collapse;
border: white;
font-weight: 700;
}
table input {
width: 100%;
height: 40px;
border: 1px solid rgb(173, 173, 173);
color: rgb(119, 119, 119);
border-radius: 3px;
margin-top: 10px;
margin-bottom: 20px;
}
.title {
font-weight: 700;
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: center;
grid-column-gap: 10px;
}
.card {
display: grid;
grid-template-columns: 1fr 3fr;
border: 1px solid silver;
border-radius: 8px;
box-shadow: 3px 3px 5px 0px rgb(127, 127, 127);
}
.card-img1 {
background-image: url(../images/card1.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img2 {
background-image: url(../images/card2.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img3 {
background-image: url(../images/card3.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-img4 {
background-image: url(../images/card4.jpg);
height: 70px;
background-size: 100% 100%;
}
.card-title {
display: flex;
height: 70px;
font-weight: 700;
align-items: center;
margin-left: 10px;
}
.ad-img1 {
background-image: url(../images/ad1.jpg);
height: 340px;
background-size: 100% 100%;
border-radius: 20px;
}
.img-box {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-column-gap: 10px;
}
.img-rec1 {
background-image: url(../images/choo1.png);
height: 250px;
background-size: 100% 100%;
}
.img-rec2 {
background-image: url(../images/choo2.png);
height: 250px;
background-size: 100% 100%;
}
.img-rec3 {
background-image: url(../images/choo3.png);
height: 250px;
background-size: 100% 100%;
}
.img-rec4 {
background-image: url(../images/choo4.png);
height: 250px;
background-size: 100% 100%;
}
.img-rec5 {
background-image: url(../images/choo5.png);
height: 250px;
background-size: 100% 100%;
}
.ad-img2 {
background-image: url(../images/ad2.png);
height: 340px;
background-size: 100% 100%;
}
.home-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 10px;
}
.home-img1 {
background-image: url(../images/home1.png);
background-size: 100% 100%;
height: 170px;
}
.home-img2 {
background-image: url(../images/home2.png);
background-size: 100% 100%;
height: 170px;
}
.home-img3 {
background-image: url(../images/home3.png);
background-size: 100% 100%;
height: 170px;
}
.home-img4 {
background-image: url(../images/home4.png);
background-size: 100% 100%;
height: 170px;
}
.home-img5 {
background-image: url(../images/home5.png);
background-size: 100% 100%;
height: 170px;
}
.home-img6 {
background-image: url(../images/home6.png);
background-size: 100% 100%;
height: 170px;
}
.home-img7 {
background-image: url(../images/home7.png);
background-size: 100% 100%;
height: 170px;
}
.home-img8 {
background-image: url(../images/home8.png);
background-size: 100% 100%;
height: 170px;
}
.text1 {
color: #8E8E8E;
font-size: 13px;
margin-top: 5px;
}
.text2 {
font-weight: 700;
font-size: 20px;
margin-bottom: 10px;
}
.text3 {
margin-bottom: 15px;
}
.grade-box {
display: grid;
/* white-space: nowrap; TODO*/
grid-template-columns: 1fr 0.5fr 3fr;
grid-column-gap: 10px;
font-size: 14px;
}CSS Magin
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mb-30 {
margin-bottom: 30px;
}
.ml-50 {
margin-left: 50px;
}
.mr-50 {
margin-right: 50px;
}
.ml-100 {
margin-left: 100px;
}
.mr-100 {
margin-right: 100px;
}
.pa30 {
padding: 30px;
}Share article
