본문 바로가기

비개발자의 개발 일지

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

시리즈 보기
php

부트스트랩 어코디언 · 툴팁 · 팝오버 · 어픽스 완전 정리

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

 

 

Bootstrap JavaScript

부트스트랩 어코디언 · 툴팁 · 팝오버 · 어픽스 완전 정리

collapse 어코디언, tooltip, popover, affix/scrollspy를 Bootstrap 3 동작 흐름으로 정리합니다.

0 오늘 분석할 코드
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">열기</a>
<div id="collapseOne" class="panel-collapse collapse in">...</div>
<button data-toggle="tooltip" data-placement="left" title="왼쪽">툴팁</button>
<button data-toggle="popover" data-placement="right" data-content="내용">팝오버</button>
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="140">...</ul>
<script>$(".tooltip-test a, .tooltip-test button").tooltip(); $(".btn").popover();</script>
collapse접고 펼치는 Bootstrap JS 컴포넌트입니다.
accordion여러 collapse를 묶어 하나씩 열리게 하는 패턴입니다.
panel-groupBootstrap 3 어코디언의 패널 묶음입니다.
tooltip짧은 도움말을 hover/focus 시 표시합니다.
popover제목과 본문이 있는 작은 팝업 설명입니다.
data-placement툴팁/팝오버 표시 방향입니다.
affix스크롤 위치에 따라 요소를 고정하는 Bootstrap 3 플러그인입니다.
scrollspy스크롤 위치에 따라 nav active를 바꿉니다.
1 전체 구조

103번 폴더는 Bootstrap 3 JavaScript 컴포넌트 중 collapse, tooltip, popover, affix를 다룹니다. 모두 CSS 클래스와 data 속성만이 아니라 jQuery와 bootstrap.min.js 로드가 있어야 실제 동작합니다.

  • collapse는 접고 펼치는 영역입니다.
  • accordion은 collapse 여러 개를 panel-group으로 묶은 패턴입니다.
  • tooltip과 popover는 별도 초기화 코드가 필요합니다.
  • affix는 스크롤 위치에 따라 사이드 nav를 고정합니다.
2 collapse 기본 구조
클래스/속성 역할 주의
data-toggle=collapse 클릭 시 접기/펼치기 Bootstrap JS 필요
href=#collapseOne 대상 id collapse 영역 id와 일치
panel-collapse collapse 접히는 영역 in이 있으면 처음 열림
panel-body 펼쳐진 내용 본문 콘텐츠
3 accordion 동작

data-parent="#accordion"을 사용하면 같은 panel-group 안에서 하나를 열 때 다른 항목이 닫히는 어코디언이 됩니다. 원문은 collapseOne만 처음 열린 상태로 시작합니다.

  1. panel-group에 id="accordion"을 붙입니다.
  2. 각 패널 제목 링크에 data-toggle="collapse"를 둡니다.
  3. data-parent="#accordion"으로 같은 그룹을 지정합니다.
  4. href는 각 collapse 영역 id를 가리킵니다.
  5. 처음 열 항목에는 collapse in을 둡니다.

 

반응형

 

4 tooltip 구조

툴팁은 data-toggle="tooltip"과 title 속성으로 만듭니다. data-placement를 생략하면 기본 위치가 사용되고, left, top, bottom, right로 방향을 지정할 수 있습니다.

클래스/속성 역할 주의
title 툴팁 내용 짧은 문구에 적합
data-placement=left 왼쪽 표시 공간이 있어야 함
data-placement=bottom 아래 표시 버튼 아래 공간 확인
$(...).tooltip() 초기화 직접 호출 필요
5 링크와 버튼 툴팁

원문은 a 링크와 button 모두에 툴팁을 붙입니다. 버튼 예제에는 type="btton" 오타가 있으므로 실제 코드에서는 type="button"으로 고쳐야 합니다.

  • 링크 툴팁은 문장 중간의 보조 설명에 적합합니다.
  • 버튼 툴팁은 아이콘 버튼이나 짧은 버튼 보완에 적합합니다.
  • title은 너무 길게 쓰지 않습니다.
  • hover뿐 아니라 keyboard focus에서도 의미가 전달되는지 확인합니다.
6 popover 구조

팝오버는 툴팁보다 긴 설명을 담습니다. title은 제목, data-content는 본문, data-container="body"는 팝오버를 body 기준으로 배치하게 합니다.

클래스/속성 역할 주의
data-toggle=popover 팝오버 동작 초기화 필요
title 팝오버 제목 짧고 명확하게
data-content 팝오버 본문 툴팁보다 긴 설명
data-container=body body에 배치 부모 overflow 문제 완화
7 popover 방향

원문은 left, top, bottom, right 네 방향 팝오버를 보여 줍니다. 팝오버는 크기가 툴팁보다 크므로 화면 밖으로 나가지 않는지 더 주의해야 합니다.

  • 왼쪽 팝오버는 버튼 오른쪽에 공간이 충분해야 합니다.
  • 상단 팝오버는 위쪽 여백이 필요합니다.
  • 하단 팝오버는 아래쪽 콘텐츠와 겹칠 수 있습니다.
  • 오른쪽 팝오버는 좁은 화면에서 잘릴 수 있습니다.
