Logo

CSS 플렉스박스 반응형 네비게이션

이번 포스팅에서는 플렉스박스(Flexbox)와 미디어쿼리(media query)를 사용하여 반응형 네비게이션을 만들어보도록 하겠습니다.

네비게이션 1

아래 HTML 코드는 여느 웹사이트에서나 흔히 볼 수 있는 젼형적인 네비게이션입니다. 화면의 너비가 좁은 모바일 화면에서는 메뉴를 세로로 표시하고, 화면의 너비가 넓은 데스크탑에서는 메뉴가 가로로 표시하는 경우가 많은데요.

<nav>
  <ul>
    <li><a href="#">메뉴 1</a></li>
    <li><a href="#">메뉴 2</a></li>
    <li><a href="#">메뉴 3</a></li>
    <li><a href="#">메뉴 4</a></li>
    <li><a href="#">메뉴 5</a></li>
    <li><a href="#">메뉴 6</a></li>
    <li><a href="#">메뉴 7</a></li>
    <li><a href="#">메뉴 8</a></li>
  </ul>
</nav>

모바일 스타일

반응형 디자인을 할 때는 모바일 우선으로 스타일을 적용하는 것이 여러 가지 측면에서 좋은 관행으로 알려져있습니다.

먼저 <ul/> 엘리먼트를 Flex container로 만들기 위해서 display 속성을 flex로 설정하겠습니다. 모바일에서는 메뉴 아이템들을 세로 방향으로 나열하기 위해서 flex-direction 속성을 column으로 설정합니다.

ul {
  display: flex;
  flex-direction: column;
}

데스크탑 스타일

반면 데스크탑에서는 매뉴를 가로 방향으로 나열하기 위해서 flex-direction 속성을 row으로 설정합니다. 그리고 메뉴 아이템들이 우측에 빈 공간없이 균등하게 자리를 차지할 수 있도록 Flex item인 <li/> 엘리먼트의 flex 속성을 1로 설정해줍니다.

@media only screen and (min-width: 640px) {
  ul {
    flex-direction: row;
  }

  li {
    flex: 1;
  }
}

전체 코드

단지 몇 줄의 CSS 코드로 화면의 너비에 따라 메뉴 아이템들이 다른 방향으로 배치되는 네비게이션을 얻게 되었습니다! 😎

네비게이션 2

네비게이션의 메뉴 아이템의 너비가 같지 않을 때는 어떻게 처리해야할까요? 예를 들어, 위 네비게이션에 아이콘 아이템들을 추가해보도록 하겠습니다.

<nav>
  <ul>
    <li><a href="#">메뉴 1</a></li>
    <li><a href="#">메뉴 2</a></li>
    <li><a href="#">메뉴 3</a></li>
    <li><a href="#">메뉴 4</a></li>
    <li><a href="#">메뉴 5</a></li>
    <li><a href="#">메뉴 6</a></li>
    <li><a href="#">메뉴 7</a></li>
    <li><a href="#">메뉴 8</a></li>
    <li class="icon"><a href="#">🔍</a></li>
    <li class="icon"><a href="#"></a></li>
    <li class="icon"><a href="#">💻</a></li>
    <li class="icon"><a href="#">❤️</a></li>
  </ul>
</nav>

모바일 스타일

모바일에서 일반 아이템들은 세로로 배열하되 아이콘 아이템들만 가로로 배열하려고 합니다. 먼저 Flex container인 <ul/> 엘리먼트의 flex-wrap 속성을 wrap으로 설정하여 공간이 부족할 때 줄바꿈이 일어나도록 합니다.

ul {
  display: flex;
  flex-wrap: wrap;
}

그 다음, Flex item 레벨에서 일반 메뉴 아이템과 아이콘 아이템의 flex-basis 속성을 가각 100%25% 설정합니다. 이렇게 해주면, 일반 메뉴 아이템은 한 줄을 전체를 차지하기 때문에, 세로로 배치되는 효과를 갖게 되는 반면에, 4개의 아이콘 아이템들은 한 줄에 배치게됩니다.

li {
  flex-basis: 100%;
}

li.icon {
  flex-basis: 25%;
}

테블릿 스타일

테블릿과 같은 중간 너비의 화면에서는 flex-basis 속성을 50%로 낮추어 한 줄에 2개씩 배치되도록 하였습니다.

@media only screen and (min-width: 640px) {
  li {
    flex-basis: 50%;
  }
}

데스크탑 스타일

테스크탑과 같이 넓은 화면에서는 일반 아이템과 아이콘 아이템 한 줄에 모두 배치하는 편이 좋을 것 같습니다. 이럴 때는 flex 속성을 이용해서 일반 아이템이 아이콘 아이템의 3배의 너비를 차지하도록 해줍니다.

@media only screen and (min-width: 1024px) {
  li {
    flex: 3;
  }

  li.icon {
    flex: 1;
  }
}

전체 코드

Flex item 레벨에서 약간의 CSS 코드를 추가하여 좀 더 다이나믹한 네이게이션이 되었습니다. 😁 아래 Codepen 에디터 하단의 1x, 0.5x, 0.25x 버튼을 눌러보면 메뉴 아이템이 다르게 배치가 되는 것을 보실 수 있으실 겁니다.

마치면서

이상으로 Flexbox와 미디어쿼리를 이용해서 어떻게 반응형 네비게이션을 구현할 수 있는지 살펴보았습니다.