본문 바로가기

비개발자의 개발 일지

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

시리즈 보기
php

부트스트랩 이벤트 · jQuery 초기화 완전 정리

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

 

 

Bootstrap Events

부트스트랩 이벤트 · jQuery 초기화 완전 정리

alert fade, carousel event, scrollspy, waypoint 메뉴 전환을 jQuery 초기화 흐름으로 정리합니다.

0 오늘 분석할 코드
<div class="alert fade in alert-danger">
  <a href="#" class="close" data-dismiss="alert">×</a>
  <strong>경고!</strong> 네트워크 문제가 있습니다.
</div>
<script>
$(function(){
  $('#myCarousel').on('slide.bs.carousel', function () {
    alert('캐러셀 이벤트');
  });
});
$('body').scrollspy({ target: '#navbar-example' });
$('.fix').waypoint(function(direction) {
  if (direction === 'down') $('.topfix').removeClass('hidden');
});
</script>
alert fade닫을 때 전환 효과가 있는 알림입니다.
data-dismissBootstrap 컴포넌트를 닫는 data 속성입니다.
slide.bs.carousel캐러셀이 슬라이드되기 직전에 발생하는 이벤트입니다.
scrollspy스크롤 위치에 따라 nav active를 갱신합니다.
navbar-fixed-top상단에 고정되는 네비게이션바입니다.
waypoint스크롤 위치를 감지하는 외부 jQuery 플러그인입니다.
hidden요소를 숨기는 Bootstrap 유틸리티 클래스입니다.
img-responsive이미지를 부모 폭에 맞게 줄이는 Bootstrap 3 클래스입니다.
1 전체 예제 흐름

104번 폴더는 Bootstrap 컴포넌트를 단순히 표시하는 단계에서 한 걸음 더 나아가 이벤트와 jQuery 초기화를 다룹니다. alert 닫기, carousel 이벤트, scrollspy 초기화, waypoint를 이용한 메뉴 전환이 핵심입니다.

  • alert fade는 닫기 버튼과 전환 효과를 보여 줍니다.
  • carousel-event는 slide.bs.carousel 이벤트를 감지합니다.
  • scrollspy2는 고정 nav와 본문 섹션을 연결합니다.
  • menu-sample은 waypoint로 스크롤 방향에 따라 메뉴를 바꿉니다.
2 alert fade
항목 역할 주의
alert fade in alert-danger 전환 효과가 있는 경고 fade와 in을 함께 사용
close 닫기 버튼 스타일 X 버튼에 사용
data-dismiss=alert 알림 닫기 동작 Bootstrap JS 필요
× X 문자 닫기 UI
3 alert 닫기 흐름

닫기 버튼을 클릭하면 Bootstrap alert 플러그인이 data-dismiss="alert"를 읽고 해당 alert를 제거합니다. fade 클래스가 있으면 사라지는 전환 효과가 적용됩니다.

  1. alert 요소에 alert와 색상 클래스를 붙입니다.
  2. fade in으로 전환 효과와 초기 표시 상태를 둡니다.
  3. 닫기 링크나 버튼에 close 클래스를 붙입니다.
  4. data-dismiss="alert"를 추가합니다.
  5. jQuery와 bootstrap.min.js를 로드합니다.

 

반응형

 

4 carousel 이벤트

slide.bs.carousel은 슬라이드가 이동하기 직전에 발생합니다. 원문은 이 이벤트에 alert를 연결해 캐러셀이 작동할 때 메시지를 보여 줍니다.

항목 역할 주의
$('#myCarousel').on(...) 이벤트 등록 문서 준비 후 실행
slide.bs.carousel 슬라이드 시작 이벤트 전환 전 발생
slid.bs.carousel 슬라이드 완료 이벤트 필요 시 대체
alert() 테스트 메시지 실전에서는 과도하게 쓰지 않음
5 캐러셀 id 연결 주의

원문 carousel-event에는 캐러셀 전체 id가 myCarousel인데 indicators의 data-target은 carousel-example-generic입니다. 실제 동작을 맞추려면 indicator data-target도 #myCarousel로 맞춰야 합니다.

캐러셀은 id 연결이 여러 곳에 흩어져 있어 복사 후 이름을 바꿀 때 누락이 자주 생깁니다.
6 scrollspy2 구조

scrollspy2는 navbar-fixed-top과 body scrollspy 초기화를 사용합니다. body에는 padding-top:70px과 position:relative를 주어 고정 nav에 본문이 가리지 않게 합니다.

