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

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

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

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

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

소개

안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트! 제일 어려운! 제일 재밌는! 이미지 슬라이드입니다. 이 영역은 시험장에서 구현을 못하면 바로 떨어집니다. 무조건 암기하고 또 암기하고, 이해해야, 구현이 가능해야 합니다. 이미지 슬라이드의 유형은 크게 3가지로 나누어 집니다. 페이드 효과, 좌우 슬라이드 효과, 위아래 슬라이드 효과입니다. 페이드 효과는 이미지가 제자리에서 천천히 없어지고 천천히 나타나는 유형이고, 좌우 슬라이드 효과는 이미지고 우에서 좌로 움직이거나 좌에서 우로 움직이는 유형입니다. 위아래 슬라이드 효과는 위에서 아래로 움직이거나 아래에서 위로 움직이는 유형입니다. 이 3가지 유형 중 랜덤으로 나옵니다. 다만 이미지 슬라이드를 구현할 때 이미지가 1,2,3번째 이미지가 나오고 다시 1번째로 돌아가서 1,2,3으로 나오는 형태가 있고, 자연스럽게 1,2,3,1,2,3,1... 무한 슬라이드 형태로 나오는 유형이 있습니다. 기존에 제 영상에는 첫번째 방법으로 작업을 했었는데. 감점의 요인이 됐던거 같습니다. 그래서 이번에는 무한 슬라이드 형태로 이미지들이 자연스럽게 연속적으로 나오게 코딩을 하였습니다. 소스가 기존보다 조금 더 길어지고 복잡할 수 있지만, 소스르 짧게 짜는게 중요한게 아니라 흐름을 이해하면서 가독성 있는 코드로 작업하는게 더 중요하다고 봅니다. 그래서 이번에는 소스가 조금 길어질 수 있습니다.

그럼 시작해볼까요? 🥲

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 -->

CSS에서는 3장의 이미지를 절대값으로 설정하여 한 곳에 뭉쳐 있도록 할 것입니다. 모든 이미지에 display: none;을 설정하여, 안보이도록 하고 div:first-child 첫 번째 이미지만 보이도록 설정할 것입니다. 또한 이미지에 여백이 생기게 되는데 그 부분은 vertical-align: top을 설정하면 없어집니다. 왜 없어지는진 모르겠네요! 옛날부터 저렇게 했습니다. 논리적으로 설명되지 않는 부분이지만 저렇게 하면 이미지 여백이 없어집니다. 중요하니까 꼭 기억하세요! 😱 이렇게 하면 기본 셋팅은 끝났습니다. 이제 스크립트를 들어가보겠습니다. 

/* slider */
.sliderWrap {
    position: relative;
}
.sliderWrap > div {
    display: none;
}
.sliderWrap > div:first-child {
    display: block;
}
.sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
}
.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.4);
    padding: 10px 20px;
    color: #fff;
}

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

이미지 슬라이드를 구현하기 위해서는 원리부터 파악을 하겠습니다. 3개의 이미지를 absolute를 통해 한 곳에 모우 위치하게 했습니다. CSS를 통해 모든 이미지를 안보이게 하고 첫 번째 이미지만 보이겠습니다. 이 부분을 스크립트로 처리하면 $slider.hide().first().show(); 이렇게 표현할 수 있습니다. 모든 이미지 선택자는 const $slider = $('.slider'); 이런식으로 표현이 가능합니다. 슬라이드 이미지를 모두 숨기고 첫번째 이미지를 보여줘라! 이런 식으로 해석하시면 되고, 현재 이미지는 let currentIndex = 0; 변수에 설정을 했습니다.

setInterval() 메서는 일정한 간격으로 함수를 실행하는 것을 의미합니다. 3000이라고 적은 것은 3초에 한번씩 샐행을 의미합니다. 3초에 한번씩 현재이미지(currentIndex)는 0이지만, 1씩 증가할 것입니다. nextIndex 변수에 현재이미지에 1을 추가합니다. 그럼 nextIndex 값은 1 2 3 4 5 6 증가할 것입니다. 여기에 이미지 갯수 $slider.length를 나누고 나머지를 구합니다. 그럼 1 % 3 = 1, 2 % 3 = 2, 3 % 3 = 0, 4 % 3 = 1, 5 % 3 = 2,..... 이런식으로 반복되기 때문에 1 2 0 1 2 0 1 2 0 이렇게 숫자가 나오게 됩니다.

eq는 순서를 나타내고 $slider.eq(currentIndex)를 주면 첫번째 이미지를 나타냅니다. 다음 이미지는 $slider.eq(nextIndex) 이렇게 표현하게 됩니다. 첫번째 이미지를 천천히 사라지게 하고 두번째 이미지를 천천히 보이게 합니다. 그리고 nextIndex 값을 currentIndex에 저장시키면 3초에 한번식 currentIndex 값은 증가하면서 이미지도 순차적으로 보이게 됩니다.

