본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/WebD

2023년 웹디자인 기능사 메뉴 : S-2

by @webstoryboy 2023. 5. 10.
Tutorial/webd

2023년 웹디자인 기능사 슬라이드 : S-2

by @webs 2023. 05. 01.
28
웹디자인 기능사 슬라이드 유형 : S-2
난이도 중급
소스 다운로드
완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기

소개

안녕하세요! 웹스토리보이입니다. 이번에는 좌우로 움직이는 이미지 슬라이더를 구현해보겠습니다. 좌로 움직이는 이미지 슬라이더는 두가지 유형으로 구분할 수 있습니다. 1 2 3 이미지고 보이고 다시 1로 이동 후 보여주는 방식과 1 2 3 1 2 3 무한으로 연속적으로 자연스럽게 보여주는 방식이 있습니다. 첫 번째 방법이 더 간단하고, 소스도 짧겠지만, 시험에서는 두번째 방식을 원하는 것 같습니다. 그래서 두번째 방법으로 작업을 시작해보겠습니다. 그럼 시작해볼까요? 😚

1. 구조 잡기

이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하셔도 됩니다. 

<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo"></h1>
            <nav class="nav"></nav>
        </header>
        <!-- //header -->

        <article id="slider">
        </article>
        <!-- //slider -->

        <main id="contents">
            <section class="content1"></section>
            <section class="content2"></section>
            <section class="content3"></section>
        </main>
        <!-- //contents -->

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>

* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    display: flex;
}
#header .logo {
    width: 20%;
    height: 100px;
    background-color: #efefef;
}
#header .nav {
    width: 80%;
    height: 100px;
    background-color: #e3e3e3;
}
#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 100px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
    height: 100px;
    background-color: #a3a3a3;
}
#footer .footer3 {
    width: 20%;
    height: 100px;
    background-color: #9d9d9d;
}

이번에는 슬라이드 영역을 작업해보겠습니다. 이미지는 3장이 있다고 가정을 하고 이미지와 글씨를 보여줄 부분을 작업하였습니다. img 태그를 작성할 때에는 alt 속성을 꼭 적어주셔야 합니다. 웹 표준을 준수하기 위한 가장 기본 규칙이며, 만약 이미지가 없을 때 대체 문자가 나오는 부분입니다. 시험지에 웹 표준을 준수하라고 명시되어 있기 때문에 이런 부분이 없다면, 감정 요인일 것입니다. 

<article id="slider">
    <div class="sliderWrap">
        <div class="slider s1">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider01.jpg" alt="이미지 설명">
            <span>이미지1</span>
        </div>
        <div class="slider s2">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider02.jpg" alt="이미지 설명">
            <span>이미지2</span>
        </div>
        <div class="slider s3">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg" alt="이미지 설명">
            <span>이미지3</span>
        </div>
    </div>
</article>
<!-- //slider -->

이미지는 가로로 정렬이 되어있어야 합니다. 이것부터 제대로 되어 있지 않으면, 스크립트에서 완전 꼬이게 되고, 시간은 촉박하게 되고, 결국 시험을 잘 못보겠죠! 스크립트를 작업하기 전에 HTML/CSS부터 제대로 됐는지 꼭 확인하고 작업을 들어가셔야 합니다. 두번째 슬라이더는 별개 없습니다. 다음고 같이 작업해주시면 되고 이미지 여백을 없애기 위해 vertical-align: top;를 설정했습니다. 

/* slider */
#slider {
    overflow: hidden;
}
.sliderWrap {
    display: flex;
}
.sliderWrap .slider {
    position: relative;
}
.sliderWrap .slider img {
    vertical-align: top;
}
.sliderWrap .slider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    padding: 10px 20px;
}

2. 스크립트 작업 : 제이쿼리

20줄 정도 되는데 이정돈 외울 수 있겠죠? 물론 더 짧게 5줄로도 만들 수 있지만, 그건 도움이 안됩니다. 전체적인 흐름을 이해하고 생각하면서 하나씩 짜보면 스크립트가 재밌고, 쉽게 암기게 됩니다. 그럼 원리부터 설명할까요? 우선 3장의 이미지가 있고 앞에 한장을 복사해서 뒤에 넣어줄겁니다. 그럼 총 4장이 되겠죠. 이렇게 해야 이미지가 자연스럽게 무한으로 작업할 수 있습니다. 총 4장의 이미지를 감싸고 있는 $sliderWrap를 움직이게 하면 이미지 슬라이드가 완성됩니다. 그 밖에 필요한 이미지 가로값을 변수에 저장하였고, 첫 번째 이미지를 복사하여 마지막 위치에 넣었습니다. append()와 clone() 메서드를 이용하면 작업할 수 있습니다.

