babydevelopbabydevelop

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 sliderDot = document.querySelector(".slider__d..

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 = document.querySelector(".prev"..

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; //이미지 세로값 let ..

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; //이미지 가로값 let sl..

setInterval(() => { console.log(currentIndex); // currentIndex = (currentIndex + 1) % 5; // if(currentIndex < silderCount) { //if문으로 currentIndex값 설정 결괏값 0,1,2,3,4 // currentIndex++; // } else { // currentIndex = 0; // } //삼항연산자로 currentIndex값 설정 결괏값 0,1,2,3,4 (currentIndex < sliderCount - 1) ? currentIndex++ : currentIndex = 0; // sliderInner.style.left = "0px" //800 * 0 // sliderInner.style.le..

const cssProperty = [ {num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다."}, {num: 2, name: "align-items", desc: "align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다."}, {num: 3, name: "align-self", desc: "align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다."}, {num: 4, name: "all", desc: "all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다."}, {num: 5, name: "animation", desc: "animation 속성은 애니메이..

const sliderWrap = document.querySelector(".slider__wrap");//이미지 전체 영역 const sliderImg = document.querySelector(".slider__img");//이미지 움직이는 영역 const slider = document.querySelectorAll(".slider");//5개의 이미지 저장 let currentIndex = 0; //첫번째 이미지 (현재 보이는 이미지) let sliderCount = slider.length; //이미지 갯수 setInterval(() => {//일정한 시간 간격으로 작업을 수행하기 위해서 사용 let nextIndex = (currentIndex + 1) % 5;//(currentIndex ..

const cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: " animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "40", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "10", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "50", name: "anim..