왕진 블로그
부트스트랩 Affix 초기화 · 팝오버 이벤트 · 캐러셀 응용 완전 정리
Affix 플러그인 초기화, Popover 이벤트, tab/fade 응용 캐러셀을 Bootstrap 3 기준으로 정리합니다.
이 문서는 원본 Markdown 예제의 의도와 코드를 기준으로 Bootstrap 3 수업 내용을 다시 정리한 HTML입니다.
컴포넌트 이름만 외우지 않고, HTML 구조와 data 속성, jQuery 초기화 코드, CSS 커스텀 영역이 어떻게 연결되는지 중심으로 봅니다.
스크롤 위치에 따라 요소를 고정 상태로 바꾸는 Bootstrap 3 플러그인입니다.
Affix가 언제 고정되고 언제 풀릴지 결정하는 위아래 기준값입니다.
스크롤 위치에 맞춰 현재 섹션 메뉴를 active로 표시하는 기능입니다.
제목과 본문을 가진 작은 설명 박스를 요소 주변에 띄우는 컴포넌트입니다.
팝오버가 화면에 완전히 표시된 뒤 발생하는 이벤트입니다.
탭 메뉴를 세로 목록처럼 쌓아 보여주는 Bootstrap 3 클래스입니다.
탭 또는 캐러셀 전환에 슬라이드·페이드 느낌을 더한 응용 패턴입니다.
body나 컨테이너가 scrollspy 같은 Bootstrap 동작을 선언적으로 쓰게 하는 속성입니다.
아래 코드는 이 폴더에서 반복해서 등장하는 Bootstrap 3 초기화와 이벤트 처리 흐름을 요약한 예시입니다.
110번은 스크롤 위치를 따라다니는 메뉴, 팝오버 이벤트, 탭과 캐러셀 전환 효과를 다룹니다. 모두 Bootstrap 3 플러그인을 jQuery로 초기화하거나 이벤트로 감지하는 방식입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Affix 예제는 왼쪽 nav-tabs가 스크롤 중에도 화면에 고정되도록 만듭니다. ul.nav-tabs.affix에 top 값을 주어 고정되었을 때의 위치를 조정합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
offset.top은 어느 정도 스크롤한 뒤 affix 상태로 바꿀지 정합니다. bottom은 footer에 닿기 전에 고정을 풀어 하단 콘텐츠를 덮지 않게 할 때 씁니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
body의 data-spy='scroll'과 data-target='#myScrollspy'는 현재 스크롤 위치에 맞는 메뉴를 active로 표시합니다. 섹션 id와 링크 href가 일치해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
popover는 tooltip보다 정보량이 많습니다. shown.bs.popover와 hidden.bs.popover 이벤트를 사용하면 열림 상태에 따라 버튼 문구나 설명을 바꿀 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Bootstrap 3 팝오버는 기본적으로 직접 초기화해야 합니다. $('[data-toggle="popover"]').popover()를 호출하지 않으면 마크업 속성만으로는 동작하지 않을 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
tabslide-fade 예제는 탭 또는 캐러셀 전환에 시각 효과를 더하는 응용입니다. active 클래스와 fade 클래스의 적용 순서가 화면 전환 품질을 좌우합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Affix 메뉴는 고정 상태가 되면 원래 레이아웃 흐름과 다르게 보일 수 있습니다. 원본처럼 width를 지정하거나 부모 그리드 폭에 맞춰야 흔들림이 적습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Affix와 ScrollSpy는 본문이 충분히 길어야 제대로 확인됩니다. 예제에 긴 Lorem ipsum이 많은 이유는 스크롤 위치 변화를 테스트하기 위해서입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Affix는 Bootstrap 4에서 제거된 플러그인입니다. 최신 구현에서는 position: sticky나 IntersectionObserver로 대체하는 경우가 많습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
메뉴가 고정되지 않으면 bootstrap.min.js 로드, affix 초기화 코드, offset 값, CSS top 값을 순서대로 확인합니다. active가 바뀌지 않으면 section id와 href 연결을 봅니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
110번은 스크롤 기반 UI를 다루므로 단순 클릭 컴포넌트보다 위치 계산이 중요합니다. offset, footer 높이, 메뉴 폭을 함께 확인해야 안정적으로 동작합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 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' 카테고리의 다른 글
| 부트스트랩 드롭다운 패턴 · 스크롤스파이 이벤트 · CSS animation 완전 정리 (0) | 2026.07.19 |
|---|---|
| 부트스트랩 쇼핑몰 고급 기법 · 툴팁 이벤트 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 이벤트핸들링 · 드롭다운메서드 · 쇼핑몰샘플 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리 (0) | 2026.07.18 |
댓글