Gentleman'study 젠틀맨

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn"); // next,prev 버튼 const sliderDot = document.querySelector(".slider__..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn"); // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev"); // pr..

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 sliderHegiht = sliderImg.offsetHegiht // sliderImg의 heig..

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 = sliderImg.offsetWidth // sliderImg의 width ..

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(()=>{ // currentIndex =..

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;// 5로 나눈 나머지값(0~4)으로 표현 slider[cu..

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 cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "19", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "24", name: "ani..

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-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 ..

const searchBox = document.querySelectorAll(".search span"); // 알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); // 속성 리스트 const cssCount = document.querySelector(".count em"); // 속성 갯수 const reset = document.querySelector(".search .reset")// 리셋(all) 버튼 // 모든 데이터 보이기 cssList.forEach((ele, index) => { ele.classList.add("show"); cssCount.innerHTML = index + 1; }); // 버튼을 클릭하면 클릭한 ..

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.classList.add("show");// 각각의 요소의 클래스 show 추가 cssCount.innerHTML = index + 1;// cssCount 에 인덱스값 + 1 입력..

const searchBox = document.querySelector("#search-box");// search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li");// 다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => { // input을 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; // 사용자가 입력한 데이터 저장소 변수에 저장 // console.log(searchWord); cssList.forEach(el => {// 다수의 li한테 적용 console.log(el.dataset.name) const cssName = el.d..