Web's study ! 지선

// slider04 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 let currentIndex = 0; let sliderCount = slider.length; // 이미지 갯수 let sliderHeight = sliderImg.offsetHeight // sli..

// 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개의 이미지 저장 let currentIndex = 0; //첫 번째 이미지(현재 보이는 이미지) let sliderCount = slider.length; //이미지 갯수 let sliderWidth = sliderIm..

// slider02 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 let currentIndex = -1; //첫 번째 이미지(현재 보이는 이미지) let sliderCount = slider.length; //이미지 갯수 setInterval(()=>{ console..

//setInteval //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentIndex = 0; //현재 보이는 이미지 let sliderCount = slider.length; //이미지 갯수 setInterval(() => { let nextIndex =(currentIndex + 1) % 5; //1 2 3 4 0 1 2 3 4 0... 5로 나눠서 나머지 값만 나오게. slider[currentIndex].style..

const cssProperty = [ {num: 5, name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num: 9, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {num: 1, name: "animation-duration", de..

const searchBox = document.querySelectorAll(".search span"); //조회수 버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //목록 보여주기 let listHTML =''; //HTML에 보여줄 리스트를 전역 변수로 지정. function upDataList(list){ //목록 보여주기 함수. listHTML =''; for(const data of list){ //어디에 있는 목록인지 listHTML += `${data.name} : ${data.desc} ${data.view}`;..

const cssProperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 양식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 사용할 수 있는 양식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //CSS속성 리스트 const cssCount = document.querySelector(".count em") //속성 갯수 //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function // searchBox.addEventListener("click", function(){ // alert("ddd"); // }); cssList.forEach((li, index) => { li.classL..