[수업노트](20.11.09)D+22 PC상단바 만들기

※ 라이브러리에 bg-red{background-color:red;} 속성을 만들어 배경색이 필요한 요소에 그때 그때 사용해준다.

※  메뉴 사이 구역선 만들기

  - 글자 높이와 비슷한 선을 만들기 위해서 border는 사용 불가함.

  - a 요소에 ::before, ::after를 이용하여 content:"";, background-color 이용하여 선 생성

  - position:absolute 값 지정하고 대략적인 위치, top.left: 0지정

  - 세부적인 수직중앙 정렬은 transform:translatex(-50%) translatey(-50%)로 맞춘다

 

<div class="logo-bar con text-align-center">
  <a href="#">
    <img src="https://bnx.oa.gg/img/logo.gif" alt="">
  </a>
</div>

<div class="menu-bar visible-on-md-up con">
  <nav class="menu-box-1">
    <ul class="row">
      <li class="cell"><a href="#">BRAND</a></li>
      <li class="cell"><a href="#">VISUAL</a></li>
      <li class="cell"><a href="#">STYLE</a></li>
      <li class="cell"><a href="#">MEDIA</a></li>
      <li class="cell"><a href="#">NEWS</a></li>
      <li class="cell"><a href="#">STORE</a></li>
      <li class="cell"><a href="#">CUSTOMER</a></li>
    </ul>
  </nav>
</div>

/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

/* 라이브러리 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.cell {
  float:left;
  box-sizing:border-box;
}

.row::after {
  content:"";
  display: block;
  clear:both;
}

.img-box > img {
  width:100%;
  display:block;
}

.bg-red {
  background-color:red;
}

.text-align-center {
  text-align:center;
}

/* 커스텀 */
.con {
  max-width:980px;
}

.logo-bar {
  margin-top:20px;
}

.menu-bar .menu-box-1 > ul > li {
  width:calc(100% / 7);
}

.menu-bar .menu-box-1 > ul > li > a {
  display:block;
  font-weight:bold;
  padding:5px 0;
  text-align:center;
  position:relative;
}

.menu-bar .menu-box-1 > ul > li:hover > a {
  color:red;
  text-decoration:underline;
}

.menu-bar .menu-box-1 > ul > li > a::before,
.menu-bar .menu-box-1 > ul > li > a::after {
  content:"";
  background-color:black;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  bottom:0;
  width:1px;
  height:10px;
}

.menu-bar .menu-box-1 > ul > li > a::after {
  left:auto;
  right:0;
}

.menu-bar .menu-box-1 > ul > li:first-child > a::before,
.menu-bar .menu-box-1 > ul > li:last-child > a::after {
  width:2px;
}

@media( max-width:800px ) {
  .visible-on-md-up {
    display:none;
  } 
}