본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리

by 왕진 2026. 7. 18.
반응형

 

 

Bootstrap Tab & Methods

부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리

탭 이벤트, collapse/tooltip 메서드, 영수증형 panel/table 레이아웃을 Bootstrap 3 기준으로 정리합니다.

0 오늘 분석할 코드
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activeTab = $(e.target).text();
  var previousTab = $(e.relatedTarget).text();
});
$('#collapseTwo').collapse('show');
$('#collapseThree').collapse('toggle');
$('.tooltip-show').tooltip('show');
$('.tooltip-options a').tooltip({ html: true });
<div class="panel panel-primary">
  <div class="panel-heading">주문 내역</div>
  <div class="panel-body"><div class="table-responsive">...</div></div>
</div>
shown.bs.tab탭이 완전히 표시된 뒤 발생하는 이벤트입니다.
e.target현재 활성화된 탭 링크입니다.
e.relatedTarget이전에 활성화되어 있던 탭 링크입니다.
collapse('show')collapse 영역을 펼치는 메서드입니다.
collapse('hide')collapse 영역을 접는 메서드입니다.
tooltip('toggle')툴팁 표시 상태를 전환합니다.
table-responsive표가 좁은 화면에서 가로 스크롤되게 합니다.
panel-primaryBootstrap 3 패널의 주요 색상 스타일입니다.
1 전체 예제 구성

106번 폴더는 Bootstrap JavaScript 이벤트와 메서드, 그리고 실전형 영수증 레이아웃을 함께 다룹니다. 탭 이벤트는 현재/이전 탭을 표시하고, collapse와 tooltip은 jQuery 메서드로 상태를 제어하며, invoice는 panel과 table로 주문 정보를 구성합니다.

  • 탭 예제는 shown.bs.tab 이벤트를 사용합니다.
  • collapse 예제는 show, hide, toggle, options를 사용합니다.
  • tooltip 예제는 show, hide, destroy, toggle, html 옵션을 사용합니다.
  • invoice 예제는 panel, table-responsive, table-condensed를 조합합니다.
2 탭 구조
항목 역할 주의
nav nav-tabs 탭 메뉴 ul에 사용
data-toggle=tab 탭 동작 연결 a 태그에 사용
tab-content 탭 본문 묶음 pane들을 감쌈
tab-pane fade in active 초기 활성 본문 첫 탭에 사용
3 shown.bs.tab 이벤트

shown.bs.tab은 탭 전환이 완료된 뒤 발생합니다. 원문은 e.target에서 현재 탭 이름을, e.relatedTarget에서 이전 탭 이름을 가져와 화면에 표시합니다.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activeTab = $(e.target).text();
  var previousTab = $(e.relatedTarget).text();
  $(".active-tab span").html(activeTab);
  $(".previous-tab span").html(previousTab);
});

 

반응형

 

4 탭 이벤트 해석

e.target과 e.relatedTarget은 탭 이벤트에서 가장 중요한 두 대상입니다. 현재 탭과 이전 탭을 알면 분석 로그, 상태 저장, 제목 변경 같은 동작을 붙일 수 있습니다.

항목 역할 주의
e.target 새로 활성화된 탭 현재 탭 이름 표시
e.relatedTarget 이전 탭 이전 탭 이름 표시
shown.bs.tab 표시 완료 후 UI 갱신에 적합
show.bs.tab 표시 전 전환 전 검증에 적합
5 collapse 메서드

collapse-method 예제는 네 패널에 서로 다른 메서드를 적용합니다. hide는 접기, show는 펼치기, toggle은 상태 전환, options는 초기 설정입니다.

항목 역할 주의
collapse({toggle:false}) 초기 자동 전환 방지 옵션 객체 전달
collapse('show') 강제로 펼침 두 번째 패널
collapse('toggle') 상태 전환 세 번째 패널
collapse('hide') 강제로 접기 첫 번째 패널
6 collapse 연결 구조

각 패널 제목 링크의 href는 collapse 영역 id를 가리킵니다. data-parent="#accordion"을 사용하면 어코디언처럼 하나씩 열리는 구조가 됩니다.

  1. panel-group id를 정합니다.
  2. 제목 링크에 data-toggle="collapse"를 붙입니다.
  3. data-parent를 panel-group id로 맞춥니다.
  4. href와 collapse 영역 id를 맞춥니다.
  5. 필요한 메서드를 스크립트에서 호출합니다.
7 tooltip 메서드

