<div id="hz" class="carousel slide" data-bs-ride="carousel">
<!-- 현재 위치 표시기 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#hz" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#hz" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#hz" data-bs-slide-to="2"></button>
</div>
<!-- 캐러셀(=슬라이드쇼) -->
<div class="carousel-inner">
<div class="carousel-itemactive">
<img src="HTML.jpg" alt="HTML" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>HTML</h3>
<p>뼈대</p>
</div>
</div>
<div class="carousel-item">
<img src="CSS.jpg" alt="CSS" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>CSS</h3>
<p>디자인</p>
</div>
</div>
<div class="carousel-item">
<img src="JavaScript.jpg" alt="JavaScript" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>JavaScript</h3>
<p>기능/동작</p>
</div>
</div>
</div>
<!-- 왼쪽/오른쪽 이동 버튼 -->
<button class="carousel-control-prev" type="button" data-bs-target="#hz" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#hz" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
PS. 각 클래스 의미
.active
현재 선택된 아이템
.carousel
캐러셀 생성
.carousel-caption
각 아이템 설명/자막 추가. (※ .carousel-item 클래스 안에 추가.)
.carousel-indicators
캐러셀 현재 위치 표시기
.carousel-inner
슬라이드를 캐러셀에 추가.
.carousel-item
각 슬라이드의 아이템(= 슬라이드 되는 각각의 항목) 지정.
.carousel-control-prev
슬라이드 왼쪽(이전) 버튼 추가.
.carousel-control-next
슬라이드에 오른쪽(다음) 버튼 추가.
.carousel-control-prev-icon
.carousel-control-prev와 함께 사용해 "이전" 버튼 생성.
.carousel-control-next-icon
.carousel-control-next와 함께 사용해 "다음" 버튼 생성
.slide
슬라이드 할 때, CSS transition/animation 효과 추가.
※ 효과 원치 않으면 삭제 가능.
