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

캐러셀 구조 만들기 1

캐러셀을 만들려면 HTML, CSS, JavaScript 모두를 활용해야 합니다.


1. HTML로 캐러셀 구조 만들기​

먼저 HTML로 캐러셀의 구조를 만들어야 합니다.

캐러셀 구조는 슬라이드를 담을 컨테이너, 각 슬라이드의 내용을 담을 아이템 등으로 구성합니다.


2. CSS로 캐러셀 스타일링하기​

다음으로 CSS를 사용하여 캐러셀의 스타일링을 적용할 수 있습니다.

슬라이드의 크기, 배경색, 텍스트 스타일 등을 설정하거나 이전/다음 버튼, 인디케이터 등의 요소를 디자인할 수 있습니다.


3. JavaScript로 캐러셀 동작 제어하기​

마지막으로 JavaScript를 활용하여 캐러셀의 동작을 제어할 수 있습니다.

슬라이드를 자동으로 전환하는 기능이나 이전/다음 버튼 클릭 시 슬라이드를 이동시키는 기능, 인디케이터를 클릭하여 특정 슬라이드로 이동하는 기능 등을 구현할 수 있습니다.


예시 코드​

캐러셀 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)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</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>

컨테이너​

캐러셀 컨테이너 HTML
<section class="container">
    <div class="content-text">...</div>
</section>

캐러셀을 웹페이지의 특정 영역에 배치하기 위한 컨테이너를 만들었습니다.

컨테이너는 HTML section 태그를 활용해서, 웹페이지 내 캐러셀의 영역을 지정합니다.

이를 위해 <section> 태그로 영역을 감싸고, container class를 이용하여 컨테이너를 식별할 수 있도록 했습니다.

컨테이너 내부에는 <div> 태그를 만들고, content-text class를 이용하여 제목과 설명에 대해 스타일을 적용했습니다.


제목과 설명​

캐러셀 제목 & 설명 HTML
<h2>추억</h2>
<p>제 소중한 추억들이에요</p>

캐러셀에 담기는 콘텐츠를 설명하는 짧은 제목과 설명을 위해

<h2> 태그와 <p> 태그를 사용했습니다.

다음 내용이 궁금하다면?

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