애플 사이트 만들기 3 - 네비게이션 바

네비게이션 바 만들기

   <nav>
    <div class="inner">
      <h1>iPad</h1>
      <ul class="menu">
        <li class="active"><a href="javascript:void(0)">개요</a></li>
        <li><a href="javascript:void(0)">iPad를 선택하는 이유</a></li>
        <li><a href="javascript:void(0)">제품 사양</a></li>
      </ul>
      <button class="btn">구입하기</button>
    </div>
   </nav>

nav {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #D2D2D2;
  position: sticky;
  top: 0;
  z-index: 8;
}

nav .inner {
  max-width: 1000px;
  height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

nav h1 {
  flex-grow: 1;
  font-size: 22px;
  font-weight: 500;
}

nav .menu {
  display: flex;
  gap: 12px;
  margin-right: 18px;
}

nav .menu li a {
  display: block;
  font-size: 11px;
  padding: 6px;
}

nav .menu li:hover a {
  color: #0071E3
}

nav .menu li.active a {
  opacity: 0.5;
  cursor: default;
}

nav .menu li.active:hover a {
  color: #1D1D1D;
}

마우스 스크롤이 있을 경우 네비게이션 바가 항상 최상단에 위치하고 있어야 한다.
이를 위해서는 position: sticky;를 사용하면 된다. sticky를 사영하기 위해서는 top, bottom, left, right 중 1개를 지정해야하는데 해당 페이지에서는 항상 최상단에 위치해야함으로 top: 0;을 이용하게 된다.

또한 해당 네비게이션에 위치해있는 페이지 정보는 흐릿하게 나타내기 위해 backdrop-filter: blur(20px);를 사용한다. 이때 해당 네비게이션 배경의 투명도를 정해야하는데 이를 위해 background-color: rgba(255, 255, 255, 0.7);를 사용하게 된다.

현재 위치하고 있는 페이지 정보를 나타내기 위해 현재 위치한 페이지의 class를 class="active"로 지정하였다.

nav .menu li.active a {
  opacity: 0.5;
  cursor: default;
}

nav .menu li.active:hover a {
  color: #1D1D1D;
}

active를 포함하고 있는 스타일을 지정함으로써 현재 페이지 위치를 알 수 있도록 해준다.