한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 캐러셀 데모: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 캐러셀의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 여러분이 웹 사이트를 히트하게 만들 수 있는 이 재미있고 상호작용적인 기능을 안내해드리는 것을 기쁜 마음으로 생각합니다!

Bootstrap - Carousel Demo

캐러셀은 무엇인가요?

코드에 들어가기 전에, 기본적인 것부터 시작해보겠습니다. 사진 앨범을 넘기는 것을 상상해보세요. 하지만 페이지를 넘기는 대신, 사진들이 마법처럼 슬라이드로 나타나고 사라집니다. 그게 웹 사이트에서 캐러셀의 역할입니다!

캐러셀, 또는 슬라이드쇼는 이미지나 텍스트와 같은 내용 아이템을 회전하는 방식으로 표시하는 컴포넌트입니다. 웹 페이지에 있는 작은 슬라이드쇼似的입니다. 멋지죠?

캐러셀을 사용하는 이유

캐러셀은 다음과 같은 용도로 훌륭합니다:

  1. 여러 제품이나 기능을 전시하기
  2. 이미지 갤러리를 표시하기
  3. 짧은 공간에 중요 정보를 제시하기

이제 캐러셀의 정의와 용도를 알았으니, 부트스트랩을 사용하여 캐러셀을 만들어보겠습니다!

부트스트랩 캐러셀 설정

먼저, HTML 구조를 설정해야 합니다. 처음에는 좀 복잡해 보일 수 있지만, 단계별로 풀어나가겠습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 멋진 캐러셀</title>
<!-- 부트스트랩 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- 캐러셀 콘텐츠가 여기에 들어갑니다 -->
</div>
</div>

<!-- 부트스트랩 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이렇게 풀어보겠습니다:

  1. 표준 HTML5 문서 구조로 시작합니다.
  2. <head> 부분에 부트스트랩 CSS 파일을 링크하여 부트스트랩의 미리 정의된 스타일에 접근할 수 있게 합니다.
  3. <body> 부분에 캐러셀을 담을 컨테이너 <div>를 생성합니다.
  4. 컨테이너 내부에 "myCarousel" ID를 가진 다른 <div>를 만들어 캐러셀 컴포넌트로 사용합니다.
  5. <body> 하단에 부트스트랩 자바스크립트 파일을 포함하여 캐러셀의 상호작용 기능을 활성화합니다.

캐러셀 콘텐츠 추가

이제 캐러셀에 콘텐츠를 추가해보겠습니다! 이 예제에서는 이미지를 사용하지만, 캐러셀 슬라이드에 거의 모든 것을 넣을 수 있습니다.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- 캐러셀 인디케이터 -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

<!-- 캐러셀 슬라이드 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="슬라이드 1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="슬라이드 2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="슬라이드 3">
</div>
</div>

<!-- 캐러셀 컨트롤 -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">이전</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">다음</span>
</a>
</div>

와우, 많은 코드네! 하지만 걱정 마세요, 작은 조각으로 나누어 설명해드리겠습니다:

캐러셀 인디케이터

<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

이 작은 점들은 캐러셀 하단에 나타나 현재 슬라이드와 사용자가 이동할 수 있는 슬라이드를 보여줍니다. 각 <li>는 하나의 슬라이드를 나타냅니다.

캐러셀 슬라이드

<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="슬라이드 1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="슬라이드 2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="슬라이드 3">
</div>
</div>

이 부분에서 마법이 일어납니다! 각 carousel-item은 캐러셀의 슬라이드입니다. 첫 번째 슬라이드는 active 클래스를 가지므로 최초에 표시됩니다. Lorem Picsum의 플레이스홀더 이미지를 사용하지만, 여러분의 이미지를 사용할 수 있습니다.

캐러셀 컨트롤

<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">이전</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">다음</span>
</a>

이 버튼들은 사용자가 수동으로 슬라이드를 이동할 수 있도록 합니다.

캐러셀 커스터마이징

이제 기본 캐러셀을 설정하고 실행 중이니, 좀 더 재미있게 만들어보겠습니다! 슬라이드에 캡션을 추가하여 더 많은 문맥을 제공할 수 있습니다.

<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="슬라이드 1">
<div class="carousel-caption d-none d-md-block">
<h5>첫 번째 슬라이드 레이블</h5>
<p>첫 번째 슬라이드에 대한 대표적인 플레이스홀더 콘텐츠입니다.</p>
</div>
</div>

각 슬라이드에 이 carousel-caption <div>를 추가하면 슬라이드에 정보 캡션을 표시할 수 있습니다!

캐러셀 옵션

부트스트랩의 캐러셀은 여러 옵션을 제공하여 행동을 커스터마이즈할 수 있습니다. 다음은 일부 일반적인 옵션입니다:

옵션 기본값 설명
interval 5000 자동으로 아이템을 순환하는 시간 간격
keyboard true 캐러셀이 키보드 이벤트에 반응할지 여부
pause 'hover' 마우스가 들어오면 순환을 일시정지하고 마우스가 나가면 다시 시작할지 여부
wrap true 캐러셀이 지속적으로 순환할지 또는 강제 정지할지 여부
touch true 터치屏 기기에서 왼쪽/오른쪽 스와이프 인터랙션을 지원할지 여부

이러한 옵션을 사용하려면 캐러셀 요소에 데이터 속성을 추가할 수 있습니다. 예를 들어:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="false">
<!-- 캐러셀 콘텐츠 -->
</div>

이렇게 하면 캐러셀이 자동으로 3초마다 슬라이드를 전환하고, 마지막 슬라이드에 도달한 후 멈춥니다.

결론

이제 여러분은 여러분의 부트스트랩 캐러셀을 성공적으로 만들었습니다! 기본 구조를 설정하고 콘텐츠를 추가하며 옵션을 커스터마이즈하는 것을 다루었습니다. 연습이 완벽을 만들어주니, 다양한 이미지, 캡션, 옵션을 실험해보지 마세요.

여러분의 신뢰할 수 있는 컴퓨터 선생님이자, 저는 여러분이 캐러셀과 같은 기능을 마스터하는 것이 웹 개발 여정의 시작에 불과하다고 말씀드릴 수 있습니다. 계속 탐구하고, 배우고, 가장 중요한 것은 즐겁게 만들어보세요!

이제 캐러셀로 가득 찬 웹 사이트를 만들어보세요. 누가 알겠는가요? 인터넷의 다음 큰 일이 여러분의 캐러셀을 중심으로 시작할지도 모릅니다! 모두들 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:
부트스트랩 - 슬라이더 데모
다음 튜토리얼:
Bootstrap - 헤더 데모