왕진 블로그
부트스트랩 이벤트핸들링 · 드롭다운메서드 · 쇼핑몰샘플 완전 정리
alert, modal, collapse 이벤트와 dropdown 메서드, 고정 네비게이션 쇼핑몰 샘플을 함께 정리합니다.
이 문서는 원본 Markdown 예제의 의도와 코드를 기준으로 Bootstrap 3 수업 내용을 다시 정리한 HTML입니다.
컴포넌트 이름만 외우지 않고, HTML 구조와 data 속성, jQuery 초기화 코드, CSS 커스텀 영역이 어떻게 연결되는지 중심으로 봅니다.
closed.bs.alert처럼 alert가 닫힌 뒤 실행되는 Bootstrap 이벤트입니다.
show, shown, hide, hidden 단계에서 모달 상태 변화를 감지합니다.
패널이 열리고 닫히는 시점을 Bootstrap 이벤트로 확인합니다.
드롭다운 메뉴를 JavaScript로 열거나 닫는 메서드입니다.
상단에 고정되는 Bootstrap 3 네비게이션 클래스입니다.
캐러셀의 현재 위치와 직접 이동 버튼을 제공하는 점 목록입니다.
상품 썸네일에 마우스를 올렸을 때 테두리나 이미지 위치를 바꾸는 패턴입니다.
원본 쇼핑몰 샘플에서 장바구니와 검색 아이콘에 사용한 아이콘 폰트입니다.
아래 코드는 이 폴더에서 반복해서 등장하는 Bootstrap 3 초기화와 이벤트 처리 흐름을 요약한 예시입니다.
108번은 Bootstrap 3 컴포넌트 이벤트를 확인한 뒤, 그 지식을 쇼핑몰 샘플의 네비게이션과 캐러셀 구조에 연결하는 폴더입니다. alert, modal, collapse는 상태 변화 이벤트를 배우는 예제이고, dropdown은 메서드 호출 방식, sec 샘플은 실제 페이지 조립 방식입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
alert는 닫히기 전과 닫힌 후 이벤트를 제공합니다. 사용자가 메시지를 닫은 뒤 안내 문구를 바꾸거나 로그를 남길 때 closed.bs.alert 같은 이벤트를 사용합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
modal은 show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal처럼 단계가 분리됩니다. 애니메이션 전후가 다르기 때문에 DOM 조작 시점을 정확히 골라야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
collapse는 아코디언 메뉴나 접이식 패널을 만들 때 사용합니다. 열림과 닫힘을 이벤트로 감지하면 현재 열린 패널 이름을 표시하거나 다른 UI 상태를 갱신할 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
dropdown('toggle')은 data-toggle 속성 없이도 스크립트에서 메뉴를 열고 닫게 합니다. 다만 Bootstrap 3에서는 jQuery와 bootstrap.min.js 로드 순서가 맞아야 메서드가 존재합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
sec 샘플의 navbar는 로그인 보조 메뉴와 제품정보, 스토어, 고객지원 같은 메인 메뉴를 나눕니다. 모바일 버튼은 data-target으로 접힐 영역을 가리키므로 클래스명이 정확해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
navbar-fixed-top을 쓰면 네비게이션이 문서 흐름에서 빠져 상단 콘텐츠를 덮을 수 있습니다. 원본처럼 body에 padding-top을 주어 첫 화면이 가려지지 않게 만듭니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
쇼핑몰 샘플의 캐러셀은 carousel-indicators, item, carousel-caption, 좌우 컨트롤로 구성됩니다. 캡션 위치와 색상 클래스는 상품 홍보 영역을 만들기 위한 커스텀 CSS입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
thumbnail에 border와 outline을 주고 hover 시 빨간 테두리와 이미지 이동을 적용합니다. 이런 효과는 상품 카드가 클릭 가능한 영역임을 사용자가 빠르게 인식하게 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
nav-top과 nav-main은 화면 폭에 따라 padding과 검색폼 표시 여부가 달라집니다. Bootstrap 그리드와 커스텀 media query가 동시에 적용되므로 작은 화면에서 메뉴가 겹치지 않는지 확인해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
로고, 세로 구분선, 상품 이미지, Font Awesome CSS가 모두 외부 또는 상대 경로에 의존합니다. 블로그에 올릴 때는 로컬 ./imgs 경로를 실제 첨부 이미지 주소로 바꿔야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
이 폴더의 핵심은 컴포넌트 이벤트와 실제 레이아웃 코드가 분리된 지식이 아니라는 점입니다. 메뉴, 모달, 접이식 영역, 캐러셀 모두 id와 data 속성 연결이 정확해야 한 화면으로 완성됩니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
원본 Markdown의 목적은 Bootstrap 컴포넌트를 실제 페이지에 붙여 보며 동작 흐름을 익히는 것입니다.
따라서 재작성 HTML에서는 코드의 세부 문법뿐 아니라 그 코드가 왜 필요한지, 어느 연결이 끊기면 어떤 증상이 생기는지를 함께 설명합니다.
특히 Bootstrap 3 예제는 jQuery 플러그인 방식이므로 최신 문법으로 섣불리 바꾸기보다 원본 수업 환경을 먼저 기준으로 삼는 것이 좋습니다.
발행용 글에서는 외부 이미지가 깨질 수 있으므로 이미지 자체보다 구조와 선택자 관계를 먼저 이해하도록 정리했습니다.
첫 번째 우선순위는 화면이 깨지지 않는 것입니다. CSS 경로, Bootstrap CSS, 이미지 경로가 맞아야 기본 레이아웃이 보입니다.
두 번째 우선순위는 동작입니다. jQuery, bootstrap.min.js, data-toggle, data-target, href가 맞아야 메뉴와 버튼이 반응합니다.
세 번째 우선순위는 유지보수입니다. 전역 클래스 덮어쓰기를 줄이고, 쇼핑몰 샘플처럼 큰 화면은 영역별 클래스로 범위를 좁혀야 합니다.
이 순서로 확인하면 단순 오타와 구조 문제를 분리해서 찾을 수 있습니다.
Bootstrap 3 예제는 glyphicon, panel, thumbnail, affix, jQuery 플러그인 같은 오래된 전제를 포함합니다.
Bootstrap 5로 옮기면 data 속성 이름, 아이콘 사용 방식, 일부 컴포넌트 이름과 JavaScript 초기화 방식이 달라집니다.
그래서 원본을 그대로 최신 CDN에 붙이는 방식은 위험합니다. 먼저 Bootstrap 3에서 정상 동작을 확인한 뒤 컴포넌트별로 대응 문법을 바꾸는 편이 안전합니다.
학습 글에서는 이 차이를 명확히 적어 두면 나중에 코드를 복습할 때 버전 혼동을 줄일 수 있습니다.
발행 전에 데스크톱 폭과 모바일 폭에서 한 번씩 확인합니다. 네비게이션, 캐러셀, 상품 썸네일, footer는 화면 폭에 따라 가장 쉽게 틀어지는 영역입니다.
콘솔 오류가 하나라도 있으면 이벤트 예제가 정상으로 보이지 않을 수 있습니다. 오류 메시지에서 선택자, 플러그인 이름, 로드 실패를 먼저 확인합니다.
이미지가 깨져도 글의 설명은 읽을 수 있지만, 쇼핑몰 샘플의 의도는 약해집니다. 이미지 경로는 배포 환경 기준으로 다시 확인해야 합니다.
마지막으로 태그와 요약 박스까지 포함되어 있는지 확인하면 티스토리 글 형식도 일정하게 유지됩니다.
Bootstrap 예제가 작동하지 않을 때 콘솔에 나오는 오류는 대부분 세 종류입니다. 파일을 못 불러온 오류, jQuery 객체에 메서드가 없다는 오류, 선택자가 빈 결과를 반환하는 오류입니다.
파일 로드 오류는 경로 문제이고, 메서드 오류는 스크립트 순서나 Bootstrap 버전 문제이며, 빈 선택자 문제는 id와 class 이름 불일치인 경우가 많습니다.
오류 메시지를 이 세 분류로 나누면 어느 파일을 고쳐야 하는지 빠르게 판단할 수 있습니다.
원본에는 오래된 브라우저용 접두사, 구형 IE 필터, Bootstrap 3 전용 클래스가 남아 있습니다. 지금 기준으로는 낡았지만 당시 수업 맥락을 보여주는 자료입니다.
그래서 완전히 최신화하기보다 어떤 부분이 버전 의존 코드인지 표시해 두는 편이 복습 자료로 더 유용합니다.
실무 적용 시에는 같은 구조를 유지하되 CDN, 이미지 주소, 접근성 텍스트, 반응형 처리를 현재 환경에 맞게 조정하면 됩니다.
이 글의 코드는 완성된 서비스 코드라기보다 Bootstrap 3 컴포넌트의 연결 방식을 익히는 실습 코드입니다.
따라서 복습할 때는 화면 장식보다 컴포넌트가 어떤 선택자와 어떤 이벤트 이름으로 묶였는지를 먼저 확인합니다.
그 기준만 잡히면 같은 패턴을 모달, 드롭다운, 캐러셀, 쇼핑몰 상품 카드에 반복해서 적용할 수 있습니다.
| 실수 | 증상 | 해결 |
|---|---|---|
| jQuery와 Bootstrap JS 순서를 바꿈 | 플러그인 메서드가 없다는 오류가 납니다. | jquery.min.js 다음 bootstrap.min.js 순서를 지킵니다. |
| data-target과 id가 다름 | 버튼, 메뉴, indicator가 대상을 찾지 못합니다. | href, data-target, id 문자열을 같은 값으로 맞춥니다. |
| 상대 이미지 경로를 그대로 발행함 | 블로그에서 로고나 상품 이미지가 깨집니다. | 업로드된 실제 이미지 주소로 바꾸거나 폴더 구조를 유지합니다. |
| 전역 클래스를 과하게 덮어씀 | 다른 버튼이나 썸네일까지 의도치 않게 바뀝니다. | .product .btn-primary처럼 범위를 좁힙니다. |
| 이벤트 이름을 Bootstrap 버전과 섞음 | Bootstrap 3 코드가 4/5 환경에서 동작하지 않을 수 있습니다. | 사용 중인 Bootstrap 버전의 이벤트 이름과 의존성을 확인합니다. |
| 항목 | 확인 내용 | 이유 |
|---|---|---|
| 로드 순서 | jQuery 다음 Bootstrap JS | Bootstrap 3 플러그인 의존성 |
| 연결 값 | id, href, data-target 일치 | 컴포넌트 대상 지정 |
| 반응형 | 모바일 메뉴와 상품 카드 확인 | 작은 화면 겹침 방지 |
| 리소스 | CSS, JS, 이미지 경로 확인 | 발행 후 깨짐 방지 |
1. Bootstrap 3 예제는 HTML 속성과 jQuery 메서드가 함께 맞아야 완성됩니다.
2. 쇼핑몰 샘플은 그리드, 네비게이션, 캐러셀, hover CSS가 분리되어 보여도 하나의 레이아웃으로 연결됩니다.
3. 최신 Bootstrap으로 옮길 때는 glyphicon, affix, jQuery 플러그인 방식의 변경 여부를 먼저 확인해야 합니다.
'php' 카테고리의 다른 글
| 부트스트랩 Affix 초기화 · 팝오버 이벤트 · 캐러셀 응용 완전 정리 (0) | 2026.07.19 |
|---|---|
| 부트스트랩 쇼핑몰 고급 기법 · 툴팁 이벤트 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 캐러셀 캡션 · 모달 메서드 · 팝오버 메서드 완전 정리 (0) | 2026.07.18 |
댓글