study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect03.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect02.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect06.html const cssProperty = [ {num: 1, name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num: 4, name: "animation-direction", desc: "animation-d..

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect01.html const sliderWrap = document.querySelector(".slider__wrap");//변수 sliderWrap에 클래스 slider__wrap 저장 const sliderImg = document.querySelector(".slider__img");//변수 sliderImg에 클래스 slider__img 저장 const slider = document.querySelectorAll(".slider");//변수 slider에 클래스 slider 저장 let currentIndex = 0; //현재 보이는 이미지 let sliderCount = s..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect05.html const cssProperty = [//cssProperty에 데이터 저장 {view:"10", name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {view:"20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view:"15", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view:"11", name: "animati..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect04.html const cssProperty = [//cssProperty에 데이터 저장 {name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect03.html const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트들 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => {//cssList의 li(CSS속성 리스트들), index(CSS속성 갯수) 값 설정 li.classList.add("show");//..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect02.html const searchBox = document.querySelector("#search-box");// searchBox 변수에 저장 const cssList = document.querySelectorAll(".list ul li");// 다수의 li를 cssList에 저장 const cssCount = document.querySelector(".count em");// em을 cssCount에 저장 cssList.forEach((element, index) => {//cssList의 element, index 값 설정 element.classList.add("s..