부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리

 

 

BOOTSTRAP 3 LESSON

부트스트랩 alert메서드 · 캐러셀메서드 · 쇼핑몰 레이아웃 완전 정리

alert 닫기 메서드, 캐러셀 제어 메서드, iMac 쇼핑몰 샘플 레이아웃을 한 번에 정리합니다.

이 문서는 107번 폴더의 4개 Markdown 예제를 합쳐 정리한 HTML입니다. 예제들이 모두 Bootstrap 3 기반이라 하나의 흐름으로 읽는 편이 자연스럽습니다.

alert는 플러그인 메서드 호출 방식, carousel은 id와 data 속성 연결 방식, shopping-sample은 그리드와 thumbnail 반복 구조가 핵심입니다.

핵심 용어

alert('close')

Bootstrap alert 플러그인에서 경고 박스를 스크립트로 닫는 메서드입니다.

data-dismiss

닫기 버튼을 클릭했을 때 연결된 alert를 자동으로 제거하게 하는 속성입니다.

carousel('cycle')

캐러셀이 자동 순환을 다시 시작하도록 지시하는 메서드입니다.

carousel('pause')

자동 슬라이드 전환을 일시 정지하는 메서드입니다.

carousel('prev')

현재 슬라이드의 이전 항목으로 이동시키는 메서드입니다.

carousel(index)

0부터 시작하는 번호로 원하는 슬라이드에 직접 이동합니다.

glyphicon

Bootstrap 3에서 제공하던 아이콘 글꼴이며 캐러셀 화살표에 자주 사용했습니다.

thumbnail

이미지, 제목, 설명, 버튼을 묶어 상품 카드처럼 보이게 하는 Bootstrap 3 컴포넌트입니다.

01예제 4개의 공통 흐름

107번 폴더는 Bootstrap 3 수업 후반부 예제로, alert 메서드, 캐러셀 아이콘, 캐러셀 제어 메서드, 쇼핑몰 상품 레이아웃을 한 번에 다룹니다.

각 파일의 주제는 다르지만 공통점은 Bootstrap이 미리 제공하는 컴포넌트를 HTML 속성과 jQuery 메서드로 제어한다는 점입니다.

따라서 단순히 코드를 외우기보다 선택자, id 연결, 스크립트 로드 순서, 리소스 경로가 어떻게 맞물리는지 확인하는 것이 중요합니다.

02alert 메서드 예제의 구조

alert-method 예제는 두 개의 알림 박스를 만들고, 닫기 링크를 클릭하면 해당 alert가 사라지는 흐름을 보여줍니다.

Bootstrap 3의 alert는 기본 마크업만으로도 스타일이 적용되지만, 닫기 기능은 data-dismiss 또는 플러그인 메서드와 연결되어야 합니다.

원본에는 성공 메시지와 경고 메시지가 모두 같은 id를 사용하고 있어 수업용으로는 선택자 문제를 설명하기 좋은 예제입니다.

<div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>성공!</strong> 작업이 완료되었습니다. </div> <div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>주의!</strong> 다시 확인하세요. </div>

03id 중복이 왜 문제인지

HTML의 id는 문서 안에서 고유해야 합니다. 같은 id가 두 번 나오면 CSS, JavaScript, 접근성 도구가 어느 요소를 대표값으로 볼지 명확하지 않습니다.

$('#myAlert')처럼 id 선택자를 쓰면 보통 첫 번째 요소를 기준으로 동작하기 때문에 두 번째 alert는 의도와 다르게 남아 있을 수 있습니다.

alert가 여러 개라면 id 대신 class를 공통으로 주고, 클릭된 버튼에서 가장 가까운 .alert를 찾아 닫는 방식이 더 안전합니다.

$(".close").click(function () { $(this).closest(".alert").alert("close"); });

04data-dismiss와 alert('close')의 차이

data-dismiss="alert"는 마크업만으로 닫기 동작을 선언하는 방식입니다. 별도 클릭 핸들러를 작성하지 않아도 Bootstrap이 처리합니다.

반면 alert('close')는 JavaScript에서 명령형으로 닫는 방식입니다. 조건 검사, 확인 대화상자, 로그 기록 같은 추가 로직이 있을 때 유용합니다.

둘을 동시에 쓰는 것이 항상 틀린 것은 아니지만, 수업 초반에는 한 방식씩 분리해서 동작 원리를 확인하는 편이 오류를 줄입니다.

05원본 클릭 스크립트 읽기

원본 스크립트는 문서 준비 후 .close 요소에 click 이벤트를 붙이고, #myAlert에 close 메서드를 호출합니다.

