이미지 슬라이더에 텍스트 캡션을 추가하는 것은 웹 페이지의 시각적인 효과를 향상시키는 좋은 방법입니다. 여기에서는 JavaScript와 HTML을 사용하여 이미지 슬라이더에 텍스트 캡션을 추가하는 방법을 알아보겠습니다.

HTML 구조 설정

먼저, HTML 구조를 설정해야 합니다. 이미지 슬라이더와 텍스트 캡션을 담을 컨테이너를 만들어야 합니다.

<div class="slider-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <div class="caption">이미지 캡션 1</div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <div class="caption">이미지 캡션 2</div>
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
    <div class="caption">이미지 캡션 3</div>
  </div>
</div>

CSS 스타일링

이미지 슬라이더와 텍스트 캡션을 스타일링하려면 CSS를 사용해야합니다.

.slider-container {
  position: relative;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

JavaScript 추가

이미지 슬라이더에 마우스를 올렸을 때 텍스트 캡션이 나타나도록 JavaScript를 추가합니다.

const slides = document.querySelectorAll('.slide');

slides.forEach(slide => {
  slide.addEventListener('mouseover', () => {
    slide.querySelector('.caption').style.display = 'block';
  });
  slide.addEventListener('mouseout', () => {
    slide.querySelector('.caption').style.display = 'none';
  });
});

위의 예제 코드에서는 이미지 슬라이더에 텍스트 캡션을 추가하고, CSS를 사용하여 스타일을 적용하고, JavaScript를 사용하여 마우스 이벤트를 처리하여 캡션을 표시하거나 숨기는 방법을 보여주었습니다.

이제 이미지 슬라이더에 텍스트 캡션을 추가하는 데 필요한 단계를 따라 할 수 있을 것입니다.

참고 자료

• MDN Web Docs
• W3Schools