일정한 간격으로 실행하는 메서드 setInterval()를 작성하고 현재 이미지 값을 1씩 증가시켜줍니다. 이미지를 감싸고 있는 $sliderWrap을 왼쪽으로 애니메이션을 줄겁니다. animate()를 사용하면 애니메이션을 줄 수 있고, 이미지의 가로값 만큼 왼쪽으로 이동시켜 줍니다. 그렇게 이미지가 이동으로 하고 currentIndex와 이미지 총 갯수 $slider.length가 같으면, 마지막 사진을 의미하게 됩니다. 그 때 다시 이미지를 원점으로 돌리는데, 애니메이션을 주면 움직이는게 보이기 때문에 안보이도록 애니메이션을 주지 않을 것입니다. 그리고 현재 이미지는 0으로 초기합니다. 그럼 완벽하게 무한 이미지 슬라이드가 됩니다. 신기하지 않나요? ㅎㅎ 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function(){
        let currentIndex = 0;   //현재 이미지
        $(".sliderWrap").append($(".slider").first().clone(true));  //첫번째 이미지를 복사, 마지막에 추가

        setInterval(function(){     //3초에 한번씩 실행
            currentIndex++;     //현재 이미지를 1씩 증가
            $(".sliderWrap").animate({marginLeft: -currentIndex * 100 + "%"}, 600); //이미지 애니메이션

            if(currentIndex == 3){  //마지막 이미지일때
                setTimeout(function(){  
                    $(".sliderWrap").animate({marginLeft: 0}, 0);   //애니메이션을 정지
                    currentIndex = 0;   //현재이미지 초기화
                }, 700);
            }
        }, 3000);
    });
</script>

3. 스크립트 작업 : 자바스크립트

이번엔 자바스크립트 작업해보겠습니다. DOMContentLoaded가 너무 길면 onload를 사용하면 됩니다. 앞에서 설명을 했죠? 넘어가겠습니다. 우선 원리부터 확인해야겠죠! 총 3개의 이미지가 있고, 첫 번째 이미지를 복사해서 마지막에 추가하고, 이미지를 감싸고 있는 부모 박스를 움직이면 됩니다. 마지막 이미지에 왔을 때 애니메이션을 끝고 순간적으로 초기화 시켜주면 됩니다. 그럼 고고! 🥳

이미지 부모와 이미지를 변수에 저장을 하고 이미지 크기를 구합니다. 이미지 가로 값은 offsetWidth를 통해 구합니다. 이미지 중에 첫번째 자식을 선택하고 firstElementChild 복사를 합니다. cloneNode(true) 요소를 복사할 때 true라고 넣어줘야 복사가 됩니다. 그리고 appendChild를 통해 마지막에 넣어주면 이미지는 총 4개가 됩니다.

setInterval()를 통해 일정한 간격으로 실행을 하고, 자바스크립트는 애니메이션이 안되기 때문에 transition을 통해 애니메이션을 구현하겠습니다. 전체 이미지를 margin을 통해 움직일 수도 있지만, 이번에는 translateX를 통해 움직이도록 하겠습니다. 여기에서 문자열과 변수를 표현할 때 ` `를 통해서 작업할 수 있습니다. 변수 부분만 ${}로 표현하면 작업하기 더 수월합니다. 참고하세요!

이미지가 마지막에 왔을 때 currentIndex == slider.length 순간 이미지 애니메이션을 멈춥니다. transition을 0으로 설정하고 현재 이미지도 0으로 설정해서 초기화합니다. 

window.onload = function(){
    let currentIndex = 0;       //현재 이미지
    const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지
    const slider = document.querySelectorAll(".slider");    //각각의 이미지 
    const sliderClone = sliderWrap.firstElementChild.cloneNode(true);   //첫번째 이미지 저장 
    sliderWrap.appendChild(sliderClone);    //복사한 이미지를 마지막에 추가

    setInterval(() => { 
        currentIndex++;     //현재 이미지를 1씩 증가
        sliderWrap.style.marginLeft = -currentIndex * 100 + "%";    //이미지 이동
        sliderWrap.style.transition = "all 0.6s";   //이미지 애니메이션 설정

        if(currentIndex == 3){  //마지막 이미지
            setTimeout(() => {
                sliderWrap.style.transition = "0s"; //애니메이션 정지
                sliderWrap.style.marginLeft = "0";  //이미지 위치 초기화
                currentIndex = 0;   //현재 이미지 초기화
            }, 700);
        }
    }, 3000);
}

3. 마무리

두번째 이미지 슬라이드도 끝이 났습니다. 제이쿼리나 자바스크립트나 별반 차이가 없다는게 느껴지나요? 그래도 초보자 분들은 제이쿼리를 추천하고, 쪼오금 자신있다면 자바스크립트를 추천합니다. 좌로 움직이는 슬라이드였으나 여러분들은 우로 움직이는 것을 도전해보세요! 따로 해보진 않겠지만 잘 안될겁니다. 그게 스크립트의 매력입니다. 처음엔 무조건 잘 안됩니다. 자꾸 해봐야 잘됩니다. 첨부터 잘되면 금방 질리겠죠! 저는 그래서 자바스크립트가 좋습니다. 볼매거든요~ 그럼 오늘도 수고하셨습니다.

완성 화면 완성 코드 미리보기 소스 다운로드

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바