[jQuery] jQuery CSS 미디어 쿼리 슬라이드쇼

26 Dec 2023

jQuery

이번 포스트에서는 jQuery와 CSS 미디어 쿼리를 활용하여 반응형 웹사이트에 적합한 슬라이드쇼를 만드는 방법에 대해 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
    <title>미디어 쿼리 슬라이드쇼</title>
</head>
<body>
    <div class="slideshow">
        <div class="slide" style="background-image: url('image1.jpg')"></div>
        <div class="slide" style="background-image: url('image2.jpg')"></div>
        <div class="slide" style="background-image: url('image3.jpg')"></div>
    </div>
</body>
</html>

3. CSS 스타일링

body {
    margin: 0;
    padding: 0;
}
.slideshow {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
}

4. jQuery 슬라이드쇼 구현

function nextSlide() {
    var currentSlide = $('.slide.active');
    var nextSlide = currentSlide.next();

    if (nextSlide.length) {
        currentSlide.removeClass('active');
        nextSlide.addClass('active');
    } else {
        $('.slide').removeClass('active').first().addClass('active');
    }
}

$(document).ready(function() {
    $('.slide').first().addClass('active');
    setInterval(nextSlide, 3000);
});

5. 결론

이제 여러분은 jQuery와 CSS 미디어 쿼리를 이용해 반응형 웹사이트에 적합한 슬라이드쇼를 만들 수 있게 되었습니다. 이를 통해 사용자의 화면 크기에 맞게 다양한 이미지를 제공하여 보다 풍부한 웹 경험을 제공할 수 있습니다.

이상으로 이번 포스트를 마치겠습니다. 감사합니다.

MDN Web Docs와 jQuery 공식 문서에서 더 많은 정보를 확인할 수 있습니다.

목차

1. 요구사항

2. HTML 마크업

3. CSS 스타일링

4. jQuery 슬라이드쇼 구현

5. 결론