캐러셀 구조 만들기 1
캐러셀을 만들려면 HTML, CSS, JavaScript 모두를 활용해야 합니다.
-
먼저 HTML로 캐러셀의 구조를 만들어야 합니다. 이 구조는 슬라이드를 담을 컨테이너, 각 슬라이드의 내용을 담을 아이템 등으로 구성될 수 있습니다.
-
다음으로 CSS를 사용하여 캐러셀의 스타일링을 적용할 수 있습니다. 슬라이드의 크기, 배경색, 텍스트 스타일 등을 설정하거나 이전/다음 버튼, 인디케이터 등의 요소를 디자인할 수 있습니다.
-
마지막으로 JavaScript를 활용하여 캐러셀의 동작을 제어할 수 있습니다. 슬라이드를 자동으로 전환하는 기능이나 이전/다음 버튼 클릭 시 슬라이드를 이동시키는 기능, 인디케이터를 클릭하여 특정 슬라이드로 이동하는 기능 등을 구현할 수 있습니다.
캐러셀에 대한 기본적인 개념을 살펴봤으니, 이제 예시 코드를 통해 실제로 캐러셀을 만들어보는 것도 좋습니다. 코드를 통해 실제 동작하는 캐러셀을 만들어보면서 더욱 자세히 이해할 수 있을 것입니다.
예시 코드
<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>
태그를 사용했습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!