문법 자체는 Bootstrap 3 방식에 맞지만, 선택자가 고정 id라서 여러 alert를 대상으로 할 때 확장성이 떨어집니다.

이 예제에서 배울 핵심은 Bootstrap 컴포넌트가 일반 jQuery 객체처럼 선택된 뒤 플러그인 메서드를 호출할 수 있다는 점입니다.

$(function () { $(".close").click(function () { $("#myAlert").alert("close"); }); });

06캐러셀 glyphicon 예제

carousel-glyphicon 예제는 Bootstrap 3 기본 캐러셀에 좌우 이동 버튼을 붙이고, 버튼 안쪽에 glyphicon 아이콘을 넣는 구조입니다.

glyphicon-chevron-left와 glyphicon-chevron-right는 각각 왼쪽, 오른쪽 화살표 모양을 제공합니다.

이 아이콘은 Bootstrap 3에 포함된 방식이라 Bootstrap 4 이후 코드로 옮길 때는 Font Awesome, SVG, Bootstrap Icons 등으로 대체해야 합니다.

<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>

07캐러셀 기본 연결 규칙

캐러셀은 id를 중심으로 여러 조각이 연결됩니다. 전체 캐러셀의 id, 컨트롤 링크의 href, indicator의 data-target이 같은 값을 바라봐야 합니다.

하나라도 다른 id를 가리키면 버튼 일부만 작동하거나 indicator 클릭이 무시되는 문제가 생깁니다.

원본 carousel-method 예제에는 data-target이 #carousel-example-generic이고 실제 캐러셀은 #myCarousel인 부분이 있어 점검 포인트가 됩니다.

구분	핵심	확인할 점
캐러셀 루트	id="myCarousel"	컴포넌트의 기준 이름
좌우 컨트롤	href="#myCarousel"	어느 캐러셀을 움직일지 지정
indicator	data-target="#myCarousel"	아래 점 버튼의 대상 지정

08carousel('cycle')과 자동 재생

carousel('cycle')은 자동 순환을 다시 시작합니다. 사용자가 pause를 누른 뒤 다시 움직이게 만들 때 사용합니다.

자동 재생은 data-ride="carousel" 속성으로 시작할 수도 있고, JavaScript에서 명시적으로 호출할 수도 있습니다.

학습 단계에서는 버튼을 하나씩 눌러 보며 메서드가 실제 화면 상태를 어떻게 바꾸는지 확인하는 것이 좋습니다.

$(".start-slide").click(function () { $("#myCarousel").carousel("cycle"); });

09carousel('pause')와 정지 버튼

carousel('pause')는 자동 전환을 멈춥니다. 상품 소개나 포트폴리오처럼 사용자가 내용을 읽어야 하는 화면에서 필요합니다.

정지 상태에서도 prev, next, 번호 이동 메서드는 별도로 동작할 수 있습니다.

사용자 조작 버튼을 제공한다면 start와 pause를 짝으로 두어 현재 동작을 예측 가능하게 만드는 것이 좋습니다.

$(".pause-slide").click(function () { $("#myCarousel").carousel("pause"); });

10prev, next 메서드

carousel('prev')와 carousel('next')는 현재 위치를 기준으로 앞뒤 슬라이드로 이동합니다.

좌우 컨트롤의 data-slide="prev" 또는 data-slide="next"와 같은 효과를 스크립트 버튼으로 만든다고 보면 됩니다.

버튼형 UI를 따로 배치하고 싶거나, 키보드 단축키와 연결하고 싶을 때 JavaScript 메서드 방식이 유용합니다.

$(".prev-slide").click(function () { $("#myCarousel").carousel("prev"); }); $(".next-slide").click(function () { $("#myCarousel").carousel("next"); });

11번호로 직접 이동하기

carousel(0), carousel(1), carousel(2)는 각각 첫 번째, 두 번째, 세 번째 슬라이드로 이동합니다.

이 번호는 화면에 보이는 1번이 아니라 배열처럼 0부터 시작한다는 점을 기억해야 합니다.

원본의 .slide-one, .slide-two, .slide-three 버튼은 이 규칙을 확인하기 좋은 작은 실습입니다.

$(".slide-one").click(function () { $("#myCarousel").carousel(0); }); $(".slide-two").click(function () { $("#myCarousel").carousel(1); }); $(".slide-three").click(function () { $("#myCarousel").carousel(2); });

12쇼핑몰 샘플의 큰 구조

shopping-sample 예제는 Bootstrap의 container, row, col-sm-4, thumbnail을 이용해 iMac 상품 목록을 만드는 코드입니다.

상단에는 상품 선택 제목과 SNS 공유 링크가 있고, 본문에는 3열 상품 카드가 반복됩니다.