8 초기화 코드

tooltip과 popover는 원문처럼 jQuery 선택자로 초기화합니다. tooltip은 특정 영역 안의 a와 button만 선택했고, popover는 모든 .btn에 적용했습니다.

클래스/속성 역할 주의
$(".tooltip-test a, .tooltip-test button").tooltip() 툴팁 초기화 선택자 범위를 제한
$(".btn").popover() 팝오버 초기화 모든 버튼에 적용되어 과할 수 있음
jQuery 먼저 로드 필수 순서 $ is not defined 방지
bootstrap.min.js 다음 플러그인 등록 tooltip/popover 함수 제공
9 affix 구조

affix 예제는 왼쪽 nav-tabs nav-stacked 메뉴를 스크롤 위치에 따라 고정합니다. data-spy="affix"와 data-offset-top="140"이 핵심입니다.

클래스/속성 역할 주의
data-spy=affix 어픽스 활성화 Bootstrap 3 플러그인
data-offset-top=140 고정 시작 위치 상단에서 140px 이후 고정
ul.nav-tabs.affix 고정 상태 CSS top:30px 지정
body data-spy=scroll 스크롤스파이 현재 섹션 active 표시
10 affix와 scrollspy 조합

body에는 data-spy="scroll" data-target="#myScrollspy"가 있고, 왼쪽 메뉴는 href="#one"처럼 본문 섹션 id와 연결됩니다. affix는 메뉴 위치를 고정하고, scrollspy는 active 상태를 바꿉니다.

  1. body에 scrollspy 설정을 둡니다.
  2. 왼쪽 메뉴 컨테이너에 id="myScrollspy"를 둡니다.
  3. ul에 data-spy="affix"를 둡니다.
  4. 각 링크 href를 본문 h2 id와 맞춥니다.
  5. 스크롤하면서 메뉴 고정과 active 변경을 함께 확인합니다.
11 affix CSS

원문은 nav-tabs의 width, border, box-shadow, active 배경색, border-radius를 직접 지정합니다. ul.nav-tabs.affix에는 top:30px를 넣어 고정 후 상단 간격을 정합니다.

  • 고정될 메뉴는 폭이 명확해야 흔들리지 않습니다.
  • affix 상태 CSS는 일반 nav 스타일과 구분합니다.
  • top 값은 상단 고정 헤더 유무에 따라 조정합니다.
  • 모바일에서는 고정 메뉴가 본문을 가리지 않는지 확인합니다.
12 JavaScript 의존성

collapse, tooltip, popover, affix 모두 Bootstrap JavaScript 플러그인입니다. jQuery, bootstrap.min.js 순서를 지켜야 하고, tooltip/popover는 별도 초기화까지 필요합니다.

클래스/속성 역할 주의
collapse data 속성으로 동작 가능 스크립트 로드 필수
tooltip 초기화 필요 $(...).tooltip()
popover 초기화 필요 $(...).popover()
affix data-spy로 동작 Bootstrap 3 전용
13 Bootstrap 3 기준

affix는 Bootstrap 3 플러그인입니다. Bootstrap 4/5에는 기본 affix가 없으므로 position: sticky나 custom JavaScript로 대체해야 합니다. data-toggle도 최신 버전에서는 data-bs-toggle로 바뀝니다.

클래스/속성 역할 주의
affix Bootstrap 3 전용 position: sticky 대체
panel-group Bootstrap 3 어코디언 최신 버전 accordion 구조 확인
data-toggle Bootstrap 3/4 Bootstrap 5 data-bs-toggle
tooltip/popover 초기화 jQuery 방식 최신 버전 초기화 API 확인
14 실전 선택 기준
목표 컴포넌트 이유
FAQ accordion 질문별 내용을 접고 펼칠 수 있습니다.
짧은 보조 설명 tooltip UI를 복잡하게 만들지 않습니다.
제목이 있는 상세 도움말 popover 툴팁보다 많은 정보를 담습니다.
긴 문서 사이드 메뉴 affix + scrollspy 현재 위치와 빠른 이동을 함께 제공합니다.
15 검증 체크리스트
  • collapse 링크 href와 대상 id가 일치합니다.
  • accordion에는 data-parent가 올바르게 지정되어 있습니다.
  • tooltip과 popover 초기화 코드가 실행됩니다.
  • button type 오타가 없는지 확인합니다.
  • affix 메뉴 href와 본문 섹션 id가 일치합니다.
  • jQuery와 bootstrap.min.js 로드 순서가 맞습니다.
16 접근성 점검
  • 툴팁 내용이 중요한 정보라면 화면 본문에도 표시하는 방법을 고려합니다.
  • 팝오버는 키보드 사용자도 열고 닫을 수 있어야 합니다.
  • 어코디언 제목 링크는 펼쳐지는 내용의 제목으로 충분히 명확해야 합니다.
  • 고정 메뉴가 화면 확대나 모바일에서 본문을 가리지 않는지 확인합니다.
  • 스크롤스파이 active 상태만으로 현재 위치를 전달하지 말고 제목 구조도 유지합니다.
