<div class="wrapper">
<nav id="main_nav">
<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>
<li><a href="#">책방</a></li>
<li><a href="#">리빙</a></li>
<li><a href="#">뭐하지</a></li>
</ul>
</nav>
<header id="header">
<div class="search_wrap">
<a href="#" class="link_logo"></a>
<input type="text" placeholder="검색어를 입력해주세요.">
<a href="#" class="link_voice"></a>
</div>
<nav class="header_nav">
<ul>
<li>
<a href="#">
<i class="icon"></i>
<span>뉴스판</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>쇼핑판</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>경제지표판</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>스포츠판</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>메일</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>카페</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
<span>블로그</span>
</a>
</li>
<li>
<a href="#">
<i class="icon"></i>
</a>
</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
ol, ul {
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
button {
border: none;
background-color: transparent;
}
input {
border: none;
background-color: transparent;
}
input:focus {
outline: none;
}
.wrapper {
overflow-x: hidden;
overflow-y: auto;
width: 375px;
height: 100vh;
margin: 0 auto;
background-color: #eaeef3;
}
#main_nav {
overflow: hidden;
background-color: rgb(7, 189, 120);
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
#main_nav ul {
overflow-x: auto;
display: flex;
align-items: center;
white-space: nowrap;
}
#main_nav ul li {
height: 54px;
text-align: center;
}
#main_nav ul a {
height: 100%;
line-height: 54px;
color: rgb(141, 223, 183);
padding: 0 10px;
}
#header {
background-color: #f4f6f8;
padding: 120px 0 80px;
}
#header .search_wrap {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
width: 333px;
background-color: #fff;
border: solid 1px rgb(7, 189, 120);
border-radius: 10px;
margin: 0 auto 24px;
}
#header .search_wrap .link_logo {
display: block;
width: 42px;
height: 42px;
background-color: green;
}
#header .search_wrap input {
width: calc(100% - 78px);
height: 22px;
font-size: 18px;
padding: 0 20px;
}
#header .search_wrap .link_voice {
display: block;
width: 36px;
height: 36px;
background-color: green;
}
#header .header_nav {
width: 316px;
margin: 0 auto;
}
#header .header_nav ul {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
width: 100%;
}
#header .header_nav li {
width: 25%;
padding-top: 12px;
}
#header .header_nav a {
display: block;
width: 100%;
text-align: center;
}
#header .header_nav .icon {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 8px;
background-color: #fff;
border: solid 1px grey;
}
#header .header_nav span {
display: block;
font-size: 11px;
color: #1e1e23;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.