03. 이미지 슬라이드 : 연속적으로 좌로 움직이기

        hljs.highlightAll();
        modal();
        tabMenu();
        
    //slider03
        const sliderWrap = document.querySelector(".slider_wrap") //전체
        const sliderImg = document.querySelector(".slider_img")      //이미지 (한칸만) 보이는 영역
        const sliderInner = document.querySelector(".slider_inner")    //이미지 움직이는 영역 
        const slider = document.querySelectorAll(".slider")             //5개의 이미지 저장 console.log(slider): 5개 저장한 이미지 확인 가능

        //.slider__inner > div:first-child
        //이미지 이어 붙여주기
        let currentIndex = 0;
        let sliderCount = slider.length //이미지 갯수
        let sliderWidth = sliderImg.offsetWidth;        //이미지 가로 값 (가져오기)
        let sliderClone = sliderInner.firstElementChild.cloneNode(true);   //첫번째 이미지 복사 | *irstElementChild *cloneNode - 요소 객체
        sliderInner.appendChild(sliderClone); //첫 번째 이미지를 마지막에 넣어줌 | *appendChild - 요소 객체

        // console.log(sliderWidth)
        
        function sliderEffect(){
            //0 1 2 3 4 0 1 2 3 4..... 출력
            // currentIndex = (currentIndex+2) % 6 //짝수만 출력: 0 2 4
            // console.log(currentIndex)

            //이미지 슬라이드
            currentIndex++;
            sliderInner.style.transition = "all 0.3s";
            sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";  //*(- "+에 공백 들어가서 안됨. 오류X오타X
            // -(가로값)
            // sliderInner.style.transform = "translateX(-800px)";
            // sliderInner.style.transform = "translateX(-1600px)";
            // sliderInner.style.transform = "translateX(-2400px)";
            // sliderInner.style.transform = "translateX(-3200px)";
            // sliderInner.style.transform = "translateX(-4000px)";
            // sliderInner.style.transform = "translateX(-4800px)";

            //마지막 사진에 갔을 때 
            if(currentIndex ==  sliderCount) { //6번이 됐을 때 
                setTimeout(()=>{
                    //이미지 초기화                     currentIndex = 0;
                    sliderInner.style.transform = "0s";
                    sliderInner.style.transform = "translateX(-0px)";
                }, 300);
                currentIndex = 0;
            }

        }
        setInterval(sliderEffect,2000) // 따로 빼서 만듦