[CSS] Position : fixed를 활용하여, 메뉴바를 화면 상단에 고정시키는 방법

서론

윅스의 고객센터 홈페이지

웹페이지들을 살펴보다 보면, 다음과 같이 페이지의 상단에 메뉴 바가 고정된 형태의 웹페이지들이 종종 있다. 이는 홈페이지를 보는 사용자에게도 분명 큰 이점을 주는 듯 하다. 스크롤을 내려도, 메뉴바가 보이기 때문에, 자신이 원하는 영역으로 빠르게 이동할 수 있기 때문이다.

어떻게 하면, 메뉴바를 고정할 수 있을까?

CSS의 Position : fixed를 활용하면 됩니다. 참고로 position:fixed는 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킵니다. 그래서 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)됩니다.

본론

fixed 속성은 Relative와 Absolute와는 다르게 이미지 혹은 글에 적용하는 것이 아니라, 영역에 지정해야 합다.

고정하고자 하는 영역을 지정하고 이를 fixed 처리하면 됩니다. 또한 영역에는 당연하게도 기본적인 가로(width) / 세로(height) 길이를 지정해주어야 합니다. 코드와 함께 살펴보겠습니다.

<header id="header" class="clearfix">
  <nav>
      <h2 class="blind">Main Navigation</h2>
      <ul class="nav_bar">
          <li class="logo"><a href="#"><i class="fas fa-home"></i>Home</a></li>
          <li><a href="#team">Team </a></li>
          <li><a href="#Work">Work </a></li>
          <li><a href="#Pricing">Price </a></li>
          <li><a href="#ContactUs">Contact </a></li>
          <li><a href="#footer">Dropdown </a></li>
          <li class="search"><a href="#"><i></i>Search</a></li>
      </ul>
  </nav>
</header>

메뉴바는 주로 header나 nav 태그를 활용하여 마크업하므로, 둘 중 한 영역을 fixed 처리하면 됩니다. 저는 nav를 포함한 전체 영역인 header 영역을 고정 처리하였습니다.

#header {
    max-width: 1200px;
    position: fixed;
    background-color: gray;
    width: 100%;
    line-height: 50px;
}

#header .nav_bar li a {
    display: block;    
    float: left;
    text-decoration: none;
    background-color: rgb(36, 35, 35);
    color: darkgrey;
    width: 100px;
    height: 50px;
    text-align: center;
}

#header .nav_bar .search {
    float:right;
}

결론

결과는 다음과 같습니다. 성공적으로 작동하는 것을 볼 수 있습니다.

See the Pen Fixed nav-bar by joonho lee (@goldycoder) on CodePen.