이 소스가 페이드 슬라이드 효과를 표현하는 스크립트입니다. 물론 이것보다 더 간단하게 작업할 수 있는 방법도 있지만, 이 방법이 흐름에 맞추어 정석으로 표현한 방법입니다. 원리를 파악하고 하나씩 스크립트를 작업하면 이미지 슬라이드가 구현됩니다. 소스가 조금 길 수 있지만 이 방법을 추천합니다. 아직 이해가 안되면 먼저 외워주세요~ 외우다 보면 또 이해가 됩니다. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function(){
        let currentIndex = 0;   //현재 이미지
        
        setInterval(function(){     //3초에 한번씩 실행
            let nextIndex = (currentIndex + 1) % 3; // 1 2 0 1 2 무한반복

            $(".slider").eq(currentIndex).fadeOut(1200);    //첫번째 이미지 사라짐
            $(".slider").eq(nextIndex).fadeIn(1200);        //두번째 이미지 나타남

            currentIndex = nextIndex;  //두번째 인덱값을 현재 인덱값에 저장
        }, 3000);
    });
</script>

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

이번엔 자바스크립트로 구현해보겠습니다. 제이쿼리를 이해했다면 그다지 어렵지 않습니다. 제이쿼리를 자바스크립트로 변환시킨다고 생각하면 됩니다.

우선 원리를 파악하고 넘어가야 합니다. 모든 이미지는 절대값을 한곳에 겹겹히 쌓아 있는 형태입니다. 자바스크립트는 제이쿼리와 달리 다중 선택을 일일이 설정해주어야 합니다. 현재 이미지 let currentIndex = 0;를 설정하고, 모든 이미지를 변수에 저장합니다. 이미지가 한개 이상 있기 때문에 querySelectorAll을 설정합니다. 다중 선택이기 때문에 forEach를 설정하여 모든 이미지에 투명도를 0으로 설정합니다. 그리고 첫번째 이미지만 투명도를 1로 설정합니다.

일정한 간격으로 실행시키는 함수setInterval()를 설정하고, 현재 이미지와 다음 이미지를 통해 첫번째 이미지는 안보이게 하고, 두번째 이미지는 보이게 합니다. slider[0]이라고 쓰면 첫번째 이미지를 말합니다. 0 대신에 currentIndex를 넣어주고, 다음이미지도 똑같이 작업합니다. 이미지 순서를 나타내는 숫자는 0 1 2 0 1 2 0...이렇게 반복시켜 주기 위해서 전체 이미지 갯수 값을 나누어 준 나머지를 구하면 반복적으로 작업할 수 있습니다. 애니메이션이 구현되어야 하기 때문에 transition효과도 추가해주었습니다. 마지막으로 nextIndex의 값을 currentIndex에 넣어주면, 현재 이미지값은 1씩 증가하게 됩니다. 

window.onload = function(){
    let currentIndex = 0;   //현재 이미지
    const slider = document.querySelectorAll(".slider");    //모든 이미지를 변수에 저장
    slider.forEach(img => img.style.opacity ="0");  //모든 이미지를 투명하게
    slider[0].style.opacity = "1";  //첫번째 이미지만 보이게

    setInterval(() => { //3초에 한번씩 실행
        let nextIndex = (currentIndex + 1) % slider.length; // 1 2 0 1 2 무한반복

        slider[currentIndex].style.opacity = "0";   //첫번째 이미지 사라짐
        slider[nextIndex].style.opacity = "1";      //두번째 이미지 나타남
        slider.forEach(img => img.style.transition = "all 1s"); //이미지 애니메이션 추가

        currentIndex = nextIndex; //두번째 인덱값을 현재 인덱값에 저장
    }, 3000);
}

/* 자바스크립트용 CSS */
.sliderWrap > div {
    display: block;
}

3. 마무리

어떤가요? 어렵나요? 페이드 효과 이미지 슬라이드를 완성하였습니다. 사실 원리를 파악하면 제이쿼리나 자바스크립트나 별반 차이는 없습니다. 자바스크립트는 다중 선택이 안되서 조금 불편하긴 하지만 익숙해지면 괜찮습니다. 설명이 어렵거나 도무지 이해가 안된다면 영상을 참고해주세요! 모든 글들은 영상으로도 작업하게 됩니다. 그럼 오늘도 이미지 슬라이더를 마무리하고 두번째 이미지 슬라이더에서 뵙겠습니다. 수고하셨습니다.🤑

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

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바