근혁 study 공부정리

{ const sliderWrap = document.querySelector(".slider__wrap") //슬라이드 전체 영역 const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider") const sliderBtn = document.querySelector(".slider__btn") //버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev") //뒤로 const..

{ const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider") let currentIndex = 0; let sliderCount = slider.length; //이미지 갯수 let sliderHeight = sliderImg.offsetHeight; //이미지 가로값 let sliderClone = slide..

{ const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider") let currentIndex = 0; let sliderCount = slider.length; //이미지 갯수 let sliderWidth = sliderImg.offsetWidth; //이미지 가로값 let sliderClone = sliderI..

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

{ // 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 되도록 1%(나머지) 5를 써서 slider[currentIn..

{ const searchBox = document.querySelectorAll(".search span") //버튼 const cssList = document.querySelector(".list ul") //속성 리스트 const cssCount = document.querySelector(".count") //css 갯수 //데이터 출력 const updataList = function() { let listHTML = ''; cssProperty.forEach((data, index) => { listHTML += `${data.num}. ${data.name} : ${data.desc}`; //li목록 보이게 cssCount.innerHTML = `전체 목록 갯수 : ${index+1}개`;..

{ //css 목록 보여주기 function updataList(list) { //함수로 묶어줌 listHTML = ""; //+눌렀을때 리스트추가 안되게 작업 for(const data of list){ //cssProperty를 for문을 이용해 계속 반복 listHTML += `${data.name} : ${data.desc} ${data.view}`; //listHtml로 화면에 cssProperty를 보이게 함 } cssList.innerHTML = listHTML; } updataList(cssProperty) //함수 호출 //버튼 클릭하기 searchBox.forEach(span => { //searchBox 버튼을 클릭했을때 span.addEventListener("click", ()=>..

{ const searcBox = document.querySelector("#search-box"); //검색하기 변수에 저장 const cssCount = document.querySelector(".count"); //전체 목록 갯수 변수에 저장 const cssDesc = document.querySelector(".desc"); //css 속성 설명 변수에 저장 const cssList = document.querySelector(".list"); //css 속성 목록 변수에 저장 // CSS 속성 값/전체 갯수 출력하기 cssProperty.map((element, index) => { cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개"; //css 속성..