실무형 페이지라기보다는 Bootstrap 그리드와 컴포넌트를 조합해 쇼핑몰 레이아웃을 빠르게 구성하는 연습에 가깝습니다.

<div class="container"> <header class="prodcthead">...</header> <div class="row product"> <div class="col-sm-4"> <div class="thumbnail">...</div> </div> </div> </div>

 

반응형

 

13헤더와 SNS 영역

header.prodcthead는 제목과 공유 링크를 한 줄에 배치합니다. 제목은 inline으로, SNS 영역은 pull-right로 오른쪽에 보냅니다.

Bootstrap 3의 pull-right는 float 기반 유틸리티입니다. 최신 레이아웃에서는 flex나 text-end 계열로 바꾸는 경우가 많습니다.

facebook, twitter 클래스는 배경 이미지로 아이콘을 넣습니다. 이때 이미지 파일은 ./imgs 폴더에 있어야 합니다.

<header class="prodcthead"> <h1>iMac 선택하기</h1> <div class="sns pull-right"> <ul> <li><a href="#" class="facebook">공유하기</a></li> <li><a href="#" class="twitter">트윗하기</a></li> </ul> </div> </header>

143열 상품 그리드

col-sm-4는 sm 이상 화면에서 12칸 중 4칸을 차지하므로 한 줄에 3개가 배치됩니다.

모바일처럼 sm보다 좁은 화면에서는 기본적으로 한 줄에 하나씩 쌓입니다. 별도 col-xs-*를 주지 않아도 세로 배치가 됩니다.

상품 수가 3개를 넘어가면 같은 row 안에 계속 col-sm-4를 반복하거나, 일정 개수마다 row를 나눠 정렬을 관리합니다.

15thumbnail 상품 카드

thumbnail은 Bootstrap 3에서 이미지와 caption을 묶어 카드처럼 보이게 하는 컴포넌트입니다.

원본 CSS는 .product .thumbnail { border: none; }으로 기본 테두리를 제거해 상품 이미지가 더 깔끔하게 보이도록 했습니다.

상품명 h2, 제품 사양 h3, 설명 목록, 가격, 선택 버튼이 반복되는 구조라 템플릿화하기 좋은 패턴입니다.

<div class="thumbnail"> <h2 class="prohead">21.5형 iMac</h2> <img src="./imgs/imac215.png" alt="21.5형 iMac"> <div class="caption"> <h3>21.5형: 1.4GHz</h3> <ul>...</ul> <p><a href="#" class="btn btn-primary">Select</a></p> </div> </div>

16가격과 배송 표시

price, ship, freeship 클래스는 Bootstrap 기본 클래스가 아니라 이 예제에서 직접 만든 보조 클래스입니다.

ship은 display:block으로 줄을 바꾸고, freeship은 빨간색으로 무료 배송을 강조합니다.

가격 정보는 사용자가 빠르게 스캔해야 하므로 굵기와 크기를 명확히 주되, 너무 많은 색을 동시에 쓰지 않는 것이 좋습니다.

17버튼 그라디언트 CSS

원본은 .btn-primary에 여러 브라우저 접두사 그라디언트를 길게 작성합니다. 오래된 브라우저 호환을 의식한 코드입니다.

현재 기준에서는 표준 linear-gradient만으로 충분한 경우가 많지만, 수업 코드에서는 접두사와 필터가 왜 길어지는지 읽어보는 의미가 있습니다.

다만 .btn-primary 전체를 덮어쓰면 다른 primary 버튼까지 바뀌므로 쇼핑몰 영역에만 적용하려면 선택자 범위를 좁힙니다.

.product .btn-primary { padding: 7px 28px; background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); }

18리소스 경로 점검

예제는 ./css/bootstrap.min.css, ./js/bootstrap.min.js, ./imgs/imac215.png처럼 상대 경로를 사용합니다.

상대 경로는 현재 HTML 파일이 놓인 위치 기준으로 계산됩니다. 폴더를 옮기면 CSS, JS, 이미지가 한꺼번에 깨질 수 있습니다.

블로그나 티스토리에 올릴 때는 로컬 파일 경로를 그대로 쓸 수 없으므로 업로드된 첨부 주소나 CDN 주소로 바꿔야 합니다.

구분	핵심	확인할 점
CSS	./css/bootstrap.min.css	HTML 옆 css 폴더 필요
JS	./js/bootstrap.min.js	jQuery 다음에 로드
이미지	./imgs/imac27.png	상품 이미지 폴더 필요

19Bootstrap 3 기준으로 읽기

이 폴더의 예제는 Bootstrap 3 문법입니다. glyphicon, thumbnail, pull-right, jQuery 플러그인 메서드가 모두 Bootstrap 3 흐름입니다.

