HTML_CSS_029_사이트모작_04

작업_2

메뉴바 구현

1. 마크업 > 인라인그리드 >

HTML

<div class="con">
  <div class="logo-bar">
    <a href="#">BMX</a>
  </div>
  <div class="menu-bar">
    <nav class="menu-box-1">
      <ul class="inline-grid">
        <li><a href="#">BRAND</a></li>
        <li><a href="#">VISUAL</a></li>
        <li><a href="#">STYLE</a></li>
        <li><a href="#">MEDIA</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">STORE</a></li>
        <li><a href="#">CUSTOMER</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS

/* 노멀라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
a {
  text-decoration:none;
  color:inherit;
}
/* 인라인그리드 */
.inline-grid {
  font-size:0;
}
.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
}
/* 라이브러리 */
.con{
/*   임시 크기 지정 */
  width: 1200px;
  height: 500px;
  background-color:#afafaf;
/*   가운데 정렬 */
  margin-left:auto;
  margin-right:auto;
}
/* logo-bar 구현 */
.logo-bar{
/*   background-color: red; */
  text-align:center;
}
.logo-bar > a{
/*   background-color: gold; */
  font-weight:bold;
  font-size: 3rem;
}
.menu-box-1 > ul > li{
/*   background-color:gold; */
  width: calc(100%/7);
  text-align : center;
}
.menu-box-1 > ul > li > a{
/*   background-color:green; */
  display : block;
  font-weight:bold;
}