본문 바로가기
웹 디자인

[웹 디자인] 26일차: 갤러리 및 슬라이더 디자인

by cogito21_js 2024. 8. 26.
반응형

갤러리 및 슬라이더란?

갤러리와 슬라이더는 웹사이트에서 이미지를 효과적으로 표시하는 방법입니다. 갤러리는 여러 이미지를 그리드 형태로 배열하여 사용자가 쉽게 볼 수 있게 하고, 슬라이더는 이미지를 슬라이드 형태로 전환하여 하나씩 표시합니다.

갤러리 디자인

HTML 구조

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>갤러리 디자인</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="gallery">
    <div class="gallery-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="gallery-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="gallery-item">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="gallery-item">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
</body>
</html>

CSS 스타일

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 90%;
  max-width: 1000px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

슬라이더 디자인

HTML 구조

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>슬라이더 디자인</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slider">
    <div class="slide active">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="slide">
      <img src="image4.jpg" alt="Image 4">
    </div>
    <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
    <button class="next" onclick="changeSlide(1)">&#10095;</button>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

CSS 스타일

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.slider {
  position: relative;
  width: 90%;
  max-width: 800px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

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

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

자바스크립트

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function changeSlide(n) {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + n + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

document.querySelector('.prev').addEventListener('click', () => changeSlide(-1));
document.querySelector('.next').addEventListener('click', () => changeSlide(1));

// 자동 슬라이드 기능 추가
setInterval(() => changeSlide(1), 5000); // 5초마다 슬라이드 전환

갤러리 및 슬라이더 디자인 팁

1. 반응형 디자인

갤러리와 슬라이더는 다양한 화면 크기에 대응할 수 있도록 반응형으로 설계해야 합니다. @media 쿼리를 사용하여 작은 화면에서는 그리드 열 수를 줄이고, 슬라이더의 크기를 조정합니다.

2. 부드러운 애니메이션

호버 효과나 슬라이드 전환 시 부드러운 애니메이션을 적용하여 사용자 경험을 향상시킵니다. transition 속성을 사용하여 애니메이션 효과를 추가할 수 있습니다.

3. 접근성 고려

이미지에 alt 속성을 추가하여 화면 읽기 프로그램이 이미지를 설명할 수 있도록 합니다. 또한, 네비게이션 버튼에 키보드 접근성을 제공해야 합니다.

<img src="image1.jpg" alt="Description of Image 1">
<button class="prev" aria-label="Previous Slide">&#10094;</button>
<button class="next" aria-label="Next Slide">&#10095;</button>

4. 사용자 인터랙션

슬라이더에 자동 재생 기능을 추가하거나, 사용자가 슬라이드를 직접 전환할 수 있도록 네비게이션 버튼을 제공합니다. 또한, 슬라이더 아래에 네비게이션 점을 추가하여 현재 슬라이드의 위치를 시각적으로 표시할 수 있습니다.

<div class="slider-nav">
  <span class="dot" onclick="currentSlide(0)"></span>
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

5. 성능 최적화

이미지 파일 크기를 최적화하고, 필요한 경우 지연 로딩(lazy loading)을 사용하여 페이지 로딩 속도를 개선합니다.

<img src="image1.jpg" alt="Description of Image 1" loading="lazy">

결론

갤러리와 슬라이더는 웹사이트에서 이미지를 효과적으로 표시하는 방법입니다. 반응형 디자인, 부드러운 애니메이션, 접근성, 사용자 인터랙션, 성능 최적화 등을 고려하여 갤러리와 슬라이더를 설계하면 사용자 경험을 크게 향상시킬 수 있습니다. 이번 글에서는 갤러리와 슬라이더의 기본 구조와 디자인 팁에 대해 배웠습니다.

다음 글에서는 반응형 그리드 레이아웃 프로젝트에 대해 알아보겠습니다.

다음 글에서 만나요!

 

반응형
저작자표시

'웹 디자인' 카테고리의 다른 글

[웹 디자인] 28일차: 웹 접근성 고려한 디자인  (1) 2024.08.28
[웹 디자인] 27일차: 반응형 그리드 레이아웃 프로젝트  (0) 2024.08.27
[웹 디자인] 25일차: 폼 디자인 및 검증  (0) 2024.08.25
[웹 디자인] 24일차: 네비게이션 바 디자인  (0) 2024.08.24
[웹 디자인] 23일차: 단일 페이지 웹사이트 디자인  (0) 2024.08.23

관련글

티스토리툴바