사용자 경험을 높이는 탭 메뉴 제작: 클릭 이벤트와 자동 전환
CSS 25.09.24 조회 30사용자 경험을 높이는 탭 메뉴 제작: 클릭 이벤트와 자동 전환
웹사이트에서 탭 메뉴를 구현할 때, 클릭 이벤트만 적용하면 사용자가 직접 선택해야 하고,
자동 전환 기능이 없으면 중요한 콘텐츠가 자연스럽게 노출되지 않습니다.
이번 글에서는 HTML, CSS, JavaScript를 활용해 클릭 이벤트와 자동 전환 기능을 포함한 탭 메뉴를 단계별로 구현하는 방법을 소개합니다.
➰➰➰
✅ 탭 메뉴 활용 예제
✔ 상품 소개, 서비스 안내, FAQ, 갤러리형 등 다양한 콘텐츠
✅ 한 눈에 알아보기
✔ data 속성을 활용한 콘텐츠 매칭
✔ 클릭이벤트를 활용한 탭메뉴 구현
✔ setInterval함수를 활용한 자동 전환 기능 구현
✏️ HTML 구조는 이렇게 생겼어요
✔ 기본으로 노출시킬 요소에 on, view 등 클래스를 직접 추가
✔ 메뉴 요소에 class 또는 id 속성을 활용하여 data 속성 설정
✔ 콘텐츠 요소에 메뉴와 매칭시킬 값(class 또는 id) 설정
Tip) 매칭 시킬 요소가 1:n 일 경우, class 속성을 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <article id="inc01"> <div class="group-clinic" data-aos="fade-up"> <div class="fl-l"> <ul class="tab-list"> <li class="tab-item on" data-idx=".tab01"> <span class="clinic__tit">부모님 건강관리</span> </li> <li class="tab-item" data-idx=".tab02"> <span class="clinic__tit">맞춤형 한방 다이어트</span> </li> <li class="tab-item" data-idx=".tab03"> <span class="clinic__tit">추나요법</span> </li> </ul> </div> <div class="fl-r"> <div class="tab-con tab01 view"> </div> <div class="tab-con tab02 "> <img src="https://hos1038.shiningcorp.com/sh_img/include/inc01/img/clinic_02.png" alt="맞춤형 한방 다이어트"> </div> <div class="tab-con tab03 "> </div> </div> </div> </article> | cs |
✏️ CSS로 효과 구현하기
✔ 노출시킬 요소를 display:block; opacity:1; visibility:visible; 등으로 노출
✔ 반대로 감춰둘 요소를 display:none; opacity:0; visibility:hidden; 등으로 감춤 설정
Tip) dispaly 속성은 transition 효과 적용이 불가하니, opacity와 visbility을 활용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @font-face {font-family:'GyeonggiMillenniumTitle';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');font-weight:300;font-display:swap} @font-face {font-family:'GyeonggiMillenniumTitle';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Medium.woff') format('woff');font-weight:500;font-display:swap} @font-face {font-family:'GyeonggiMillenniumTitle';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Bold.woff') format('woff');font-weight:700;font-display:swap} @font-face {font-family:'GyeonggiMillenniumTitle';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/TitleV.woff') format('woff');font-weight:800;font-display:swap} :root{--primary:#998675;--bg-color:#f8f6ed;--k-font:'GyeonggiMillenniumTitle';--main-width:1400px;margin:0 auto;padding:0} body{background:var(--bg-color);font-size:0.81em;font-family:var(--k-font);font-weight:300;color:#777} ul,li,ol{list-style:none} #inc01{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:20px;padding-bottom:20px;font-family:var(--k-font);background-color:var(--bg-color)} #inc01 .group-clinic{display:flex;flex-direction:column;align-items:center;gap:20px;} #inc01 .group-clinic .tab-list{display:flex;justify-content:center;gap:24px} #inc01 .group-clinic .tab-item{cursor:pointer} #inc01 .group-clinic .tab-item .clinic__tit{font-size:15px;font-weight:400;line-height:100%;color:rgba(51,51,51,.4);transition:color 0.2s;will-change:color} #inc01 .group-clinic .tab-item.on .clinic__tit{color:#362f2d} #inc01 .group-clinic .fl-r{position:relative;max-width:300px;width:100%;height:300px} #inc01 .group-clinic .fl-r .tab-con{position:absolute;top:0;left:0;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.1s} #inc01 .group-clinic .fl-r .tab-con.view{opacity:1;visibility:visible} #inc01 .group-clinic .fl-r .tab-con img{width:100%;opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.4s} #inc01 .group-clinic .fl-r .tab-con.view img{opacity:1;visibility:visible} | cs |
✏️ 탭 메뉴 구현하기
✨ 클릭 탭 전환과 자동 전환 기능을 적용한 예제입니다.
클릭 시 자동 전환 기능은 리셋 후 재시작되어, 클릭한 탭 이후부터 자연스럽게 자동 전환이 이어집니다.
✔ 클릭 이벤트 처리 : 특정 탭이 클릭(전환)되면 탭(on)과 콘텐츠(view) 클래스가 적용/해제되어 상태를 변경
✔ 자동 전환 : setInterval 함수를 통해 탭 메뉴를 일정 간격(4초)마다 자동 전환
✔ 자동 전환 리셋 : 클릭 이벤트 발생 시, 기존의 자동 전환 제거 후 재시작 (인덱스 초기화하여 자연스러운 순환 유지)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | // 탭메뉴 공통 function changeTab(dataIdx, $tabItem) { $('#inc01 .tab-item').removeClass('on'); $tabItem.addClass('on'); $('#inc01 .tab-con').removeClass('view'); $('#inc01 .link--moreicon').removeClass('view'); $(dataIdx).addClass('view'); } // 탭 요소와 상태 let tabIndex = 0; const $tabs = $('#inc01 .tab-item'); const tabCount = $tabs.length; let tabInterval; // 자동 전환 함수 function startAutoTab() { tabInterval = setInterval(function(){ tabIndex = (tabIndex + 1) % tabCount; const $currentTab = $tabs.eq(tabIndex); const dataIdx = $currentTab.attr('data-idx'); changeTab(dataIdx, $currentTab); }, 4000); } // 클릭 이벤트 $('#inc01 .tab-item').on("click", function(){ const dataIdx = $(this).attr('data-idx'); tabIndex = $(this).index(); changeTab(dataIdx, $(this)); clearInterval(tabInterval); startAutoTab(); }); // 초기 자동 전환 시작 startAutoTab(); | cs |
➰➰➰
See the Pen 사용자 경험을 높이는 탭 메뉴 제작: 클릭 이벤트와 자동 전환 by designkits (@designkits) on CodePen.
✨ 참고링크 ✨
