웹디자인 기능사 슬라이드

카테고리 없음

웹디자인 기능사 슬라이드

^. ̫ .^ 2023. 4. 30. 13:57

728x90

웹디자인 기능사를 대비한 슬라이드 유형 3가지를 만들어 보았습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <div class="container">
            <header id="header">
                <div class="logo"></div>
                <nav class="nav">
                    <ul>
                        <li><a href="#">메뉴1</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴1-1</a></li>
                                <li><a href="#">서브메뉴1-2</a></li>
                                <li><a href="#">서브메뉴1-3</a></li>
                                <li><a href="#">서브메뉴1-4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">메뉴2</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴2-1</a></li>
                                <li><a href="#">서브메뉴2-2</a></li>
                                <li><a href="#">서브메뉴2-3</a></li>
                                <li><a href="#">서브메뉴2-4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">메뉴3</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴3-1</a></li>
                                <li><a href="#">서브메뉴3-2</a></li>
                                <li><a href="#">서브메뉴3-3</a></li>
                                <li><a href="#">서브메뉴3-4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">메뉴4</a>
                            <ul class="submenu">
                                <li><a href="#">서브메뉴4-1</a></li>
                                <li><a href="#">서브메뉴4-2</a></li>
                                <li><a href="#">서브메뉴4-3</a></li>
                                <li><a href="#">서브메뉴4-4</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header>
            <main id="main">
                <section id="slider__wrap">
                    <div class="slider__img">
                        <div class="slider__inner">
                            <div class="slider">
                                <img src="../img/slider1.jpg" alt="">
                            </div>
                            <div class="slider">
                                <img src="../img/slider2.jpg" alt="">
                            </div>
                            <div class="slider">
                                <img src="../img/slider3.jpg" alt="">
                            </div>
                        </div>
                    </div>

                </section>
                <section id="contents">
                    <div class="notice"></div>
                    <div class="banner"></div>
                    <div class="go"></div>
                </section>
            </main>
            <footer id="footer">
                <div class="flogo"></div>
                <div class="copyright"></div>
                <div class="sns"></div>
            </footer>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 1920px;
    height: 800px;
    margin: 0 auto;
}
.container {
    width: 1200px;
    margin: 0 auto;
}
#header {
    display: flex;
    height: 100px;
}
.logo {
    width: 30%;
    background-color: #b1e2ff;
}
.nav {
    width: 70%;
    background-color: rgb(143, 220, 255);
    padding: 30px 40px;
}
.nav > ul {
    display: flex;
    justify-content: right;
}
.nav > ul > li {
    position: relative;

}
.nav > ul > li > a{
    background-color: #c6eaff;
    display: block;
    padding: 10px 40px;
}
.nav > ul > li > a:hover {
    background-color: #607da3;
}
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 40px;
    background-color: #ccc;
    width: 100%;
    display: none;
}
.nav > ul > li > ul > li {}
.nav > ul > li > ul > li > a{
    padding: 10px;
    display: block;
}
.nav > ul > li > ul > li > a:hover {
    background-color: #37b9f5;
}     
#contents {
    display: flex;
}
.notice {
    width: 35%;
    height: 200px;
    background-color: #3186f5;
}
.banner {
    width: 35%;
    height: 200px;
    background-color: rgb(50, 149, 248);
}
.go {
    width: 35%;
    height: 200px;
    background-color: rgb(8, 134, 252);
}
#footer {
    display: flex;
}
.flogo {
    width: 20%;
    height: 100px;
    background-color: rgb(170, 213, 253);
}
.copyright {
    width: 60%;
    height: 100px;
    background-color: rgb(151, 197, 250);
}
.sns {
    width: 20%;
    height: 100px;
    background-color: rgb(113, 185, 253);
}
a {
    text-decoration: none;
    color: #000;
}
li {
    list-style: none;
}

유형1. 아래에서 위로 올리는 슬라이드

slider 부분 css

#slider__wrap {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {  
    position: relative; 
    height: 300px;
    overflow: hidden;
}
.slider__inner{  
    display: flex;
    flex-wrap: wrap;
    height: 900px;
}
.slider { 
    position: relative;
    width: 100%;
    height: 300px;
}

각각 영역을 설정해줍니다.

slider__img overflow:hidden을 주어 넘치는 이미지들을 보이지 않게 설정해줍니다.

슬라이드script

