웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 웹사이트에 탭메뉴(Tab menu)를 만들어보겠습니다. 어떻게하면 탭메뉴를 만들 수 있을까요?
! 탭메뉴 UI란?
탭 방식으로 화면을 전환하는 인터페이스를 말합니다. 탭 방식이 자주 사용되는 이유는 간단한데요 바로 제한된 웹페이지 공간에 보여줄 일부 콘텐츠를 레이어로 구분하여 숨기길 수 있기 때문입니다. 숨겨진 영역만큼 확보된 영역에 원하는 콘텐츠를 선택해 보여줄 수 있게되므로 많은 콘텐츠를 보여줘야 하는 경우 많이 쓰입니다.사실 숨겨서 보여주는 화면 인터렉션 방법은 이 외에도 다양한 방법이 존재합니다. 예를들어 어코디언 방식 또는 햄거버 버튼 등도 비슷한 이유로 사용되는 방법이죠.
# Why Tab UI? 탭메뉴를 사용하는 이유
하지만 탭 메뉴가 선호되는 이유는 다른 메뉴간의 이동이 매우 간편하기 때문이다. 즉, 사용성이 매우 편리한 방법이라 할 수 있다. 탭방식은고정된 메뉴 영역을 클릭을 통해 마음대로 이동할 수 있기 때문에 간편한 인터페이스룰 가지고 있으며 매우 직관적이다.
스크린샷) 네이버 오픈캐스트 안의 탭방식 메뉴위 스크린샷을 보시면 네이버 오픈캐스트가 탭메뉴로 사용된 것을 볼 수 있습니다. 탭을 클릭하면 숨겨져있던 메뉴들이 나타나면서 전환할 수 있게됩니다. 그럼 아래에서 간단한 예제를 만들고 직접 구현해보도록 하겠습니다.
# 탭메뉴 코드 예제보기
서두가 길었는데 탭메뉴를 만들기 위해서는 html, css 그 외에 약간의 스크립트가 필요합니다. 아래의 코드를 보세요. 먼저 html입니다.@ tab.html
<!-- 탭메뉴 만들기 -->
<dl>
<dt>Menu 1</dt>
<dd>
첫번째 탭메뉴 내용은 여기
</dd>
<dt>Menu 2</dt>
<dd class="hidden">
두번째 탭메뉴 내용은 여기
</dd>
</dl>
<dl>
<dt>Menu 1</dt>
<dd>
첫번째 탭메뉴 내용은 여기
</dd>
<dt>Menu 2</dt>
<dd class="hidden">
두번째 탭메뉴 내용은 여기
</dd>
</dl>
여기서는 탭메뉴를 구분하기 위하여 dl, dt, dd 태그를 사용하였으나 물론 다른 태그를 사용해도 동일한 효과를 만들 수 있습니다. 가급적이면 특정 기능 구현의 요소 단위에 동일한 코드를 사용하는편이 좋습니다. 그래야 기억하거나 변경 및 재사용이 쉬우므로 통일성을 갖는 습관도 필요하죠!
이번에는 css를 사용하여 탭메뉴의 모습을 가지는 스타일을 꾸며봅니다.
@ tab.css
dl {
position: relative;
width: 300px;
height: 100px;
}
dt {
height: 30px;
float: left;
width: 150px;
z-index: 9;
position: relative;
text-align: center;
background: #ddd;
}
dd {
position: absolute;
padding-top: 30px;
background-color: #f3f3f3;
width: 300px;
height: 100px;
margin: 0;
}
dd.hidden {
display: none;
}
position: relative;
width: 300px;
height: 100px;
}
dt {
height: 30px;
float: left;
width: 150px;
z-index: 9;
position: relative;
text-align: center;
background: #ddd;
}
dd {
position: absolute;
padding-top: 30px;
background-color: #f3f3f3;
width: 300px;
height: 100px;
margin: 0;
}
dd.hidden {
display: none;
}
여기서 알아둘 사항은 메뉴버튼에 해당하는 dt 태그는 float 속성을 사용해 일렬로 나열하게 하고 해당하는 내용은 dd태그 상단에 일정영역을 준 뒤 겹칠 수 있도록 상단 padding값으로 dt와 동일한 높이값을 정하는 것입니다.
그리고 겹치는 부분에서 메뉴바가 보일 수 있도록 z-index 속성을 사용하였습니다. 만약 z-index를 사용하지 않으면 하단 영역 때문에 상단 메뉴바가 가려져 안보일 수 있습니다.
그리고 하단의 콘텐츠 내용은 hidden 클래스를 사용하여 이 클래스명이 있는 요소는 안보이도록 바꿉니다. 이 부분이 중요한데 선택한 탭메뉴에 해당하는 영역만 보여주기 위함이로 선택되지 않은 영역은 숨겨야하기 때문이죠.
! 탭메뉴 만들기 스크립트 코드
그럼 이제 탭메뉴를 선택하여 화면 인터렉션이 작동하는 스크립트를 간단하게 만들어보겠습니다! 클릭했을때 탭메뉴가 보이고 안보이는 역할을 수행하게됩니다. 아래는 제이쿼리를 사용한 방법입니다.var $menuEle = $('dt'); // 탭메뉴를 변수에 지정
$menuEle.click(function() { // 탭메뉴 클릭 이벤트
$('dd').addClass('hidden');
$(this).next().removeClass('hidden');
})
$menuEle.click(function() { // 탭메뉴 클릭 이벤트
$('dd').addClass('hidden');
$(this).next().removeClass('hidden');
})
@ 스크립트 코드 설명
간략하게 설명하자면... dt 태그에 클릭 이벤트를 만들고 클릭시 함수가 호출됩니다. 이때 함수는 다음과 같이 동작합니다.
- 모든 dd 태그를 감추기
- 눌러진 dt 태그의 다음에 위치한 dd 태그만 보여주기(hidden 클래스를 제거)
위 예제는 간단하게 탭메뉴가 2개인 경우를 예로들었습니다. 당연히 그 이상의 탭메뉴가 가능하며 태그를 뒤에 추가하면 됩니다.
! 탭메뉴 실제로 동작해보기
위 예제를 아래에 구현해보겠습니다. 실제로 클릭해보세요. 어떻게 동작하는지 쉽게 알 수 있겠죠!
<!-- 탭메뉴 만들기 -->
<dl class="test">
<dt>Menu 1</dt>
<dd>
첫번째 탭메뉴 내용은 여기
</dd>
<dt>Menu 2</dt>
<dd class="hidden">
두번째 탭메뉴 내용은 여기
</dd>
</dl>
<style>
dl.test {
position: relative;
width: 300px;
height: 100px;
}
dl.test dt {
height: 30px;
float: left;
width: 150px;
z-index: 9;
position: relative;
text-align: center;
background: #ddd;
}
dl.test dd {
position: absolute;
padding-top: 30px;
background-color: #f3f3f3;
width: 300px;
height: 100px;
margin: 0;
}
dl.test dd.hidden {
display: none;
}
</style>
<script>
var $menuEle = $('dl.test dt'); // 탭메뉴를 변수에 지정
$menuEle.click(function() { // 탭메뉴 클릭 이벤트
$('dl.test dd').addClass('hidden');
$(this).next().removeClass('hidden');
});
</script>
<dl class="test">
<dt>Menu 1</dt>
<dd>
첫번째 탭메뉴 내용은 여기
</dd>
<dt>Menu 2</dt>
<dd class="hidden">
두번째 탭메뉴 내용은 여기
</dd>
</dl>
<style>
dl.test {
position: relative;
width: 300px;
height: 100px;
}
dl.test dt {
height: 30px;
float: left;
width: 150px;
z-index: 9;
position: relative;
text-align: center;
background: #ddd;
}
dl.test dd {
position: absolute;
padding-top: 30px;
background-color: #f3f3f3;
width: 300px;
height: 100px;
margin: 0;
}
dl.test dd.hidden {
display: none;
}
</style>
<script>
var $menuEle = $('dl.test dt'); // 탭메뉴를 변수에 지정
$menuEle.click(function() { // 탭메뉴 클릭 이벤트
$('dl.test dd').addClass('hidden');
$(this).next().removeClass('hidden');
});
</script>
탭메뉴를 클릭하여 잘 동작하는지 확인해보세요. 여기까지 탭메뉴 구현에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
