Gwni Lab GwniLab

setInterval()을 이용한 이미지 슬라이드 - 위로 움직이기 //설명. 참고사항. 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 =..

setInterval()을 이용한 이미지 슬라이드 - 연속적으로 넘기기 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 (틀) const slider = document.querySelectorAll(".slider") // 5개의 이미지가 저장 // .slider__inner > div:first-child let currentIndex = 0; let sliderCou..

setInterval()을 이용한 이미지 슬라이드 - 좌로 움직이기 //설명. 참고사항. let currentIndex = -1; //첫 번째 이미지 (현재 보이는 이미지), -1로 주면 트랜지션이 잘 된다. let sliderCount = slider.length; //이미지 갯수 setInterval(()=>{ console.log(currentIndex); currentIndex = (currentIndex+1)%5; //currentIndex의 데이터 변경해서 01234가 나오게 if((currentIndex

setInterval()을 이용한 이미지 슬라이드 - 페이드 효과 //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로 나눠서 나..

const sreachBox = document.querySelectorAll(".search span"); //버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count"); //CSS 속성 갯수 //데이터 출력 const updateList = function(){ //데이터 출력 함수를 변수로 지정해서 재활용 하겠음. let listHTML = ''; //리스트 출력 초기값 설정. cssProperty.forEach((data,index)=>{ //forEach를 이용해서 데이터와 인덱스를 불러옴 listHTML += `${data.num}. ${data.na..

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 속성은 애니메이션이 시작되는 시간을 설정합니다."}, . . 생략. ] const searchBox = document.querySelector("#search-box"); //서치박스를 변수로 지정 const cssCount = document.querySelector(".count"); //갯수가 출력되는 요소를 변수로 지정 const ..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //1. 처음에 모든 데이터 보여주기 cssList.forEach((li, index) => { //li(element), index(순서- 갯수) li.classList.add("show"); //모든 li를 보여준다. cssCount.innerText = index +1; //인덱스는 0번째 부터 세므로 1를 더해준다. }) //알파벳을 클릭하면 클..