폭이 가변으로 조종되는 메뉴나 탭을 만들 때 flex를 사용해면 쉽게 처리가 가능합니다.
탭을 포함하는 콘테이너에 display:flex를 적용하고, 콘테이너에 들어가는 요소는 flex:auto를 주면… 끝!!! HTML과 CSS 코드는 다음과 같습니다.
(box-shadow는 영역을 눈으로 확인하기 위해 사용하였고, 실제 코드상 필요없는 부분입니다.)
1 2 | .container{display:flex;}
.container .child{flex:auto;box-shadow:0 0 1px 1px #69f;} |
1 2 3 4 | <div class="container">
<div class="child">111</div>
<div class="child">222</div>
</div> |
그러면 다음과 같은 결과를 얻을 수 있죠.
111
222
.
여기에 테두리 및 배경색을 추가해주면 다음과 같이 간단히 탭을 구현할 수 있습니다.
- 111
- 222
- 111
- 222
- 333
- 111
- 222
- 333
- 444
1 2 3 4 | ul.flex_container{display:flex;list-style:none;border-bottom:1px solid #69f;height:30px;}
ul.flex_container > li{flex:auto;text-align:center;line-height:30px;}
ul.flex_container > li span{display:block;height:29px;border:1px solid #fff;border-bottom:none;background-color:#fff;}
ul.flex_container > li.on span{border:1px solid #69f;border-bottom:none;background-color:#efefef;height:30px;} |
<ul class="flex_container">
<li><span>111</span></li>
<li><span>222</span></li>
<li><span>333</span></li>
</ul> |
1 2 3 4 5 6 7 8 | $(function(){ $("ul.flex_container > li").bind("click", flexContainerClick); }); function flexContainerClick(){ var me = $(this); me.siblings().removeClass("on"); me.addClass("on"); } |
참 쉽죠잉?
One thought on “flex를 사용한 탭 만들기”