Tutorial/webd

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

by @webs 2023. 05. 01.

웹디자인 기능사 슬라이드 유형 : S-6

난이도 중급

소스 다운로드

완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기

소개

안녕하세요! 웹스토리보이입니다. 이미지 슬라이드도 마지막 유형입니다. 거의 끝이 보이기 시작했네요! 여러분들도 여기까지 잘 따라오셨는지 궁금하네요! 잘 하고 있으면 댓글 부탁드립니다. 마지막 유형은 조금 까다롭습니다. 아마 웹디기에서 제일 어려운 부분이 아닐까 싶습니다. 위아래 움직이기 위해서는 높이값이 잡혀야 하는데 height값을 퍼센트로 표현하는 건 힘듭니다. 브라우저는 내리면 계속 내려가기 때문에 height: 100%값이 존재하지 않습니다. 물론 부모 박스 높이 값이 있다면 상관은 없지만 기본적으로 100%를 표현하기 힘듭니다. 그래서 vh단위를 사용해서 작업할 것입니다. vh단위는 여러분이 보고 있는 화면을 100등분해서 단위로 표현한 개념입니다. 화면을 기준으로 100vh로 설정하면 높이값을 설정할 수 있습니다. 이 것을 이용해서 작업을 할 것입니다. 아무튼 시작해보겠습니다. 🧐

1. 구조 잡기

이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다.

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

            <section id="contents">
                <div class="banner"></div>
                <div class="notice"></div>
                <div class="gallery"></div>
                <div class="link"></div>
            </section>
            <!-- //contents -->

            <article id="slider">
            </article>
            <!-- //slider -->
        </main>
        <!-- //main -->
        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-1"></div>
                <div class="footer2-2"></div>
            </div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>

* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 100%;           
}
#main {
    width: 100%;
    height: calc(100vh - 120px);
    background-color: #efefef;
    display: flex;
}
#header {
    width: 200px;
    height: 100%;
}
#header h1 {
    width: 100%;
    height: 10%;
    background-color: #e3e3e3;
}
#header nav {
    width: 100%;
    height: 90%;
    background-color: #d9d9d9;
}
#contents {
    width: 400px;
    height: 100%;
}
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #d1d1d1;
}
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #c7c7c7;
}
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #bcbcbc;
}
#contents .link {
    width: 100%;
    height: 15%;
    background-color: #b1b1b1;
}
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #a3a3a3;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #9d9d9d;
}
#footer .footer2 {
    width: 80%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #929292;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #838383;
}

이미지 슬라이드 영역을 작업했습니다. 기존과 다르게 img 태그를 쓰지 않고, 글씨만 나오도록 했습니다.

<article id="slider">
    <div class="sliderWrap">
        <div class="slider s1">
            <span>이미지1</span>
        </div>
        <div class="slider s2">
            <span>이미지2</span>
        </div>
        <div class="slider s3">
            <span>이미지3</span>
        </div>
    </div>
</article>
<!-- //slider -->

우선 푸터 부분의 높이가 120px이기 때문에 전체 높이에서 빼주었습니다. 전체 높이 100% 값이 적용되니 않기 때문에 100vh를 사용합니다. vh 단위는 여러분이 보고 있는 화면을 기준으로 100등분 하여 보여준다고 생각하면 됩니다. 이렇게 화면 화면 크기가 다양해도 100vh를 설정하면 높이 값이 꽉차게 됩니다. 다 똑같이 보이는 효과가 생깁니다. 디바이스 별로 높이가 달라도 꽉차게 보여주는 건 똑같습니다. sliderWrap에 높이 값을 400vh 설정했습니다. 스크립트로 복사하여 추가한 것까지 계산에 넣었습니다. 그리고 각 이미지는 100vh로 설정했습니다. 모든 이미지는 각각 백그라운드 설정을 하고 화면 크기에 따라 잘 보이게 하기 위해서 cover, center, no-repeat 속성을 넣어주었습니다.

/* slider */
#slider {
    overflow: hidden;
    height: calc(100vh - 120px);
}
.sliderWrap {
    width: 100%;
    height: 300vh;
}
.sliderWrap .slider {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.sliderWrap .slider.s1 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg);
}
.sliderWrap .slider.s2 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg);
}
.sliderWrap .slider.s3 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider06.jpg);
}
.sliderWrap .slider img {
    vertical-align: top;
}
.sliderWrap .slider span {
    position: absolute;
    left: 50%;
    top: calc(50% - 60px);
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.3);
    padding: 10px 20px;
}

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

스크립트는 기존 유형과 거의 유사합니다. 그래도 다시 한번 복습해보겠습니다. 현재 이미지를 0으로 설정하고, 전체 이미지, 각각의 의미지를 변수로 설정했습니다. 첫번째 이미지를 복사해서 마지막에 넣어주고, setInterval()를 이용해서 3초에 한번씩 실행하도록 설정하였습니다. 현재 이미지는 1씩 증가하도록 ++를 설정하고, 전체 이미지한테 위쪽으로 움직이도록 animate를 설정했습니다. 마지막 이미지가 왔을 때에는 애니메이션을 순간 정지시키고, 현재 이미지도 초기화 했습니다.

<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(() => {
            currentIndex++;     //현재 이미지를 1씩 증가
            $(".sliderWrap").animate({marginTop: -100 * currentIndex + "vh"}, 600);

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

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

자바스크립트 역쉬 기존과 동일합니다. 그래도 한번 살펴보겠습니다. 전체 이미지, 현재 이미지를 설정하고, 첫 번째 이미지를 복사하고 마지막에 추가하였습니다. setInterval을 설정하고, 애니메이션 설정을 위해 transition을 추가했습니다. 그리고 이미지가 마지막일 때 모든 값을 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++;
        sliderWrap.style.transition = "all 0.6s";
        //    sliderWrap.stype.transform = "translateY(-100%)"; 
        sliderWrap.style.transform = `translateY(-${currentIndex * 100}vh)`; 

        if(currentIndex == slider.length){
            setTimeout(() => {
                sliderWrap.style.transition = "0s";
                sliderWrap.style.transform = "translateY(0)";
                currentIndex = 0;
            }, 700)
        }
    }, 3000)
}

3. 마무리

이상으로 마지막 이미지 슬라이드까지 완성했습니다. 웹디자인기능사 2023버전을 만들어 달라고 의뢰한 분들이 많아서, 이번엔 좀 더 제대로 만들어 볼려고 노력을 했습니다. 그렇다 보니 내용도 많아지고, 시험 범위보다 더 많아진 내용 같아서 조금 걱정되긴 합니다. 다른 사람이 만든 웹디기 소스도 참고를 했지만, 그냥 시험을 위한 소스 같아서, 저는 그렇게 하지 않았습니다. 비록 소스를 외우기 힘들고, 복잡해 보여도, 최대한 실무에서 활용할 수 있는 소스로, 가독성이 좋은 소소를 재작업을 했습니다. 여러분한테 도움이 됐으면 좋겠습니다. 갑자기 끝난 분위기 같은데, 다음 스크립트에서 뵙겠습니다. 아! 작업하다가 이상한 부분이나 궁금한 사항은 언제든지 댓글 달아주세요! 잘 성공하신 분들도 달아주세요! 굳럭 🤥

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

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

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

소개

1. 구조 잡기

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

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

3. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

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

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

소개

1. 구조 잡기

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

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

3. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다