왕진 블로그
부트스트랩 쇼핑몰 고급 기법 · 툴팁 이벤트 완전 정리
5단 그리드, hover zoom, fade carousel, footer 메뉴, tooltip 이벤트를 쇼핑몰 레이아웃 기준으로 정리합니다.
이 문서는 원본 Markdown 예제의 의도와 코드를 기준으로 Bootstrap 3 수업 내용을 다시 정리한 HTML입니다.
컴포넌트 이름만 외우지 않고, HTML 구조와 data 속성, jQuery 초기화 코드, CSS 커스텀 영역이 어떻게 연결되는지 중심으로 봅니다.
show.bs.tooltip과 hidden.bs.tooltip처럼 툴팁 상태 변화를 감지하는 이벤트입니다.
Bootstrap 3 기본 12단 그리드에 없는 5단 컬럼을 직접 만든 커스텀 패턴입니다.
상품 이미지 위에 확대 아이콘을 겹쳐 보여주는 hover UI입니다.
마우스 오버 시 이미지를 흐리게 하고 다른 요소를 드러내는 CSS 효과입니다.
슬라이드 이동 대신 페이드 전환처럼 보이도록 만드는 캐러셀 변형입니다.
그라디언트와 border로 메뉴 탭 배경을 꾸미는 커스텀 네비게이션 클래스입니다.
display: table-cell로 세로 가운데 정렬을 흉내 내는 오래된 레이아웃 기법입니다.
하단 사이트맵 영역을 어두운 배경과 다단 메뉴로 구성하는 footer 클래스입니다.
아래 코드는 이 폴더에서 반복해서 등장하는 Bootstrap 3 초기화와 이벤트 처리 흐름을 요약한 예시입니다.
109번은 단순 상품 카드에서 더 나아가 쇼핑몰 화면을 풍부하게 만드는 CSS 기법을 다룹니다. 5단 컬럼, hover zoom, fade carousel, footer, tooltip 이벤트가 핵심입니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
tooltip은 사용자가 요소에 마우스를 올렸을 때 보조 설명을 보여줍니다. 이벤트를 연결하면 툴팁이 열린 순간이나 닫힌 순간에 안내 문구, 통계, 상태 표시를 바꿀 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
Bootstrap 3의 기본 그리드는 12칸이라 5등분이 자연스럽지 않습니다. 원본은 .five-cols .col-md-1의 width를 20%로 덮어써 5개 메뉴를 균등 배치합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
nav-back은 흰색에서 회색으로 이어지는 그라디언트와 좌우 border를 이용해 탭처럼 보이는 메뉴를 만듭니다. active 상태는 파란 그라디언트로 강조합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
상품 카드 안에 .zoom 링크를 절대 배치하고 기본 opacity를 0으로 둡니다. thumbnail:hover에서 opacity를 1로 바꾸면 이미지 위에 확대 아이콘이 나타납니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
thumbnail:hover img에 opacity를 낮추면 확대 아이콘이 더 잘 보입니다. IE 구형 필터까지 포함되어 있어 오래된 브라우저 대응 방식을 함께 볼 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
원본은 일반 슬라이드 캐러셀을 페이드처럼 보이게 바꾸는 CSS를 포함합니다. 전환 효과는 보기 좋지만 item의 active 처리와 transition 충돌을 확인해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
max-width:768px에서 검색 폼과 캐러셀 컨트롤을 숨깁니다. 작은 화면에서는 기능을 줄여도 핵심 탐색과 상품 확인이 가능해야 합니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
footback은 어두운 배경 위에 여러 링크 묶음을 배치합니다. 5단 컬럼과 함께 쓰이면 회사소개, 고객지원, 제품군 같은 하단 메뉴를 균등하게 보여줄 수 있습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
zoom.png, comlogo.png, 상품 이미지, Font Awesome CSS가 모두 화면 완성도에 직접 영향을 줍니다. 경로가 틀리면 레이아웃은 남아도 핵심 시각 요소가 빠집니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
hover마다 큰 이미지를 움직이거나 opacity를 바꾸면 저사양 기기에서 버벅일 수 있습니다. 필요한 요소에만 transition을 적용하고 이미지 크기를 미리 줄이는 편이 좋습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 id, data-target, href, 이벤트 이름이 어긋나면 화면은 보여도 동작은 멈출 수 있습니다.
109번은 Bootstrap 컴포넌트보다 커스텀 CSS 비중이 큽니다. 그래서 클래스 범위, hover 대상, media query 조건을 명확히 읽어야 유지보수가 쉽습니다.
원본 예제를 수정할 때는 클래스 이름보다 연결 관계를 먼저 확인해야 합니다. 같은 컴포넌트라도 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 |
|---|---|
| 부트스트랩 Affix 초기화 · 팝오버 이벤트 · 캐러셀 응용 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 이벤트핸들링 · 드롭다운메서드 · 쇼핑몰샘플 완전 정리 (0) | 2026.07.19 |
| 부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 탭 이벤트 · collapse메서드 · 툴팁메서드 · 영수증 폼 완전 정리 (0) | 2026.07.18 |
댓글