가이드라인

캐러셀 구조 만들기 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>

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말