Bootstrap 4와 5에서는 일부 클래스와 JavaScript 사용 방식이 달라졌으므로 그대로 붙여 넣으면 동작하지 않을 수 있습니다.

학습 목적이라면 먼저 원본을 Bootstrap 3 환경에서 정상 동작시킨 뒤, 최신 버전으로 옮길 때 변경점을 따로 정리하는 편이 좋습니다.

20디버깅 순서

화면이 안 나오면 먼저 CSS가 로드되었는지 확인합니다. 스타일이 전혀 없으면 Bootstrap CSS 경로가 틀렸을 가능성이 큽니다.

버튼이나 슬라이드가 안 움직이면 콘솔 오류와 스크립트 로드 순서를 확인합니다. jQuery가 없거나 Bootstrap JS가 누락되면 메서드 호출이 실패합니다.

일부 버튼만 안 되면 id, href, data-target, 선택자 문자열이 같은 대상을 가리키는지 비교하면 대부분 원인을 찾을 수 있습니다.

21접근성과 대체 텍스트

캐러셀 컨트롤에는 화면낭독기용 텍스트를 함께 두는 것이 좋습니다. 아이콘만 있으면 의미가 전달되지 않을 수 있습니다.

상품 이미지는 alt="..." 대신 실제 상품명을 넣어야 합니다. 이미지가 안 보이는 상황에서도 어떤 상품인지 알 수 있어야 합니다.

alert는 중요한 상태 메시지이므로 role="alert"를 붙이면 보조 기술이 변화를 더 잘 인식할 수 있습니다.

22정리

107번 폴더의 핵심은 Bootstrap 컴포넌트가 HTML 구조, data 속성, jQuery 메서드, 리소스 경로의 조합으로 동작한다는 점입니다.

alert는 닫기 방식과 선택자 범위, carousel은 id 연결과 메서드 이름, 쇼핑몰 샘플은 그리드와 상품 카드 반복 구조를 중심으로 보면 됩니다.

원본 코드의 작은 실수까지 같이 확인하면 단순 복사보다 실제 디버깅에 도움이 되는 예제로 활용할 수 있습니다.

23자주 하는 실수

실수	문제	해결
alert 박스 두 개에 같은 id를 사용함	id는 문서 안에서 하나만 써야 하므로 #myAlert가 첫 번째 요소만 가리키거나 예측하기 어려운 동작을 만듭니다.	공통 class로 선택하거나 id를 각각 다르게 둡니다.
indicator의 data-target과 carousel id가 다름	버튼은 #carousel-example-generic을 찾지만 실제 캐러셀 id가 #myCarousel이면 인디케이터가 작동하지 않습니다.	data-target, href, 스크립트 선택자를 모두 같은 id로 맞춥니다.
jQuery보다 Bootstrap JS를 먼저 불러옴	Bootstrap 3 플러그인은 jQuery 위에서 동작하므로 로드 순서가 틀리면 메서드가 undefined가 됩니다.	jquery.min.js 다음 bootstrap.min.js 순서를 지킵니다.
이미지 경로를 HTML 위치와 다르게 계산함	./imgs/imac215.png 같은 상대 경로는 HTML 파일이 있는 위치 기준입니다.	배포 위치에서 imgs 폴더가 같은 단계에 있는지 확인합니다.
btn-primary를 전역으로 덮어씀	쇼핑몰 버튼만 바꾸려 했는데 사이트 전체의 primary 버튼 디자인이 같이 바뀔 수 있습니다.	.product .btn-primary처럼 범위를 좁힙니다.

24최종 체크리스트

구분	핵심	확인할 점
alert	닫기 버튼과 메서드	id 중복 없이 선택자가 정확한지 확인
carousel	컨트롤과 indicator	href, data-target, JavaScript 선택자가 같은 id인지 확인
shopping	그리드와 상품 카드	이미지 경로, col-sm-4 반복, 버튼 스타일 범위 확인
배포	로컬 상대 경로	블로그 업로드 후 CSS, JS, 이미지 주소를 다시 확인

25요약

1. alert 예제는 data-dismiss와 alert('close')의 역할을 구분해서 보면 이해가 쉽습니다.

2. 캐러셀은 id 연결이 전부입니다. 루트 id, 컨트롤 href, indicator data-target을 같은 값으로 맞춥니다.

3. 쇼핑몰 예제는 container, row, col-sm-4, thumbnail을 조합해 상품 카드 목록을 만드는 구조입니다.

Bootstrap alert carousel glyphicon shopping thumbnail jQuery Bootstrap3 iMac 티스토리