안녕하세요! 웹스토리보이입니다 😊
이제는 좌우로 움직이는 무한 이미지 슬라이드에 도전하겠습니다! 🎉 이번 방식은 한 번만 재생되고 멈추는 슬라이드가 아니라, 끊김 없이 자연스럽게 이어지는 슬라이드를 만들어볼 거예요.
실무 웹사이트에서도 많이 쓰이는 구조라서, 익혀두면 정말 든든합니다! 단순히 1-2-3 → 다시 1로 돌아가는 방식이 아니라, 1-2-3-1-2-3... 식으로 계속 흐르듯 반복되는 슬라이드죠! ✨ 처음엔 조금 복잡해 보일 수 있지만, 흐름을 이해하면 생각보다 간단해요. 그럼 지금부터 가볍고 활기차게! 신나게! 슬라이드 제작, 바로 시작해보겠습니다 💪😄 렛츠 고!
이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하셔도 됩니다.
1<body>
2 <div id="wrap">
3 <header id="header">
4 <h1 class="logo"></h1>
5 <nav class="nav"></nav>
6 </header>
7 <!-- //header -->
8
9 <article id="slider">
10 </article>
11 <!-- //slider -->
12
13 <main id="contents">
14 <section class="content1"></section>
15 <section class="content2"></section>
16 <section class="content3"></section>
17 </main>
18 <!-- //contents -->
19
20 <footer id="footer">
21 <div class="footer1"></div>
22 <div class="footer2"></div>
23 <div class="footer3"></div>
24 </footer>
25 <!-- //footer -->
26 </div>
27 <!-- //wrap -->
28</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 1200px;
7 margin: 0 auto;
8}
9#header {
10 width: 100%;
11 display: flex;
12}
13#header .logo {
14 width: 20%;
15 height: 100px;
16 background-color: #efefef;
17}
18#header .nav {
19 width: 80%;
20 height: 100px;
21 background-color: #e3e3e3;
22}
23#slider {
24 width: 100%;
25 height: 300px;
26 background-color: #d9d9d9;
27}
28#contents {
29 width: 100%;
30 display: flex;
31}
32#contents .content1 {
33 width: 33.3333%;
34 height: 200px;
35 background-color: #d1d1d1;
36}
37#contents .content2 {
38 width: 33.3333%;
39 height: 200px;
40 background-color: #c7c7c7;
41}
42#contents .content3 {
43 width: 33.3333%;
44 height: 200px;
45 background-color: #bcbcbc;
46}
47#footer {
48 width: 100%;
49 display: flex;
50}
51#footer .footer1 {
52 width: 20%;
53 height: 100px;
54 background-color: #b1b1b1;
55}
56#footer .footer2 {
57 width: 60%;
58 height: 100px;
59 background-color: #a3a3a3;
60}
61#footer .footer3 {
62 width: 20%;
63 height: 100px;
64 background-color: #9d9d9d;
65}이번에는 슬라이드 영역을 본격적으로 구성해보겠습니다! 우선 이미지가 3장 있다고 가정하고, 각 이미지와 함께 텍스트를 덧붙여 표시해줄 HTML 구조를 만들어줄 거예요. 이렇게 하나의 슬라이드는 이미지와 텍스트가 함께 들어가는 컨텐츠 박스로 보면 됩니다. 여기서 꼭 기억하셔야 할 점! 이미지를 <img> 태그로 삽입할 때는 반드시 alt 속성을 적어줘야 합니다. 왜냐하면, 이는 웹 표준의 기본 규칙이기 때문이죠. 이미지가 로딩되지 않거나 시각적 접근성이 필요한 사용자에게 alt 속성은 대체 정보가 되어줍니다. 특히 웹디자인개발기능사 시험에서는 '웹 표준 준수'라는 말이 문제지에도 명시되어 있기 때문에, 이런 사소한 요소 하나하나가 감점의 요인이 될 수 있다는 점, 꼭 기억해두세요!
1<article id="slider">
2 <div class="sliderWrap">
3 <div class="slider s1">
4 <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider01.jpg" alt="이미지 설명">
5 <span>이미지1</span>
6 </div>
7 <div class="slider s2">
8 <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider02.jpg" alt="이미지 설명">
9 <span>이미지2</span>
10 </div>
11 <div class="slider s3">
12 <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg" alt="이미지 설명">
13 <span>이미지3</span>
14 </div>
15 </div>
16</article>
17<!-- //slider -->슬라이드를 구현할 때 가장 먼저 체크해야 할 건 이미지의 정렬 상태입니다.
이미지는 반드시 가로 방향으로 나란히 정렬되어 있어야 합니다. 이 부분이 제대로 되어 있지 않으면, 이후 스크립트에서 슬라이드가 비정상적으로 작동하거나 꼬이기 쉬워요. 시험 시간은 촉박한데, HTML/CSS에서 문제가 생기면 자바스크립트 디버깅에 시간만 빼앗기고 결국 마무리를 못할 수 있습니다. 그래서 꼭 기억하세요!
스크립트를 작성하기 전에 HTML과 CSS가 정확하게 구성되었는지 한 번 더 확인하고 넘어가야 합니다. 특히 슬라이드 구조나 폭, 위치가 어긋나면 스크립트는 제대로 작동하지 않아요. 두 번째 슬라이더 작업은 특별히 복잡한 건 없습니다. 이미지들을 감싸는 래퍼 요소를 display: flex로 설정하거나, float 혹은 inline-block 방식으로 가로 정렬을 만들어주면 됩니다. 또 하나! 이미지 하단에 생기는 미세한 공백 문제를 없애기 위해 vertical-align: top;을 꼭 넣어주세요. 이건 이미지 정렬 문제를 깔끔하게 해결해주는 작은 팁입니다. 작은 것부터 확실하게! 그게 슬라이드 구현의 첫걸음입니다 😊
1/* slider */
2#slider {
3 overflow: hidden;
4}
5.sliderWrap {
6 display: flex;
7}
8.sliderWrap .slider {
9 position: relative;
10}
11.sliderWrap .slider img {
12 vertical-align: top;
13}
14.sliderWrap .slider span {
15 position: absolute;
16 left: 50%;
17 top: 50%;
18 transform: translate(-50%, -50%);
19 background-color: rgba(0,0,0,0.3);
20 color: #fff;
21 padding: 10px 20px;
22}스크립트는 약 20줄 정도예요. 이 정도는 충분히 외울 수 있겠죠? 물론 더 짧게 5줄 안팎으로도 만들 수는 있어요. 하지만 그렇게 하면 전체 흐름을 이해하기 어려워지고, 결국 응용도 힘들어집니다. 중요한 건 ‘외우는 것’이 아니라 ‘이해하는 것’이에요. 코드를 한 줄씩 따라 써보면서 구조를 익히면 자연스럽게 외워지기도 하거든요. 😊
그럼 이제 원리를 하나씩 살펴볼까요? 기본적으로 슬라이드 이미지는 3장이 있고, 첫 번째 이미지를 하나 복사해서 맨 뒤에 추가해줄 거예요. 이렇게 하면 총 4장의 이미지가 되죠. 이게 바로 무한 슬라이드를 자연스럽게 만드는 핵심 포인트입니다!
그리고 이 4장의 이미지를 감싸고 있는 요소, 즉 $sliderWrap을 왼쪽으로 이동시키면 슬라이드가 동작하게 됩니다. 이때 이미지 한 장의 가로 너비도 필요하기 때문에, 이 값을 변수에 저장해두고 계산에 활용할 거예요.
이미지 복사 작업은 append()와 clone() 메서드를 이용하면 아주 간단하게 할 수 있어요. 실제로 코드를 보면 금방 감이 오실 겁니다.
자, 이제 자동으로 슬라이드가 넘어가도록 setInterval()을 설정해볼 차례입니다. currentIndex라는 변수를 하나 만들고, 이 값을 1씩 증가시키면서 슬라이드가 이동하도록 만드는 거예요.
슬라이드를 움직일 땐 animate() 메서드를 사용합니다.marginLeft를 이용해서 이미지 한 장의 너비만큼 왼쪽으로 이동시키면, 마치 슬라이드가 밀려가는 것처럼 보이게 되죠.
그런데 이미지가 마지막까지 갔을 때는 어떻게 해야 할까요? 바로, 순간적으로 처음 위치로 되돌려줘야 해요. 이때 애니메이션 없이 위치를 초기화해야 자연스럽게 보입니다. 그래서 마지막 이미지일 경우엔 animate() 대신 즉시marginLeft를 0으로 되돌리고, currentIndex도 0으로 초기화하는 방식으로 처리해줍니다.
이렇게 하면 마치 끝없이 이어지는 듯한 무한 슬라이드가 완성되는 거예요. 흐름만 이해하면 정말 신기하죠? 처음엔 조금 복잡하게 느껴질 수 있지만, 막상 손으로 구현해보면 “오! 이거 되네?” 하고 금방 익숙해질 거예요. 😄
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3 $(function(){
4 let currentIndex = 0; //현재 이미지
5 $(".sliderWrap").append($(".slider").first().clone(true)); //첫번째 이미지를 복사, 마지막에 추가
6
7 setInterval(function(){ //3초에 한번씩 실행
8 currentIndex++; //현재 이미지를 1씩 증가
9 $(".sliderWrap").animate({marginLeft: -currentIndex * 100 + "%"}, 600); //이미지 애니메이션
10
11 if(currentIndex == 3){ //마지막 이미지일때
12 setTimeout(function(){
13 $(".sliderWrap").animate({marginLeft: 0}, 0); //애니메이션을 정지
14 currentIndex = 0; //현재이미지 초기화
15 }, 700);
16 }
17 }, 3000);
18 });
19</script>이번에는 자바스크립트로 무한 슬라이드를 구현해보겠습니다! DOMContentLoaded를 써도 되지만, 좀 길고 복잡하게 느껴진다면 간단하게 window.onload로 시작해도 전혀 문제 없습니다. 이제 원리를 먼저 정리해볼게요.
우선, 기본 슬라이드 이미지는 총 3장이 있다고 가정합니다. 여기서 중요한 핵심 포인트! 첫 번째 이미지를 복사해서 마지막에 추가해줘야 자연스럽게 이어지는 무한 슬라이드를 만들 수 있다는 거예요. 그렇게 되면 총 4장이 되겠죠? 이 작업은 자바스크립트의 cloneNode(true)와 appendChild() 메서드를 이용해서 아주 간단히 처리할 수 있습니다.
그 다음은 실제 이미지를 감싸고 있는 부모 요소, 즉 .sliderWrap을 좌우로 움직여줘야 합니다. 이때 이미지 하나의 너비를 알아야 하니까 offsetWidth로 가져오면 됩니다. 그리고 움직임은 margin-left를 이용해도 되지만, 이번에는 transform: translateX 방식을 사용해서 좀 더 깔끔하게 구현할 거예요. 슬라이드는 일정한 시간 간격으로 자동 실행되니까 setInterval()을 사용하고, 매번 슬라이드를 왼쪽으로 하나씩 이동시키게 됩니다. 이때 매번 currentIndex를 하나씩 증가시키면서, 현재 슬라이드가 어디인지 관리해주는 거죠.
그리고 중요한 부분! 마지막 이미지까지 슬라이드가 이동한 후에는 자연스럽게 처음으로 돌아가야 합니다. 이때는 transition 속성을 0으로 설정해 애니메이션 없이 순간적으로 슬라이드 위치를 초기화하고, currentIndex도 다시 0으로 리셋하면 됩니다. 그럼 사용자는 전혀 끊기는 느낌 없이 슬라이드가 반복된다고 느끼게 돼요! 😄
1window.onload = function(){
2 let currentIndex = 0; //현재 이미지
3 const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지
4 const slider = document.querySelectorAll(".slider"); //각각의 이미지
5 const sliderClone = sliderWrap.firstElementChild.cloneNode(true); //첫번째 이미지 저장
6 sliderWrap.appendChild(sliderClone); //복사한 이미지를 마지막에 추가
7
8 setInterval(() => {
9 currentIndex++; //현재 이미지를 1씩 증가
10 sliderWrap.style.marginLeft = -currentIndex * 100 + "%"; //이미지 이동
11 sliderWrap.style.transition = "all 0.6s"; //이미지 애니메이션 설정
12
13 if(currentIndex == 3){ //마지막 이미지
14 setTimeout(() => {
15 sliderWrap.style.transition = "0s"; //애니메이션 정지
16 sliderWrap.style.marginLeft = "0"; //이미지 위치 초기화
17 currentIndex = 0; //현재 이미지 초기화
18 }, 700);
19 }
20 }, 3000);
21}무한으로 이어지는 좌우 슬라이드를 멋지게 완성해보셨습니다! 👏 이번 유형은 실무에서도 자주 활용되는 방식이라 연습해둘수록 큰 도움이 될 거예요.
제이쿼리든 자바스크립트든, 핵심은 구조를 파악하고 흐름을 이해하는 것입니다. 처음에는 길고 복잡해 보일 수 있지만, 실제로 손으로 따라 치고 눈으로 움직임을 확인하다 보면 어느새 원리를 자연스럽게 익히게 됩니다.
처음부터 술술 잘 되는 건 아니에요. 시행착오를 겪으며 조금씩 쌓아가는 게 실력이랍니다. 너무 조급해하지 마시고, 오늘 만든 슬라이드에 다양한 효과를 응용해보는 것도 좋은 연습이 될 거예요!
다음 시간에는 또 다른 방식의 슬라이드, 위아래로 움직이는 구조를 함께 만들어보며 한층 더 업그레이드된 실력을 다져보겠습니다. 오늘도 정말 수고 많으셨습니다! 끝까지 도전하는 여러분을 언제나 응원합니다 😊🔥