tooltip-method 예제는 show, hide, destroy, toggle과 html:true 옵션을 보여 줍니다. destroy는 툴팁 인스턴스를 제거하므로 다시 보이게 하려면 재초기화가 필요합니다.

항목 역할 주의
tooltip('show') 즉시 표시 시작부터 도움말 노출
tooltip('hide') 숨김 필요할 때만 표시
tooltip('destroy') 제거 재사용 시 재초기화
tooltip('toggle') 전환 클릭형 토글
{html:true} HTML 허용 보안 주의
8 tooltip HTML 옵션

tooltip-options 예제는 title 안에 h2 태그를 넣고 html:true로 해석합니다. 고정된 학습 예제에서는 가능하지만, 사용자 입력을 title에 넣는 경우에는 HTML 삽입 위험을 반드시 고려해야 합니다.

  • HTML 툴팁은 표현력이 높습니다.
  • 사용자 입력에는 그대로 적용하지 않습니다.
  • 중요 정보는 툴팁에만 의존하지 않습니다.
  • 모바일 터치 환경에서는 툴팁 사용성이 떨어질 수 있습니다.
9 invoice 레이아웃

invoice 예제는 주문 완료 안내, 주문 내역, 결제 정보, 배송 정보를 Bootstrap panel과 table로 구성합니다. 실제 서비스 화면에 가까운 레이아웃 예제입니다.

항목 역할 주의
panel panel-primary 정보 박스 각 정보 그룹을 묶음
panel-heading 섹션 제목 주문 내역/결제 정보
panel-body 본문 영역 table-responsive 포함
table-responsive 가로 스크롤 대응 모바일 표 대응
10 주문 내역 표

주문 내역은 table table-condensed로 촘촘하게 표시합니다. 상품코드, 제품명, 금액, 수량, 최종금액을 열로 나누고, thick-line과 no-line으로 합계 영역을 시각적으로 구분합니다.

  • 숫자 금액은 text-right로 오른쪽 정렬합니다.
  • 수량은 text-center로 가운데 정렬합니다.
  • 합계 행은 thick-line으로 구분합니다.
  • 운송비와 최종금액은 no-line으로 연결감 있게 표시합니다.
11 결제/배송 정보 표

결제 정보와 배송 정보는 table-bordered를 사용해 라벨 셀과 값 셀을 명확히 나눕니다. gr 클래스는 라벨 셀 배경색을 지정합니다.

항목 역할 주의
table-bordered 테두리 있는 표 정보 쌍 표시
gr 라벨 배경 회색 셀
text-center 라벨 가운데 정렬 읽기 쉬운 표
strong 중요 라벨 강조 주문번호, 결제상태
12 폼이 아닌 영수증 화면

파일명은 invoice이고 입력 폼이라기보다 결제 완료 후 보여 주는 영수증 화면입니다. 사용자가 값을 입력하는 UI가 아니라 구매 결과를 읽는 화면이므로 표 구조와 가독성이 중요합니다.

  • 주문 완료 메시지를 상단에 배치합니다.
  • 주문 내역과 결제 정보를 패널로 분리합니다.
  • 배송 정보는 별도 패널로 읽기 쉽게 둡니다.
  • 모바일에서는 table-responsive로 가로 스크롤을 허용합니다.
13 JavaScript 로드 순서

탭, collapse, tooltip은 모두 Bootstrap JS 플러그인입니다. jQuery를 먼저 로드하고 bootstrap.min.js를 로드한 뒤 사용자 스크립트를 실행해야 합니다.

항목 역할 주의
jQuery 먼저 로드 $ 제공
bootstrap.min.js 두 번째 tab/collapse/tooltip 등록
사용자 스크립트 마지막 이벤트와 메서드 호출
$(function) DOM 준비 후 요소 선택 안정화
14 디버깅 체크리스트
  • 탭 링크 href와 tab-pane id가 일치합니다.
  • shown.bs.tab 이벤트가 사용자 스크립트에서 등록됩니다.
  • collapse id와 href가 일치합니다.
  • tooltip 메서드를 호출하기 전에 대상 요소가 존재합니다.
  • invoice 표는 모바일에서 table-responsive로 넘치지 않습니다.
  • 금액 열은 오른쪽 정렬이 유지됩니다.
15 최신 버전 이전 메모

원문은 Bootstrap 3 기준입니다. 최신 버전에서는 data-toggle, panel, btn-default, table-condensed, jQuery 메서드 사용 방식이 달라질 수 있습니다.

