<div id="wrapper">
<nav id="top_nav">
<div class="top_wrap flex_align_between">
<div class="nav_left flex_align_start">
<button type="button" class="btn_menu"></button>
<h1>
<a href="#">
<img src="https://via.placeholder.com/90x20">
</a>
</h1>
</div>
<div class="nav_center flex_align_start">
<div class="search_wrap flex_align_start">
<input type="text" placeholder="검색">
<button type="button" class="btn_search"></button>
</div>
<button class="btn_voice"></button>
</div>
<div class="nav_right flex_align_end">
<button type="button" class="btn_menu btn_menu_1"></button>
<button type="button" class="btn_menu btn_menu_2"></button>
<a href="#" class="btn_login">로그인</a>
</div>
</div>
</nav>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background-color: #212121;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}
.flex_align_between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex_align_start {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.flex_align_end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* 상단 */
#top_nav {
position: fixed;
width: 100%;
height: 56px;
background-color: #212121;
min-width: 1360px;
padding: 0 16px;
}
#top_nav .nav_left {
height: 56px;
}
#top_nav .nav_left .btn_menu {
width: 24px;
height: 24px;
background-color: grey;
}
#top_nav .nav_left h1 {
margin-left: 16px;
}
#top_nav .nav_left h1 img {
display: block;
width: 90px;
height: 20px;
}
#top_nav .nav_right {
height: 56px;
}
#top_nav .nav_right .btn_menu {
width: 40px;
height: 40px;
margin-right: 16px;
}
#top_nav .nav_right .btn_menu.btn_menu_1 {
background-color: lightcoral;
}
#top_nav .nav_right .btn_menu.btn_menu_2 {
background-color: lightpink;
}
#top_nav .nav_right .btn_login {
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
font-size: 14px;
color: #3ea6ff;
}
#top_nav .nav_center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#top_nav .nav_center .search_wrap {
width: 640px;
height: 30px;
}
#top_nav .nav_center .search_wrap input {
width: calc(100% - 65px);
height: 30px;
border: solid 1px grey;
background-color: #212121;
color: #fff;
padding: 2px 6px;
}
#top_nav .nav_center .search_wrap .btn_search {
width: 65px;
height: 30px;
border: solid 1px grey;
background-color: grey;
}
#top_nav .nav_center .btn_voice {
width: 24px;
height: 24px;
background-color: #fff;
margin-left: 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.