왕진 블로그
부트스트랩 드롭다운 패턴 · 스크롤스파이 이벤트 · CSS animation 완전 정리
드롭다운 메뉴 패턴, ScrollSpy 이벤트, 상품 hover animation을 Bootstrap 쇼핑몰 샘플 기준으로 정리합니다.
이 문서는 원본 Markdown 예제의 의도와 코드를 기준으로 Bootstrap 3 수업 내용을 다시 정리한 HTML입니다.
컴포넌트 이름만 외우지 않고, HTML 구조와 data 속성, jQuery 초기화 코드, CSS 커스텀 영역이 어떻게 연결되는지 중심으로 봅니다.
Bootstrap 드롭다운에서 펼쳐지는 메뉴 목록을 감싸는 클래스입니다.
클릭하면 dropdown-menu를 열고 닫는 트리거 요소입니다.
스크롤 위치에 따라 활성 메뉴가 바뀔 때 감지할 수 있는 이벤트 흐름입니다.
ScrollSpy가 새 항목을 active로 만들 때 발생하는 Bootstrap 이벤트입니다.
CSS animation의 시작과 끝 상태를 정의하는 규칙입니다.
지정한 keyframes를 요소에 적용해 시간에 따른 움직임을 만듭니다.
모바일에서 접히고 펼쳐지는 Bootstrap 네비게이션 영역입니다.
상품 카드 hover 상태에서 이미지 이동이나 테두리 변화를 적용하는 선택자입니다.
아래 코드는 이 폴더에서 반복해서 등장하는 Bootstrap 3 초기화와 이벤트 처리 흐름을 요약한 예시입니다.
111번은 Bootstrap 3의 드롭다운 메뉴, ScrollSpy 이벤트, CSS animation을 쇼핑몰 샘플에 연결합니다. 메뉴 동작과 스크롤 반응, 상품 카드 hover 효과를 함께 보는 폴더입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
dropdown 예제는 .dropdown, .dropdown-toggle, .dropdown-menu 세 조각으로 구성됩니다. 트리거에는 data-toggle='dropdown'을 붙이고 메뉴는 ul.dropdown-menu로 둡니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
메뉴 안에 다시 하위 메뉴를 넣는 패턴은 Bootstrap 3 기본 기능만으로는 제한이 있습니다. CSS와 추가 스크립트가 필요할 수 있어 구조를 단순하게 유지하는 것이 좋습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
ScrollSpy는 현재 보고 있는 섹션에 맞춰 메뉴 active 상태를 바꿉니다. activate.bs.scrollspy 이벤트를 이용하면 활성 항목이 바뀌는 순간을 감지할 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
data-target은 active를 적용할 메뉴 컨테이너를 가리키고, 각 링크 href는 섹션 id를 가리킵니다. 둘 중 하나라도 틀리면 active 표시가 어긋납니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
sec-ani 샘플은 thumbnail:hover img에 movetop 애니메이션을 적용합니다. 이미지가 위로 살짝 이동해 상품 카드가 반응하는 느낌을 줍니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
movetop은 margin-top 0에서 -4px로 이동하는 단순한 애니메이션입니다. 작은 움직임이라도 hover 피드백으로는 충분히 효과적입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
원본은 @-webkit-keyframes와 표준 @keyframes를 함께 씁니다. 오래된 WebKit 브라우저를 고려한 코드이며, 최신 브라우저만 대상으로 하면 표준 규칙 중심으로 줄일 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
상단 메뉴는 navbar-fixed-top, navbar-collapse, nav-top, nav-main이 함께 쓰입니다. 모바일 토글 버튼의 data-target과 접히는 영역 클래스가 맞아야 메뉴가 열립니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
캐러셀은 큰 홍보 영역을 담당하고, thumbnail animation은 상품 목록의 미세한 반응을 담당합니다. 큰 전환과 작은 피드백을 역할별로 나누면 화면이 과하지 않습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
드롭다운 트리거에는 메뉴임을 알 수 있는 텍스트와 키보드 접근이 필요합니다. animation은 사용자의 주의를 끌지만 너무 빠르거나 반복적이면 읽기를 방해할 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
111번의 핵심은 Bootstrap 동작과 직접 작성한 CSS animation을 충돌 없이 섞는 것입니다. data 속성 연결, active 상태, hover 선택자 범위를 함께 확인해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 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 |
| 부트스트랩 이벤트핸들링 · 드롭다운메서드 · 쇼핑몰샘플 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리 (0) | 2026.07.18 |
댓글