캐러셀 HTML
예시 코드
지금부터 캐러셀의 구조를 HTML으로 만들어 볼게요.
아래는 캐러셀 전체 HTML 코드이고, 하나씩 나누어 살펴볼게요.
<section id="memory" class="container">
<div class="content-text">
<h2>추억</h2>
<p>제 소중한 추억들이에요</p>
<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>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br />
<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
</section>
코드를 하나씩 살펴볼까요?
컨테이너
<section class="container">
<div class="content-text">...</div>
</section>
캐러셀을 웹페이지의 특정 영역에 배치하기 위한 컨테이너를 만들었어요.
컨테이너는 HTML section 태그를 활용해서, 웹페이지 내 캐러셀의 영역을 지정해요.
이를 위해 <section> 태그로 영역을 감싸고, container class를 이용하여 컨테이너를 식별할 수 있도록 했어요.
컨테이너 내부에는 <div> 태그를 만들고, content-text class를 이용하여 제목과 설명에 대해 스타일을 적용했어요.
제목과 설명
<h2>추억</h2>
<p>제 소중한 추억들이에요</p>
캐러셀에 담기는 콘텐츠를 설명하는 짧은 제목과 설명을 위해
<h2> 태그와 <p> 태그를 사용했습니다.
슬라이드
<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>
이전 / 다음 버튼 만들기
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
캐러셀을 이전 및 다음 슬라이드로 이동시키는 버튼은 HTML <a> 요소로 구성했어요.
prev 클래스를 가진 버튼은 캐러셀을 이전 슬라이드로 이동시키고, next 클래스를 가진 버튼은 캐러셀을 다음 슬라이드로 이동시켜요.
사용자가 버튼을 클릭하면 각 버튼에 할당된 JavaScript 함수가 호출되어요.
예를 들어 prev 클래스를 포함한 버튼을 클릭하면 plusSlides(-1) 함수가 호출되어 캐러셀이 현재 슬라이드에서 이전 슬라이드로 이동해요.
마찬가지로, next 클래스를 포함한 버튼을 클릭하면 plusSlides(1) 함수가 호출되어 현재 슬라이드에서 다음 슬라이드로 이동해요.
인디케이터(Indicator)
<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
인디케이터는 현재 표시되는 슬라이드를 나타내고, 인디케이터를 클릭하면 특정 슬라이드로 이동할 수 있어요.
이번 캐러셀에는 인디케이터로 점(dot)를 사용할게요.
각각의 인디케이터는 <span> 요소로 구성되어 있으며, dot 클래스를 가지고 있어요.
인디케이터를 클릭하면 currentSlide 함수가 호출되어, 특정 슬라이드로 이동해요.
캐러셀 슬라이드 전환하기
지금까지 HTML을 활용해 캐러셀의 레이아웃을 구성했어요.
하지만 앞서 말씀드린 것처럼 HTML만으로는 캐러셀을 이전, 다음 슬라이드로 넘길 수 없어요. 슬라이드를 전환하며 회전하는 캐러셀로 만들기 위해서는 JavaScript를 사용해야 해요.
JavaScript를 활용해 동작을 구현하기 전에, CSS로 캐러셀을 간단하게 꾸며 볼까요?
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!