슬라이드 쇼는 이미지 슬라이드를 통해 여러 개의 이미지를 갤러리 형태로 표시하는 웹 애플리케이션입니다.
개념설명:
슬라이드 쇼는 웹 페이지에서 이미지를 자동으로 전환하면서 표시하는 기능을 가진 애플리케이션입니다. 사용자는 여러 이미지를 순환하며 감상할 수 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>이미지 슬라이드 쇼</title>
<style>
.slideshow {
width: 400px;
height: 300px;
overflow: hidden;
}
.slideshow img {
width: 100%;
height: auto;
animation: slide 5s infinite;
}
@keyframes slide {
0% { transform: translateX(0%); }
25% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
100% { transform: translateX(-400%); }
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- 추가 이미지 -->
</div>
</body>
</html>
전문용어 상세하게 설명:
슬라이드 쇼: 웹 페이지에서 이미지나 컨텐츠를 자동으로 전환하면서 보여주는 기능.
갤러리: 이미지나 컨텐츠를 표시하고 감상할 수 있는 웹 페이지 부분.
이미지 슬라이드: 여러 개의 이미지를 자동으로 전환하면서 보여주는 슬라이드 형태의 디자인.
'자바스크립트' 카테고리의 다른 글
| 날씨 앱: 사용자의 위치에 따라 날씨 정보를 표시하는 웹 앱을 만듭니다. (0) | 2023.12.17 |
|---|---|
| 간단한 퍼즐 게임: 퍼즐 조각을 이동하여 이미지를 완성하는 퍼즐 게임을 만듭니다. (0) | 2023.12.17 |
| 간단한 웹 페이지 타이머: 웹 페이지에서 특정 시간 간격으로 메시지를 변경하는 타이머를 만듭니다. (0) | 2023.12.17 |
| ToDo 리스트 관리 앱 만들기 (0) | 2023.12.17 |
| 랜덤 숫자 맞추기 게임: 컴퓨터가 생성한 랜덤 숫자를 맞추는 게임을 만듭니다. (0) | 2023.12.17 |