안녕하세요! 웹스토리보이입니다 😊
오늘은 반응형 이미지 슬라이드 S-5 유형을 함께 만들어보겠습니다!
이번 유형은 이전에 다뤘던 S-2 유형과 구조적으로 매우 비슷합니다. 하지만 가장 큰 차이점은 바로 반응형이라는 점이에요. 반응형으로 작업하려면 슬라이드의 가로 너비를 픽셀(px)이 아닌 퍼센트(%) 단위로 설정해야 하고, 이미지는 background-image로 처리하는 것이 핵심 포인트입니다. 만약 S-2 유형의 원리를 어느 정도 이해하고 계신다면, 이번 유형도 무리 없이 따라오실 수 있을 거예요.
그럼 지금부터 함께 도전해볼까요? 🎯 시작해봅시다! 🚀
이번에는 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. 이 레이아웃을 모른다면 꼭 공부하고 오셔야 합니다.
1<body>
2 <div id="wrap">
3 <main id="main">
4 <header id="header">
5 <h1></h1>
6 <nav></nav>
7 </header>
8 <!-- //header -->
9
10 <section id="contents">
11 <div class="banner"></div>
12 <div class="notice"></div>
13 <div class="gallery"></div>
14 <div class="link"></div>
15 </section>
16 <!-- //contents -->
17
18 <article id="slider">
19 </article>
20 <!-- //slider -->
21 </main>
22 <!-- //main -->
23 <footer id="footer">
24 <div class="footer1"></div>
25 <div class="footer2">
26 <div class="footer2-1"></div>
27 <div class="footer2-2"></div>
28 </div>
29 </footer>
30 <!-- //footer -->
31 </div>
32 <!-- //wrap -->
33</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#main {
9 width: 100%;
10 height: calc(100vh - 120px);
11 background-color: #efefef;
12 display: flex;
13}
14#header {
15 width: 200px;
16 height: 100%;
17}
18#header h1 {
19 width: 100%;
20 height: 10%;
21 background-color: #e3e3e3;
22}
23#header nav {
24 width: 100%;
25 height: 90%;
26 background-color: #d9d9d9;
27}
28#contents {
29 width: 400px;
30 height: 100%;
31}
32#contents .banner {
33 width: 100%;
34 height: 15%;
35 background-color: #d1d1d1;
36}
37#contents .notice {
38 width: 100%;
39 height: 35%;
40 background-color: #c7c7c7;
41}
42#contents .gallery {
43 width: 100%;
44 height: 35%;
45 background-color: #bcbcbc;
46}
47#contents .link {
48 width: 100%;
49 height: 15%;
50 background-color: #b1b1b1;
51}
52#slider {
53 width: calc(100% - 600px);
54 height: 100%;
55 background-color: #a3a3a3;
56}
57#footer {
58 width: 100%;
59 display: flex;
60}
61#footer .footer1 {
62 width: 20%;
63 height: 120px;
64 background-color: #9d9d9d;
65}
66#footer .footer2 {
67 width: 80%;
68}
69#footer .footer2 .footer2-1 {
70 width: 100%;
71 height: 60px;
72 background-color: #929292;
73}
74#footer .footer2 .footer2-2 {
75 width: 100%;
76 height: 60px;
77 background-color: #838383;
78}이미지 슬라이드 영역을 작업했습니다. 기존과 다르게 img 태그를 쓰지 않고, 글씨만 나오도록 했습니다.
1<article id="slider">
2 <div class="sliderWrap">
3 <div class="slider s1">
4 <span>이미지1</span>
5 </div>
6 <div class="slider s2">
7 <span>이미지2</span>
8 </div>
9 <div class="slider s3">
10 <span>이미지3</span>
11 </div>
12 </div>
13</article>
14<!-- //slider -->우선 이미지를 좌로 이동하기 때문에 이미지는 가로로 정렬이 되어 있어야 합니다. 이미지 슬라이드 제일 상위 영역에 overflow: hidden; 설정하여 넘치는 부분은 보이지 않도록 했습니다. 첫 번째 이미지를 복사하여 마지막에 넣을 것이기 때문에 가로 값을 width: 400%;로 설정해야 구조가 깨지지 않습니다. 이 부분을 조심해야 합니다. 각각의 이미지에는 width: 100%;, height: 100%;을 설정하고, 백그라운드 이미지는 전체 영역에 맞게 cover로 설정하고, 이미지를 가운데로 정렬하기 위해서 background-position: center;를 설정합니다. 이미지는 한번만 나올 수 있도록 no-repeat를 설정하면 됩니다.
1/* slider */
2#slider {
3 overflow: hidden;
4}
5.sliderWrap {
6 width: 400%;
7 height: 100%;
8 display: flex;
9}
10.sliderWrap .slider {
11 position: relative;
12 width: 100%;
13 height: 100%;
14 background-size: cover;
15 background-position: center;
16 background-repeat: no-repeat;
17}
18.sliderWrap .slider.s1 {
19 background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg);
20}
21.sliderWrap .slider.s2 {
22 background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg);
23}
24.sliderWrap .slider.s3 {
25 background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider06.jpg);
26}
27.sliderWrap .slider span {
28 position: absolute;
29 left: 50%;
30 top: 50%;
31 transform: translate(-50%, -50%);
32 background-color: rgba(255,255,255,0.4);
33 padding: 10px 20px;
34}반응형으로 만들기 위해 가장 중요한 부분은 슬라이드 이동 값을 픽셀이 아닌 퍼센트(%)로 설정하는 것입니다. 기존 S-2 유형과 비교했을 때 이 점만 다르고, 나머지 구조나 동작은 거의 동일해요.
간단히 설명드리면, 첫 번째 슬라이드를 복제해서 맨 뒤에 추가하고, currentIndex 값을 1씩 증가시키며 슬라이드를 왼쪽으로 100%씩 이동시키도록 설정합니다. 이때 marginLeft 속성에 -100%, -200%와 같이 퍼센트 단위로 값을 적용하는 방식이에요.
그리고 슬라이드가 마지막에 도달하면, 애니메이션을 잠시 멈춘 뒤 위치를 원래대로 되돌리고 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(() => {
8 currentIndex++; //혅재 이미지를 1씩 추가
9 $(".sliderWrap").animate({marginLeft: -100 * currentIndex + "%"}, 600); //이미지 애니메이션
10
11 if(currentIndex == 3){ //마지막 이미지
12 setTimeout(() => {
13 $(".sliderWrap").animate({marginLeft: 0}, 0); //애니메이션 정지
14 currentIndex = 0; //현재 이미지 초기화
15 }, 700);
16 }
17 }, 3000);
18 });
19</script>자바스크립트로 구현하는 방식도 S-2 유형과 거의 동일합니다. 다만, 반응형으로 만들기 위해 이동 값을 퍼센트(%)로 설정해주는 것이 가장 큰 차이점이에요.
우선 전체 슬라이드 영역인 sliderWrap과 각각의 슬라이드인 slider들을 변수에 담아줍니다. 여러 개의 슬라이드를 선택해야 하므로 querySelectorAll을 사용했고, 첫 번째 슬라이드를 복제해서 마지막에 추가해 자연스럽게 반복되도록 구성했습니다.
슬라이드를 부드럽게 이동시키기 위해 transition 속성을 사용하고, marginLeft 값을 퍼센트 단위로 조정해 슬라이드가 왼쪽으로 이동하게 설정했습니다. 그리고 마지막 슬라이드에 도달했을 때는 애니메이션을 잠시 멈춘 뒤 위치를 처음으로 초기화해, 끊김 없는 무한 슬라이드가 되도록 처리했습니다.
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.marginLeft = -currentIndex * 100 + "%"; //왼쪽으로 100%씩 이동
12
13 if(currentIndex == slider.length){
14 setTimeout(() => {
15 sliderWrap.style.transition = "0s"; //애니메이션 효과 정지
16 sliderWrap.style.marginLeft = "0"; //이미지 위치를 초기화
17 currentIndex = 0; //현재 이미지를 초기화
18 }, 700);
19 }
20 }, 3000);
21};여기까지 반응형 이미지 슬라이드 S-5 유형을 완성해봤습니다! 이번 유형은 기존 S-2 유형의 구조를 바탕으로, 반응형 대응을 위해 백그라운드 이미지와 퍼센트 단위의 가로 설정이 추가된 형태입니다.
오늘도 끝까지 따라와 주셔서 감사합니다. 반응형 슬라이드까지 마스터하신 여러분, 정말 멋지십니다! 😄 다음 강의에서도 실무와 시험에 모두 도움이 될 수 있는 주제로 찾아올게요. 수고 많으셨습니다! 💪