1. 문제
아래와 똑같은 화면을 출력하시오.
1. HTML 뼈대 만들기 2. 레이아웃 짜기 3. 시멘틱 쓰기 4. 이미지 (백그라운드 이미지) - 글자 담기
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>
main {
display: grid;
justify-content: center;
background-color: rgb(216, 215, 215);
}
section {
width: 1000px;
}
.title {
display: grid;
justify-content: center;
font-size: 30px;
font-weight: 700;
color: rgb(231, 94, 69);
}
.content {
display: grid;
justify-content: center;
font-size: 15px;
}
.grid_box {
display: grid;
justify-content: center;
}
.grid_items {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
}
.img_box {
display: grid;
justify-content: center;
align-items: center;
width: 230px;
height: 230px;
background-image: url(image.png);
background-size: cover;
color: white;
font-size: 25px;
font-weight: 400;
}
.btn_box {
display: grid;
justify-content: center;
}
.btn {
background-color: rgb(231, 94, 69);
color: white;
width: 200px;
height: 30px;
border: 1px solid black;
border-radius: 15px;
font-size: 15px;
font-weight: 500;
}
.mb50 {
margin-bottom: 50px;
}
.mb30 {
margin-bottom: 30px;
}
.mb15 {
margin-bottom: 15px;
}
</style>
</head>
<body>
<main>
<section>
<br />
<div class="title mb30">Meet Guidebooks</div>
<div class="content mb15">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="grid_box mb50">
<div class="grid_items">
<div class="img_box">San Francisco</div>
<div class="img_box">New York</div>
<div class="img_box">London</div>
</div>
</div>
<div class="btn_box mb30">
<button class="btn">See All Guidebooks</button>
</div>
<div class="title mb30">Just for the weekend</div>
<div class="content mb15">
Discover new, inspiring places close to home.
</div>
<div class="grid_box mb50">
<div class="grid_items">
<div class="img_box">Napa</div>
<div class="img_box">Sonoma</div>
<div class="img_box">San Francisco</div>
</div>
</div>
<div class="btn_box mb20">
<button class="btn">See All Destinations</button>
</div>
<br />
</section>
</main>
</body>
</html>
3. 정답
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>
<div class="all_box">
<main>
<section>
<div>Meet Guidebooks</div>
<div>
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div>
<div>사진1</div>
<div>사진2</div>
<div>사진3</div>
</div>
<div>
<button>See All Guidebooks</button>
</div>
</section>
<section>
<div>Just for the weekend</div>
<div>
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div>
<div>사진1</div>
<div>사진2</div>
<div>사진3</div>
</div>
<div>
<button>See All Destinations</button>
</div>
</section>
</main>
</div>
</body>
</html>
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;
}
.all_box {
display: grid;
justify-content: center;
}
main {
width: 1000px;
}
.title {
text-align: center;
}
.sub_title {
text-align: center;
}
.grid_box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.btn_box {
display: grid;
justify-content: center;
}
</style>
</head>
<body>
<div class="all_box">
<main>
<section>
<div class="title">Meet Guidebooks</div>
<div class="sub_title">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="grid_box">
<div class="grid_item">사진1</div>
<div class="grid_item">사진2</div>
<div class="grid_item">사진3</div>
</div>
<div class="btn_box">
<button>See All Guidebooks</button>
</div>
</section>
<section>
<div class="title">Just for the weekend</div>
<div class="sub_title">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="grid_box">
<div class="grid_item">사진1</div>
<div class="grid_item">사진2</div>
<div class="grid_item">사진3</div>
</div>
<div class="btn_box">
<button>See All Destinations</button>
</div>
</section>
</main>
</div>
</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>
body {
background-color: rgb(250, 250, 250);
}
div {
padding: 10px;
}
.all_box {
display: grid;
justify-content: center;
}
main {
width: 1000px;
}
.title {
text-align: center;
font-size: 40px;
font-weight: 700;
color: rgb(214, 115, 33);
}
.sub_title {
text-align: center;
}
.grid_box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.btn_box {
display: grid;
justify-content: center;
}
.grid_item {
height: 300px;
background-image: url("image.png");
background-size: cover;
display: grid;
justify-content: center;
align-items: center;
color: white;
font-size: 30px;
font-weight: 500;
}
.btn_box > button {
background-color: rgb(218, 70, 12);
color: white;
width: 300px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="all_box">
<main>
<section>
<div class="title">Meet Guidebooks</div>
<div class="sub_title">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="grid_box">
<div class="grid_item">San Francisco</div>
<div class="grid_item">San Francisco</div>
<div class="grid_item">San Francisco</div>
</div>
<div class="btn_box">
<button>See All Guidebooks</button>
</div>
</section>
<section>
<div class="title">Just for the weekend</div>
<div class="sub_title">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="grid_box">
<div class="grid_item">San Francisco</div>
<div class="grid_item">San Francisco</div>
<div class="grid_item">San Francisco</div>
</div>
<div class="btn_box">
<button>See All Destinations</button>
</div>
</section>
</main>
</div>
</body>
</html>
Share article