const sliderWrap = document.querySelector("#slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");     
        const sliderInner = sliderWrap.querySelector(".slider__inner"); 
        const slider = sliderWrap.querySelectorAll(".slider");          

        let currentIndex = 0;             
        let sliderCount = slider.length;    
        let sliderInterval = 1000;          

 
        sliderInner.style.transition = "all 0.6s"

        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;   

            console.log(currentIndex);

            sliderInner.style.transform = "translateY("+ -300 * currentIndex + "px)";
        }, sliderInterval);

slider inner가 움직이는 영역이므로 상하 Y축으로 움직일 수 있도록 translateY() 함수를 사용하여 이동 거리를 설정하며, -300 * i로 각각의 슬라이드를 구분합니다.
다음으로, sliderInner 요소에 transition 속성을 설정하여 슬라이드 이동 시의 애니메이션을 추가합니다.
그리고, setInterval() 함수를 사용하여 슬라이드 쇼를 자동으로 전환합니다.
currentIndex 변수를 사용하여 현재 보여지는 슬라이드의 인덱스를 저장하고, sliderCount 변수를 사용하여 전체 슬라이드의 개수를 저장합니다.
currentIndex 변수를 증가시키면서 슬라이드의 위치를 변경합니다.
마지막으로, sliderInterval 변수를 사용하여 슬라이드 전환 간격을 설정합니다.
setInterval() 함수를 사용하여 일정 시간 간격으로 슬라이드가 자동으로 전환되도록 합니다.

유형2. 좌에서 우로 넘기는 슬라이드

slider 부분 css

#slider__wrap {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {   
    position: relative; 
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.slider__inner{ 
    display: flex;
    flex-wrap: wrap;
    width: 3600px;
    height: 300px;
}
.slider {   
    position: relative;
    width: 1200px;
    height: 300px;
}

#slider__wrap에 display:flex를 주어 가로로 이미지들을 나열시킵니다.

각각 영역을 설정해주고 slider__img overflow:hidden을 주어 넘치는 이미지들을 보이지 않게 설정해줍니다.

slider__inner에 모든 이미지들이 나열된 총 width값을 설정해줍니다.

슬라이드 script

 const sliderWrap = document.querySelector("#slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");     
        const sliderInner = sliderWrap.querySelector(".slider__inner"); 
        const slider = sliderWrap.querySelectorAll(".slider");          

        let currentIndex = 0;             
        let sliderCount = slider.length;    
        let sliderInterval = 1000;          

        sliderInner.style.transition = "all 0.6s"

        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;    //1 2 3 4 0 1 2 3 4 0

            console.log(currentIndex);

            sliderInner.style.transform = "translateX("+ -1200 * currentIndex + "px)";
        },sliderInterval);

위 유형에서 좌측으로 움직이기 때문에 가로이므로 Y축을 X축으로 바꿔주었습니다. 그리고 이미지의 width값으로 숫자를 바꾸면 이미지 크기 만큼 넘어갑니다.

유형3.위에서 아래로 내리는 슬라이드

slider부분 css

#slider__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}
.slider__inner {
    position: relative;
    height: 300px;
    vertical-align: top;
    transform: translateY(-200%);
}
.slider { 
    position: relative;
    height: 300px;
}
.slider img {
    height: 300px;
}

슬라이드 되어 보이는 이미지들은 모두 .slider__inner 요소 내부에 들어있는데, 높이는 300px이고, translateY(-200%);를 적용했기 때문에 화면에서 위쪽으로 600px만큼 이동하게 됩니다.이렇게 하면 세번째 이미지부터 나옵니다.

각각 영역을 설정해주고 slider__img overflow:hidden을 주어 넘치는 이미지들을 보이지 않게 설정해줍니다.

슬라이드 script

 const sliderWrap = document.querySelector("#slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");     //보여지는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
        const slider = sliderWrap.querySelectorAll(".slider");          //개별 이미지

        let currentIndex = 0;               
        let sliderCount = slider.length;    
        let sliderInterval = 1000;          

        
        sliderImg.style.transition = "all 0.6s"

        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;    

            sliderImg.style.transform = "translateY("+ 300 * currentIndex + "px)";
        }, sliderInterval);

맨 첫번째 유형과 반대 방향이므로 -를 빼줍니다. 이렇게 하면 방향은 위에서 아래로 슬라이드가 올라갑니다.

나머지는 전부 위와 동일합니다.

현재글웹디자인 기능사 슬라이드

300x250

GIT 블로그

Loading data ...

Today :
Yesterday :

코딩공부