<header id="main-header">
<div class="search_area">
<div class="search_wrap">
<input type="text">
<button type="button"></button>
</div>
</div>
<div id="navbar">
<div class="container">
<ul>
<li><a href="#">메일</a></li>
<li><a href="#">카페</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">지식인</a></li>
<li><a href="#">쇼핑</a></li>
</ul>
</div>
</div>
</header>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ol = 앞에 숫자가 붙는 리스트 */
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
button {
border: none;
}
input, textarea {
outline: none;
}
.clearfix {
clear: both;
}
.container {
width: 1130px;
margin: 0 auto;
}
/* header */
#main-header {
position: relative;
background-color: #ffffff;
}
#main-header .search_area {
position: relative;
height: 160px;
background-color: #ffffff;
border-bottom: 1px solid #e4e8eb;
display: flex;
justify-content: center;
align-items: center;
}
#main-header .search_wrap {
position: relative;
width: 582px;
height: 52px;
border: solid 2px #19ce60;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
/* flex된 inline요소들 사이 공백 없애줄 때 쓰기 */
align-items: center;
}
#main-header .search_wrap input {
width: calc(100% - 52px);
height: 100%;
padding: 13px 15px;
font-size: 22px;
border: none;
}
#main-header .search_wrap button {
width: 52px;
height: 100%;
background-color: #19ce60;
}
#main-header .search_wrap button:focus {
outline: none;
}
#main-header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}
#main-header #navbar ul {
padding: 11px 0;
}
#main-header #navbar ul li {
display: inline-block;
margin-right: 5px;
}
#main-header #navbar ul li a {
color: #03c75a;
font-size: 15px;
font-weight: 700;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.