Logo

CSS의 fixed position으로 메뉴바 상단 고정

fixed position을 이용해서 스크롤에 해도 따라가지 않고 항상 화면 상단에 고정되어 있는 메뉴바를 만들어보겠습니다.

fixed position의 특징

CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다.

이러한 fixed position의 특징은 웹에서 다양한 UI를 구현하는데 사용될 수 있는데요. 이번 포스팅에서는 그 중에서 가장 널리 사용되고 있는 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다.

전형적인 메뉴바 만들기

일반적으로 메뉴바는 <header/>과 <nav/> 태그를 이용해서 마크업을 많이 합니다. 실제로는 <ul/>, <li/>, <a/> 태그를 이용해서 다른 웹페이지로 이동이 가능한 메뉴 목록을 만들어야 하지만 최대한 간단한 예제를 위해서 <span/> 태그만을 사용하였습니다.

<header>
  <h1>Brand</h1>
  <nav>
    <span>Menu1</span>
    <span>Menu2</span>
    <span>Menu3</span>
  </nav>
</header>

헤더 영역에 대한 스타일도 메인 영역과 시작적으로 구분이 될 수 있을 정도로만 간단히 합니다.

header {
  height: 75px;
  padding: 1rem;
  color: white;
  background: teal;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

이렇게 작성된 전형적인 메뉴바는 스크롤바를 아래로 움직이면, 움직이는 만큼 브라우저 화면에서 사라지게 됩니다.

이러한 전형적인 메뉴바가 보여줄 컨턴츠가 적은 웹사이트에서는 다시 금방 스크롤바를 위로 움직일 수 있기 때문에 큰 문제가 되지 않겠지만, 리스트 형태로 컨텐츠를 세로로 길게 보여줘야 하는 웹사이트의 경우, 다른 메뉴로 이동하기 위해서 사용자가 매번 맨 위까지 스크롤링을 해야 한다면 상당히 불편할 것입니다.

메뉴바를 화면 상단에 고정시키기

자 그럼, fixed position을 활용해서 위에서 작성한 메뉴바를 화면 상단에 고정시켜보겠습니다. 우선 스크롤에 영향을 받지 않고 화면의 특정 지점에 고정될 수 있도록 헤더 영역의 position 속성을 fixed로 지정합니다. 그 다음, 헤더 영역을 화면의 어디에 고정시킬지를 offset 속성을 이용해서 설정해줍니다. 화면 상단에 빈틈없이 붙일 것이기 때문에 top 속성을 0으로 설정하고, 헤더 영역을 화면 양측에 꽉차게 하기 하기 위해서 left 속성과 right 속성도 0으로 설정합니다. (left 속성과 right 속성 대신에 width 속성을 100%로 설정해도 됩니다.)

header {
  position: fixed;
  top: 0;
  /* width: 100% */
  left: 0;
  right: 0;

  /* 생략 */
}

그리고 나서 스크롤을 해보면 메뉴바가 화면 상단에 고정되어서 아무리 아래로 스크롤해도 항상 메뉴바를 볼 수 있는 상태가 됩니다.

하지만 여기서 한가지 문제가 발생하는데요. 자세히 보면 메인 영역의 윗 부분이 헤더 영역의 뒤로 들어가서 일부 컨텐츠가 보이지 않습니다. 이것은 <header> 엘리먼트가 부모인 <body> 엘리먼트로 부터 완전히 독립되면서, <body> 엘리먼트에서 점유하고 있던 <header> 엘리먼트 공간이 사라져버렸기 때문입니다.

가려진 컨텐츠 보이게 하기

위 문제는 상단 고정 메뉴바 사용할 때 흔히 겪은 문제이며, <body> 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)을 주면 쉽게 해결할 수 있습니다.

body {
  padding-top: 75px;
  /* 생략 */
}

자, 이제 가려지는 컨텐츠 없이 상단 고정 메뉴바를 사용할 수 있게 되었습니다. :)

마치면서

본 포스팅에서 간단하게 구현해본 상단에 고정되는 메뉴바는 사실 Bootstrap과 같은 CSS 라이브러리를 통해 쉽게 접할 수 있습니다. 하지만 한번 직접 구현하고 어떻게 동작하는 건지 파악해보는 것도 CSS를 공부하고 계신다면 도움이 될 것 같습니다.

참고로 최근에는 fixed position 대신에 sticky position을 이용해서 동일한 UI를 구현하는 경우가 많은 것 같습니다. 이에 대한 내용은 별도의 포스팅에서 다루었으니 참고 바랍니다.

This work is licensed under CC BY 4.0

messageCircle