웹디자인기능사) 슬라이드 페이드 효과 유형

오늘은 웹디자인 기능사 실기 이미지 슬라이드 페이드 효과 유형에 대해 알아보도록 하겠습니다.
먼저 html부터 작업을 해주도록 할건데요.
html 전체 코드부터 보도록 하겠습니다.

<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을 작업해줍니다.

• <article id=”slider”>: 슬라이더를 감싸는 부모 요소를 나타냅니다. ID가 “slider”로 지정되어 있습니다.
• <div class=”sliderWrap”>: 슬라이더 아이템들을 감싸는 컨테이너입니다. 슬라이더 아이템들이 이 안에 위치합니다.
• <div class=”slider s1”>, <div class=”slider s2”>, <div class=”slider s3”>: 각각의 슬라이더 아이템을 나타냅니다. 클래스 “slider”와 “s1”, “s2”, “s3”으로 구분되어 있습니다. “s1”, “s2”, “s3”은 각각의 슬라이더를 식별하는 데 사용됩니다.
• <img>: 각 슬라이더 아이템에 포함된 이미지를 나타냅니다. “src” 속성에 이미지의 URL이 지정되어 있으며, “alt” 속성은 이미지에 대한 설명을 제공합니다.
• <span>: 이미지 위에 텍스트를 표시하기 위한 요소입니다. 각 이미지에 대한 설명을 표시하는 용도로 사용됩니다.
• 이러한 마크업을 통해 이미지 슬라이더를 구성할 수 있으며, CSS와 JavaScript를 추가하여 슬라이더를 스타일링하고 동작하도록 할 수 있습니다.
  

다음으로 이미지 슬라이더를 스타일링하는 CSS 코드에 대해 알아보도록 하겠습니다. 먼저 전체 코드부터 보고 오시죠.

/* 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;
}

각 코드별로 자세하게 알아보도록 하겠습니다.

/* slider */
.sliderWrap {
    position: relative;
}

• .sliderWrap 클래스는 슬라이더 컨테이너를 나타냅니다. position: relative; 속성은 하위 요소들을 상대적으로 배치할 수 있도록 합니다.

.sliderWrap > div {
    display: none;
}

• .sliderWrap > div는 슬라이더 아이템들을 선택합니다. display: none; 속성은 초기에 모든 슬라이더 아이템을 숨깁니다. .sliderWrap > div:first-child는 첫 번째 슬라이더 아이템을 선택하여 보이도록 합니다.

.sliderWrap > div:first-child {
    display: block;
}

• .sliderWrap .slider는 각 슬라이더 아이템을 나타냅니다. position: absolute; 속성은 아이템들을 절대 위치로 배치합니다. left: 0; top: 0;은 슬라이더 아이템을 컨테이너의 왼쪽 상단에 위치시킵니다.

.sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
}

• .sliderWrap .slider img는 슬라이더 아이템에 포함된 이미지를 나타냅니다. ````css .sliderWrap .slider img { vertical-align: top; }
• vertical-align: top;은 이미지의 세로 정렬을 상단으로 지정합니다.
• 이미지에 여백이 생기게 되는데 그 부분은 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;
}

• .sliderWrap .slider span은 이미지 위에 표시되는 텍스트를 나타냅니다.
• position: absolute; 속성은 텍스트를 절대 위치로 배치합니다.
• left: 50%; top: 50%;는 텍스트를 슬라이더 아이템의 가운데에 위치시킵니다.
• transform: translate(-50%, -50%);는 텍스트를 가운데로 정렬합니다.
• background-color, padding, color 속성을 사용하여 텍스트의 스타일을 지정합니다.
  

마지막으로 제이쿼리를 사용해 스크립트 작업을 해주도록 하겠습니다. 제이쿼리를 사용하여 이미지 슬라이더를 자동으로 전환하는 기능을 구현합니다.

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);
}

• window.onload = function() { … }: 페이지가 로드되면 실행될 함수를 정의합니다. 이 함수 안에 슬라이더 전환 로직이 포함되어 있습니다.
• let currentIndex = 0;: 현재 표시되고 있는 이미지의 인덱스를 저장하는 변수입니다.
• const slider = document.querySelectorAll(“.slider”);: 모든 슬라이더 이미지 요소를 선택하여 slider 변수에 저장합니다.
• slider.forEach(img => img.style.opacity =”0”);: 모든 슬라이더 이미지를 숨기기 위해 opacity를 0으로 설정합니다.
• slider[0].style.opacity = “1”;: 초기에 첫 번째 슬라이더 이미지를 보이도록 설정합니다.
• setInterval(() => { … }, 3000);: 3초마다 반복 실행되는 함수를 설정합니다. 이 함수 안에 이미지를 전환하는 로직이 포함되어 있습니다.
• let nextIndex = (currentIndex + 1) % slider.length;: 다음에 표시될 이미지의 인덱스를 계산합니다. % slider.length는 인덱스가 슬라이더 이미지 개수를 초과하지 않도록 해줍니다.
• slider[currentIndex].style.opacity = “0”;: 현재 이미지를 숨깁니다.
• slider[nextIndex].style.opacity = “1”;: 다음 이미지를 표시합니다.
• slider.forEach(img => img.style.transition = “all 1s”);: 모든 이미지에 1초 동안의 트랜지션 효과를 적용합니다.
• currentIndex = nextIndex;: 다음 이미지로 인덱스를 업데이트합니다.
• 이렇게 하면 페이지가 로드되면 슬라이더가 자동으로 전환되며, 3초마다 다음 이미지가 표시됩니다.