항목 역할 주의
navbar-fixed-top 상단 고정 메뉴 body padding-top 필요
body position:relative scrollspy 기준 Bootstrap 문서 패턴
href=#menu1 섹션 이동 링크 h4 id와 일치
$('body').scrollspy(...) jQuery 초기화 target nav 지정
7 scrollspy offset

고정 네비게이션바가 있으면 섹션 제목이 메뉴 아래에 가려질 수 있습니다. 원문은 .scrollcontent h4에 padding-top:70px을 주어 제목이 보이도록 조정합니다.

  • body padding-top은 고정 nav 높이만큼 둡니다.
  • 섹션 제목 padding-top으로 앵커 이동 위치를 보정합니다.
  • target은 navbar id와 일치해야 합니다.
  • 본문이 충분히 길어야 active 변경을 확인할 수 있습니다.
8 menu-sample 구조

menu-sample은 처음에는 큰 로고와 일반 메뉴를 보여 주고, 특정 위치를 지나 스크롤하면 fixed top 메뉴를 보여 줍니다. 이 전환은 Waypoints 플러그인이 담당합니다.

항목 역할 주의
topfix hidden 스크롤 후 나타날 메뉴 처음에는 hidden
menu 초기 메뉴 처음에 보임
fix 감지 지점 waypoint 대상
waypoints.min.js 스크롤 감지 플러그인 Bootstrap 외부 의존성
9 waypoint 방향 처리

direction이 down이면 topfix의 hidden을 제거하고 menu에 hidden을 추가합니다. direction이 up이면 반대로 topfix를 숨기고 menu를 다시 보여 줍니다.

  1. $('.fix').waypoint를 호출합니다.
  2. 아래로 내려오면 direction이 down입니다.
  3. topfix 메뉴를 보여 줍니다.
  4. 초기 menu를 숨깁니다.
  5. 다시 위로 올라가면 두 클래스를 반대로 적용합니다.
10 메뉴 CSS 커스터마이징

menu-sample은 topfix, navbar-brand, navbar-nav, navbar-form, navbar-toggle 등 Bootstrap 네비게이션 요소를 직접 커스터마이징합니다. 메뉴 색상과 여백이 프로젝트 스타일에 맞게 바뀝니다.

  • topfix .navbar-nav > li > a는 흰색 텍스트와 큰 padding을 사용합니다.
  • active 메뉴는 검정 배경으로 강조합니다.
  • navbar-toggle의 icon-bar는 흰색으로 설정합니다.
  • 검색 폼은 초기 메뉴와 고정 메뉴에서 위치가 다릅니다.
11 리소스 경로

menu-sample은 ./css, ./js, ./imgs처럼 현재 폴더 기준 경로를 사용합니다. 다른 Bootstrap 예제의 ../css 경로와 다르므로 복사할 때 특히 주의해야 합니다.

항목 역할 주의
./css/bootstrap.min.css 현재 폴더 css menu-sample 방식
../css/bootstrap.min.css 상위 폴더 css 다른 예제 방식
./imgs/biglogo.png 큰 로고 초기 메뉴
./js/waypoints.min.js 외부 플러그인 스크롤 전환
12 jQuery 준비 함수

carousel-event는 $(function(){ ... }) 안에서 이벤트를 등록합니다. DOM이 준비된 뒤 #myCarousel을 찾기 때문에 안정적입니다.

$(function(){
  $('#myCarousel').on('slide.bs.carousel', function () {
    alert('캐러셀 이벤트');
  });
});
13 이벤트 사용 기준
목표 이벤트/플러그인 사용 이유
알림 닫기 data-dismiss="alert" 사용자가 메시지를 제거합니다.
슬라이드 시작 감지 slide.bs.carousel 전환 직전 로그나 UI 갱신을 합니다.
현재 섹션 표시 scrollspy 스크롤 위치와 메뉴 active를 연결합니다.
스크롤 지점 통과 감지 waypoint 메뉴 교체 같은 커스텀 동작을 합니다.
14 디버깅 체크리스트
  • jQuery, bootstrap.min.js, waypoints.min.js 로드 순서가 맞습니다.
  • 캐러셀 id와 indicator data-target이 일치합니다.
  • scrollspy target과 navbar id가 일치합니다.
  • fixed top 메뉴 때문에 본문이 가려지지 않습니다.
  • hidden 클래스가 의도한 요소에만 적용됩니다.
  • 콘솔에 플러그인 관련 오류가 없는지 확인합니다.
15 최신 버전 이전 메모

원문은 Bootstrap 3과 jQuery 플러그인 방식입니다. 최신 Bootstrap으로 옮기면 data 속성 이름, jQuery 의존성, responsive image 클래스, 고정 메뉴 방식이 달라질 수 있습니다.

