본문으로 건너뛰기
실습하기

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!