안녕하세요! 웹스토리보이입니다 😊
이번 슬라이드는 앞에서 만든 두 번째 슬라이드와 거의 동일한 구조를 갖고 있어요. 다른 점이 있다면, 이미지의 움직임 방향이 좌우가 아닌 위아래라는 것뿐이죠!
그래서 앞의 내용을 제대로 이해하셨다면, 이번 유형은 어렵지 않게 응용하실 수 있을 거예요. 코드 흐름도 거의 같고, 핵심은 방향만 바꿔주는 거랍니다. 먼저 혼자 한 번 도전해보시는 것도 좋습니다. 해보다 막히는 부분이 있다면 저와 함께 차근차근 해결해보면 되니까요.😉
그럼 오늘도 마지막까지! 힘차게 시작해볼까요? 🚀 렛츠 고!
이번에는 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 -->이미지는 세로로 정렬할 것이기 때문에 특별히 할 것이 없습니다. 원래 이미지는 세로로 정렬이 되니깐요! 하지만 여기서 중요한 점은 이미지에 간격이 생기는 현상을 막아야 합니다. 이미지는 인라인 구조이기 때문에 보이지 않는 폰트 크기, 간격 등이 생깁니다. 그래서 블록구조로 변경하거나 폰트사이즈를 0으로 설정하면 해결이 되지만 vertical-align: top; 이 방법을 제일 많이 사용하니깐, 이렇게 설정할께요~ 그러면 간격이 없어지기 때문에 이미지가 일정한 간격으로 이동하게 됩니다. 저기서 틀리는 분들도 많더라구요! 주의해주세요!
1/* slider */
2#slider {
3 overflow: hidden;
4}
5.sliderWrap .slider {
6 position: relative;
7}
8.sliderWrap .slider img {
9 vertical-align: top;
10}
11.sliderWrap .slider span {
12 position: absolute;
13 left: 50%;
14 top: 50%;
15 transform: translate(-50%, -50%);
16 background-color: rgba(0,0,0,0.3);
17 color: #fff;
18 padding: 10px 20px;
19}이번 유형은 이미지가 왼쪽으로 이동하는 것이 아니라, 위쪽으로 이동한다는 점만 다릅니다. 그래서 가로 너비를 기준으로 하던 이전 방식 대신, 각 이미지의 세로 높이인 $slider.height() 값을 기준으로 계산해주셔야 해요. 이미지 이동 방식은 동일하게 setInterval()을 활용하고, 첫 번째 이미지를 복사해 마지막에 붙여주는 방식도 그대로 사용합니다. 이렇게 해야 마지막 이미지에서 처음 이미지로 자연스럽게 연결되는 무한 슬라이드가 만들어지죠.
단지 이동 방향이 위쪽이기 때문에 애니메이션 속성은 marginLeft 대신 marginTop을 사용해야 합니다. 슬라이더가 위로 이동하면서 다음 이미지가 자연스럽게 등장하게 되는 거예요. 그리고 마지막 슬라이드까지 도달했을 때는 애니메이션이 끝난 후, 순간적으로 위치를 초기화해줍니다. 이때 애니메이션을 꺼둔 상태에서 marginTop을 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({marginTop: -currentIndex * 300 + "px"}, 600); //이미지 애니메이션
10
11 if(currentIndex == 3){ //마지막 이미지
12 setTimeout(function(){
13 $(".sliderWrap").animate({ marginTop:0 }, 0); //애니메이션 초기화
14 currentIndex = 0; //현재 이미지를 초기화
15 }, 700)
16 }
17 }, 3000);
18 });
19</script>원리는 앞서 작업한 슬라이드와 크게 다르지 않습니다. 먼저, 첫 번째 이미지를 복제해서 마지막 위치에 추가합니다. 이렇게 하면 이미지가 자연스럽게 이어지며 무한 반복 슬라이드를 구현할 수 있죠.
중요한 포인트는 이미지들이 세로로 정확하게 정렬되어 있어야 한다는 점입니다. 만약 여백이 생기거나 정렬이 어긋나면 슬라이드가 매끄럽지 않게 동작할 수 있으므로, 이 부분은 반드시 CSS에서 먼저 완벽하게 설정하고 넘어가야 합니다. 스크립트에서는 우선 현재 이미지를 나타내는 currentIndex를 0으로 초기화합니다. 그리고 querySelectorAll()로 전체 이미지 리스트를, firstElementChild로 첫 번째 이미지를 선택해서 cloneNode(true)로 복제합니다. 복제한 이미지는 appendChild()를 통해 마지막에 붙여줍니다.
이제 슬라이드를 움직일 시간입니다. setInterval()을 사용해 일정 시간 간격으로 슬라이드를 실행하고, 매번 currentIndex를 1씩 증가시켜 위쪽으로 이동합니다. 이때 translateY와 함께 transition: all 0.6s를 설정하여 부드러운 애니메이션을 적용합니다. 마지막 슬라이드까지 이동한 경우에는 약간의 지연을 준 뒤 transition을 0으로 초기화하고, translateY도 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(() => { //3초에 한번씩 실행
9 currentIndex++; //현재 이미지 1씩 증가
10 sliderWrap.style.transition = "all 0.6s"; //애니메이션 추가
11 sliderWrap.style.marginTop = -currentIndex * 300 + "px"; //이미지 이동
12
13 if(currentIndex == slider.length){ //마지막 이미지
14 setTimeout(() => {
15 sliderWrap.style.transition = "0s"; //애니메이션 정지
16 sliderWrap.style.marginTop = "0"; //이미지 위치 초기화
17 currentIndex = 0; //현재 이미지 초기화
18 }, 700);
19 }
20 }, 3000);
21}이번 유형은 두 번째 유형을 응용한 버전이었기 때문에 복습하는 기분으로 작업하셨을 거예요.
슬라이드를 제대로 구현하는 것은 단순한 기능 이상의 의미가 있습니다. 시험에서는 이 파트가 점수 배점이 크고, 실무에서도 가장 많이 활용되는 구조 중 하나니까요. 그렇기 때문에 슬라이드 구현은 반드시 익혀두셔야 합니다.
처음에는 어렵고 길게 느껴질 수 있지만, 원리를 파악하고 반복해서 구현해보면 점점 자연스럽게 손에 익게 될 거예요. 그렇게 축적된 감각은 다른 기능 구현에도 큰 도움이 됩니다. 그리고 하나 더! 이 슬라이드를 기반으로 버튼, 닷 네비게이션, 자동 정지 등의 기능도 확장해보세요. 진짜 재미는 그때부터 시작됩니다! 😉
지금까지 함께한 이미지 슬라이드 여정, 정말 고생 많으셨습니다. 꾸준히 연습하고 도전하는 여러분을 진심으로 응원합니다. 다음 콘텐츠에서 또 만나요! 😊👏