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와 미디어쿼리를 이용해서 어떻게 반응형 네비게이션을 구현할 수 있는지 살펴보았습니다.