본문으로 건너뛰기

캐러셀 구조 만들기 2

캐러셀 구조 만들기 2

슬라이드

캐러셀 슬라이드 HTML
<div class="slideshow-container">
<div class="my-slides fade">
<img
src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">이미지 설명1</div>
</div>

<div class="my-slides fade">
<img
src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">이미지 설명2</div>
</div>

<div class="my-slides fade">
<img
src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">이미지 설명3</div>
</div>
...
</div>

가장 바깥쪽의 slideshow-container 클래스를 가진 <div> 요소는 캐러셀의 콘텐츠를 담는 "슬라이드"의 컨테이너 역할을 합니다.

이 컨테이너는 이미지설명으로 구성된 슬라이드 3개를 담고 있습니다.

각각의 슬라이드는 my-slides 클래스를 가진 <div>로 감싸져 있습니다. 위의 예시 코드는 세 개의 슬라이드로 구성되어 있지만,

슬라이드 구성 예시
<div class="my-slides fade">슬라이드 내용</div>

위와 같이 슬라이드를 더 추가할 수 있습니다.

각 슬라이드는 HTML <img> 태그를 사용하여 이미지를 표시하고, slide-image 클래스를 적용하여 슬라이드 이미지에 스타일을 적용했습니다. 또한, slide-text 클래스를 가진 <div> 요소를 사용해 이미지에 대한 설명을 추가했습니다.

슬라이드 구성 예시
<div class="my-slides fade">
<img
src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="slide-image"
/>
<div class="slide-text">이미지 설명1</div>
</div>

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!