항목 역할 주의
data-toggle=tab Bootstrap 3/4 Bootstrap 5 data-bs-toggle
panel Bootstrap 3 최신 card로 대체
table-condensed Bootstrap 3 최신 table-sm 확인
tooltip 메서드 jQuery 방식 최신 JS 인스턴스 방식
16 접근성 점검
  • 탭은 키보드로 이동 가능한지 확인합니다.
  • 현재 탭과 이전 탭 표시가 색상에만 의존하지 않게 합니다.
  • 툴팁에 중요한 정보를 독점적으로 넣지 않습니다.
  • 영수증 표는 제목과 열 이름이 명확해야 합니다.
  • 금액과 개인정보는 화면 캡처나 인쇄 시 노출 범위를 고려합니다.
17 메서드별 디버깅
기능 증상 확인할 것
tab event 현재 탭 이름이 비어 있음 e.target이 a[data-toggle=tab]인지 확인
previous tab 이전 탭 표시 오류 e.relatedTarget 존재 여부
collapse show 패널이 안 열림 collapse id와 스크립트 선택자
collapse options 초기 상태가 예상과 다름 toggle:false 적용 시점
tooltip html 태그가 문자로 보임 html:true 옵션
invoice table 모바일에서 가로 넘침 table-responsive wrapper
18 운영 적용 순서
  1. 탭 연결: nav 링크 href와 tab-pane id를 먼저 맞춥니다.
  2. 이벤트 등록: shown.bs.tab은 DOM 준비 후 등록합니다.
  3. 메서드 호출: collapse와 tooltip 메서드는 bootstrap.min.js 로드 후 호출합니다.
  4. 표 구조: 영수증 데이터는 열 이름, 합계, 배송비, 최종금액을 분리합니다.
  5. 반응형 확인: 긴 제품명과 금액 표가 좁은 화면에서 읽히는지 확인합니다.
19 실전 개선 포인트
  • 탭 상태는 URL hash나 localStorage에 저장하면 새로고침 후 복원할 수 있습니다.
  • collapse 메서드는 사용자 클릭과 스크립트 호출이 충돌하지 않게 상태를 확인하고 사용합니다.
  • 툴팁 HTML은 고정 문구에만 쓰고 사용자 입력에는 사용하지 않습니다.
  • 영수증 금액은 문자열이 아니라 숫자 데이터에서 포맷팅해 출력하는 편이 안전합니다.
  • 개인정보가 포함된 배송 정보는 마스킹과 인쇄 정책을 별도로 고려합니다.
M 자주 하는 실수
실수 문제 해결
tab href와 pane id 불일치 탭 내용이 전환되지 않습니다. href와 id를 맞춥니다.
collapse 메서드 호출 전 로드 collapse 함수가 없습니다. bootstrap.min.js 뒤에서 호출합니다.
tooltip destroy 후 재사용 기대 툴팁 인스턴스가 제거됩니다. 필요하면 재초기화합니다.
html:true에 사용자 입력 사용 HTML 삽입 위험이 있습니다. 신뢰된 고정 HTML만 사용합니다.
영수증 표 반응형 누락 모바일에서 표가 넘칩니다. table-responsive로 감쌉니다.

핵심 한 줄 요약

tabshown.bs.tab은 현재 탭과 이전 탭 정보를 e.target, e.relatedTarget으로 제공합니다.
methodcollapse와 tooltip은 show, hide, toggle 같은 jQuery 메서드로 상태를 제어합니다.
invoice영수증 화면은 panel, table-responsive, table 정렬 클래스로 읽기 쉽게 구성합니다.

Tags

#Bootstrap#tab#shown.bs.tab#collapse#tooltip#invoice#panel#table-responsive#jQuery#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, tab, shown.bs.tab, collapse, tooltip, invoice, panel, table-responsive, jQuery, 티스토리
반응형

'php' 카테고리의 다른 글

부트스트랩 이벤트핸들링 · 드롭다운메서드 · 쇼핑몰샘플 완전 정리  (0) 2026.07.19
부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리  (0) 2026.07.18
부트스트랩 캐러셀 캡션 · 모달 메서드 · 팝오버 메서드 완전 정리  (0) 2026.07.18
부트스트랩 이벤트 · jQuery 초기화 완전 정리  (0) 2026.07.18
부트스트랩 어코디언 · 툴팁 · 팝오버 · 어픽스 완전 정리  (0) 2026.07.18

관련글

댓글

티스토리툴바