모범 답안

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>페이지의 타이틀</title>
</head>
<body>
<style>
.header {
background-color: #475d9f;
color: #fff;
border-bottom: 1px solid #2c3863;
height: 40px;
}
.btn1 {
float: left;
padding: 10px;
}
.btn2 {
float: right;
padding: 10px;
}
.search {
margin-left: 100px;
margin-right: 100px;
}
.searchbar {
border: 1px solid #2c3863;
background-color: #323f6b;
width: 100%;
padding: 6px;
margin: 7px 0;
}
.container {
background-color: #d7d8dc;
height: 500px;
}
.footer {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #bbb;
height: 50px;
}
.tab1 {
float: left;
width: 25%;
text-align: center;
padding: 14px 0;
}
.tab2 {
float: left;
width: 25%;
text-align: center;
padding: 14px 0;
}
.tab3 {
float: left;
width: 25%;
text-align: center;
padding: 14px 0;
}
.tab4 {
float: left;
width: 25%;
text-align: center;
padding: 14px 0;
}
</style>
<div class="header">
<div class="btn1">버튼1</div>
<div class="btn2">버튼2</div>
<div class="search">
<input type="text" class="searchbar" placeholder="Search">
</div>
</div>
<div class="container">
내용물
</div>
<div class="footer">
<div class="tab1">탭1</div>
<div class="tab2">탭2</div>
<div class="tab3">탭3</div>
<div class="tab4">탭4</div>
</div>
</body>
</html>