항목 역할 주의
data-dismiss Bootstrap 3/4 Bootstrap 5는 data-bs-dismiss
img-responsive Bootstrap 3 최신 버전 img-fluid
waypoint 외부 플러그인 IntersectionObserver 대체 가능
navbar-fixed-top Bootstrap 3 최신 fixed-top 확인
16 접근성 점검
  • alert를 닫아도 중요한 오류 해결 방법이 사라지지 않게 합니다.
  • 캐러셀 이벤트에 alert 대화상자를 남발하지 않습니다.
  • 고정 메뉴는 키보드 포커스 순서를 방해하지 않아야 합니다.
  • 스크롤 메뉴 링크는 실제 섹션 제목과 일치해야 합니다.
  • 로고 이미지에는 의미 있는 alt를 넣습니다.
17 이벤트별 디버깅
기능 증상 확인할 것
alert fade X 버튼이 닫히지 않음 data-dismiss="alert"와 bootstrap.min.js
carousel event 이벤트가 발생하지 않음 #myCarousel 선택자와 .on 등록 시점
carousel indicator 점 클릭이 이상함 data-target 값과 carousel id 일치
scrollspy 메뉴 active가 바뀌지 않음 body position, target, 섹션 id
waypoint 메뉴 전환이 안 됨 waypoints.min.js 로드와 .fix 위치
hidden 토글 메뉴가 둘 다 보임 addClass/removeClass 방향 처리
18 운영 코드로 바꿀 때
  • 이벤트 확인용 alert는 실제 서비스에서 console.log나 상태 표시 UI로 바꿉니다.
  • 스크롤 이벤트 계열은 너무 자주 실행되지 않도록 필요한 지점에서만 처리합니다.
  • 메뉴 전환은 hidden 클래스만이 아니라 애니메이션과 포커스 이동도 함께 고려합니다.
  • 캐러셀 이벤트에 서버 요청을 붙일 때는 중복 실행을 막는 처리가 필요합니다.
  • 이미지와 로고 경로는 배포 경로 기준으로 다시 확인합니다.
19 최신 버전 이전 메모
  • Bootstrap 5에서는 data-dismiss가 data-bs-dismiss로 바뀝니다.
  • carousel 이벤트 이름은 유지되더라도 초기화 방식과 의존성이 달라질 수 있습니다.
  • img-responsive는 img-fluid로 바꿔야 할 수 있습니다.
  • Waypoints 대신 IntersectionObserver를 쓰면 외부 jQuery 플러그인 의존성을 줄일 수 있습니다.
  • jQuery 기반 코드는 최신 Bootstrap 환경에서 순수 JavaScript 방식으로 재검토합니다.
M 자주 하는 실수
실수 문제 해결
indicator data-target 불일치 캐러셀 점 이동이 엉뚱한 대상을 가리킵니다. #myCarousel로 통일합니다.
waypoints 플러그인 누락 스크롤 메뉴 전환이 동작하지 않습니다. waypoints.min.js를 로드합니다.
fixed nav 보정 누락 본문 제목이 메뉴에 가립니다. body padding-top과 섹션 padding을 조정합니다.
hidden 클래스를 반대로 적용 두 메뉴가 동시에 보이거나 사라집니다. down/up 방향별 add/remove를 확인합니다.
alert로 이벤트 확인을 계속 사용 사용자 경험이 나빠집니다. 개발 후 console.log나 실제 UI 갱신으로 바꿉니다.

핵심 한 줄 요약

eventBootstrap 이벤트는 .on("이벤트명")으로 연결해 동작 시점을 잡습니다.
scrollscrollspy와 waypoint는 스크롤 위치를 UI 상태와 연결합니다.
debugid 연결, 스크립트 로드 순서, hidden 클래스 토글을 함께 확인해야 합니다.

Tags

#Bootstrap#jQuery#alert#carousel#scrollspy#waypoint#navbar#event#Bootstrap3#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, jQuery, alert, carousel, scrollspy, waypoint, navbar, event, Bootstrap3, 티스토리
반응형

'php' 카테고리의 다른 글

부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리  (0) 2026.07.18
부트스트랩 캐러셀 캡션 · 모달 메서드 · 팝오버 메서드 완전 정리  (0) 2026.07.18
부트스트랩 어코디언 · 툴팁 · 팝오버 · 어픽스 완전 정리  (0) 2026.07.18
부트스트랩 캐러셀 · 모달 · 스크롤스파이 완전 정리  (0) 2026.07.18
부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리  (0) 2026.07.18

관련글

댓글

티스토리툴바