lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter5Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter6Title

# 캐러셀 구조 만들기 1

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

<br />

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

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

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

<br />

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

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

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

<br />

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

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

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

<br/>

## 예시 코드

```html title="캐러셀 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>
```

<br/>

## 컨테이너

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

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

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

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

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

<br/>

## 제목과 설명

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

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

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