Bootstrap - 카arusel RTL 데모

개요

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 Bootstrap 카arusel의 세계로 흥미로운 여정을 떠납니다. 특별히 오른쪽에서 왼쪽으로의(RTL) 기능에 중점을 두겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 주제를 단계별로 안내해드리겠습니다. 그러니 신경 쓰지 말고 시작해봅시다!

Bootstrap-Carousel RTL Demo

카arusel이란?

Bootstrap 카arusel에 들어가기 전에 잠시 카arusel이 무엇인지 이해해보겠습니다.

웹 디자인 용어로 카arusel은 슬라이드쇼와 유사한 컴포넌트로, 일반적으로 이미지나 텍스트의 시리즈를 순환합니다. 디지털 사진 앨범처럼 자동으로 페이지를 넘겨가며 하나씩 항목을 보여줍니다. 카arusel은 제한된 공간에서 여러 개의 콘텐츠를 전시할 수 있어 웹 디자인에서 매우 인기가 있습니다.

재미있는 사실: "카arusel"이라는 용어는 어린이 공원에서 볼 수 있는 회전木마 타기와 같은 타기에서 왔습니다. 그 타기가 다른 말이나 마차를 돌려보이는 것처럼, 우리의 웹 카arusel도 다른 콘텐츠를 돌려보여줍니다!

Bootstrap 카arusel 기본

이제 카arusel이 무엇인지 알고 보니, Bootstrap 카arusel에 대해 이야기해보겠습니다. Bootstrap은 반응형, 모바일 우선의 웹사이트를 쉽게 만들 수 있는 강력한 프론트엔드 프레임워크입니다. 우리가 쉽게 사용할 수 있는 미리 만들어진 카arusel 컴포넌트가 포함되어 있습니다.

이하는 Bootstrap 카arusel의 기본 예제입니다:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="First slide">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Second slide">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="Third slide">
</div>
</div>
</div>

이를 구분해보면:

<div>는 carousel slide 클래스와 JavaScript 타겟을 위한 id를 가집니다.
이 안에 또 다른 <div>가 있으며, carousel-inner 클래스를 가집니다. 이는 모든 카arusel 항목을 포함합니다.
각 항목은 carousel-item 클래스를 가진 <div>입니다. 첫 번째 항목에는 active 클래스가 추가되어 첫 번째로 보여집니다.
각 항목 안에는 <img> 태그가 있어 이미지를 표시합니다.

네비게이션 컨트롤 추가

이제 카arusel에 네비게이션 컨트롤을 추가해보겠습니다:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- 카arusel 항목 여기에 -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">이전</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">다음</span>
</button>
</div>

여기서 우리는 "이전"과 "다음" 버튼을 추가했습니다. 이 버튼들은 사용자가 카arusel 항목을 수동으로 탐색할 수 있게 합니다.

Bootstrap 카arusel에서 RTL 지원

이제 정말 흥미로운 부분으로 넘어가겠습니다. RTL, 즉 오른쪽에서 왼쪽으로는 아랍어나 히브리어와 같은 언어에서 중요한 기능입니다. Bootstrap 5는 내장된 RTL 지원을 제공하여, RTL 친화적인 카arusel을 쉽게 만들 수 있습니다.

RTL 지원을 활성화하려면 두 가지 작업을 수행해야 합니다:

<html> 태그의 dir 속성을 "rtl"로 설정합니다.
Bootstrap의 RTL 버전 CSS를 포함합니다.

이하 HTML 구조가 어떻게 보이는지 보겠습니다:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RTL 카arusel 데모</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
</head>
<body>
<!-- 우리의 카arusel 여기에 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

RTL 카arusel 사용자 정의

이제 기본 RTL 설정을 마쳤으니, 카arusel을 약간 사용자 정의해보겠습니다:

<div id="rtlCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#rtlCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#rtlCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#rtlCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>첫 번째 슬라이드에 대한 일부 대표적인 플레이스홀더 콘텐츠.</p>
</div>
</div>
<!-- 더 많은 카arusel 항목을 여기에 추가하세요 -->
</div>
<!-- 네비게이션 컨트롤 여기에 -->
</div>

이 예제에서 우리는 다음을 추가했습니다:

카arusel 인디케이터( κάτω쪽에 있는 작은 점들)
각 슬라이드에 대한 캡션

RTL 레이아웃에서는 모든 것이 반대로 mirroring됩니다. 그래서 "다음" 버튼은 왼쪽에 나타나고, "이전" 버튼은 오른쪽에 나타납니다!

결론

그렇습니다, 여러분! 우리는 완전한 기능을 갖춘, RTL 지원을 한 Bootstrap 카arusel을 만들었습니다. 카arusel의 기본 개념에서 RTL 지원을 구현하는 것까지, 오늘 우리는 많은 내용을 다루었습니다.

기억해 두세요, 실습이 완벽을 만듭니다. 자신만의 카arusel을 만들어보고, 다른 콘텐츠를 실험해보세요. 더 많이 사용자 정의하는 것을 두려워하지 마세요. 누가 알겠는가? 당신이 다음 큰 웹 디자인 트렌드를 만들 수도 있습니다!

행복하게 코딩하세요, 그리고 다음 번까지, 카arusel을 계속 돌리세요!

메서드	설명
`.carousel()`	카arusel을 초기화합니다
`.carousel('cycle')`	왼쪽에서 오른쪽으로 카arusel 항목을 순환시킵니다
`.carousel('pause')`	카arusel 항목 순환을 중지합니다
`.carousel('prev')`	이전 항목으로 이동합니다
`.carousel('next')`	다음 항목으로 이동합니다
`.carousel('dispose')`	컴포넌트의 카arusel을 파괴합니다
`.carousel(number)`	특정 프레임(0 기반, 배열과 유사)으로 카arusel을 이동합니다

이 메서드들은 프로그래밍적으로 카arusel을 제어할 수 있게 해주어, 웹 디자인에 이 강력한 컴포넌트를 어떻게 구현할 수 있는지 더 많은 유연성을 제공합니다.

Credits: Image by storyset

이전 튜토리얼:

Bootstrap-Checkout RTL Demo

다음 튜토리얼:

Bootstrap-Blog RTL 데모