17 컴포넌트별 디버깅
컴포넌트 증상 확인할 것
collapse 클릭해도 열리지 않음 href 대상 id와 Bootstrap JS 로드
accordion 여러 패널이 동시에 열림 data-parent 값과 panel-group id
tooltip 기본 title만 보임 tooltip 초기화 코드 실행 여부
popover 모든 버튼에 팝오버가 붙음 초기화 선택자 범위
affix 메뉴가 고정되지 않음 data-spy, data-offset-top, 충분한 스크롤 높이
scrollspy active가 바뀌지 않음 body data-target과 nav id 연결
18 실전 적용 순서
  1. 대상 연결: href, data-target, id가 서로 맞는지 먼저 확인합니다.
  2. 스크립트 로드: jQuery와 bootstrap.min.js 순서를 확인합니다.
  3. 초기화 코드: tooltip과 popover는 명시 초기화를 넣습니다.
  4. 화면 공간: popover와 affix가 화면 밖으로 나가지 않는지 확인합니다.
  5. 모바일 확인: 고정 메뉴와 팝업 설명이 작은 화면에서 본문을 가리지 않는지 봅니다.
19 최신 버전 이전 메모
  • Bootstrap 5에서는 data-toggle 대신 data-bs-toggle을 사용합니다.
  • affix는 최신 Bootstrap 기본 플러그인에 없으므로 position: sticky를 검토합니다.
  • panel 기반 accordion은 최신 accordion 컴포넌트 구조로 바꿔야 할 수 있습니다.
  • tooltip과 popover 초기화는 jQuery 방식에서 JavaScript 클래스 방식으로 바뀔 수 있습니다.
  • 마이그레이션 후에는 클릭, hover, focus, scroll 동작을 모두 다시 테스트합니다.
  • 접기/펼치기 상태를 아이콘으로 표시한다면 aria-expanded와 함께 갱신하는지 확인합니다.
  • 툴팁은 터치 환경에서 hover가 없다는 점을 고려해 대체 설명을 준비합니다.
  • 팝오버 내부에 중요한 액션을 넣을 때는 닫힘 조건과 포커스 이동을 명확히 합니다.
  • 고정 사이드 메뉴는 footer 영역과 겹치지 않도록 하단 한계도 검토합니다.
  • scrollspy와 affix를 함께 쓸 때는 offset 값이 서로 충돌하지 않는지 확인합니다.
  • 본문 섹션 높이가 너무 짧으면 scrollspy active 변화가 기대보다 빠르게 지나갈 수 있습니다.
  • 동작 컴포넌트는 마우스, 키보드, 터치 입력을 각각 확인합니다.
  • 초기화 선택자는 페이지의 다른 버튼이나 링크에 부작용을 주지 않게 좁게 잡습니다.
  • 긴 도움말은 tooltip보다 popover나 본문 안내로 옮기는 것이 읽기 쉽습니다.
M 자주 하는 실수
실수 문제 해결
jQuery 로드 누락 tooltip/popover 함수가 없습니다. jQuery 다음 bootstrap.min.js를 로드합니다.
href와 collapse id 불일치 어코디언이 열리지 않습니다. href 대상과 id를 맞춥니다.
tooltip 초기화 누락 title만 있고 툴팁 UI가 나오지 않습니다. $(...).tooltip()을 호출합니다.
popover를 모든 .btn에 적용 원치 않는 버튼에도 팝오버가 붙습니다. 선택자 범위를 제한합니다.
affix를 최신 Bootstrap에서 기대 기본 플러그인이 없을 수 있습니다. Bootstrap 3 기준임을 확인합니다.

핵심 한 줄 요약

collapse어코디언은 data-parent, href, collapse id 연결이 핵심입니다.
hinttooltip과 popover는 data 속성 작성 후 jQuery 초기화가 필요합니다.
affixaffix는 Bootstrap 3 전용 고정 메뉴 플러그인으로 scrollspy와 함께 쓰입니다.

Tags

#Bootstrap#collapse#accordion#tooltip#popover#affix#scrollspy#jQuery#Bootstrap3#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, collapse, accordion, tooltip, popover, affix, scrollspy, jQuery, Bootstrap3, 티스토리
반응형

'php' 카테고리의 다른 글

부트스트랩 캐러셀 캡션 · 모달 메서드 · 팝오버 메서드 완전 정리  (0) 2026.07.18
부트스트랩 이벤트 · jQuery 초기화 완전 정리  (0) 2026.07.18
부트스트랩 캐러셀 · 모달 · 스크롤스파이 완전 정리  (0) 2026.07.18
부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리  (0) 2026.07.18
부트스트랩 드롭다운 · 점보트론 · 내비게이션바 · 진행바 완전 정리  (0) 2026.07.18

관련글

댓글

티스토리툴바