자바스크립트 슬라이드 효과 슬라이드 효과 6 슬라이드 이펙트 중 닷메뉴와 버튼이 있는 효과입니다. 구조 prev next 버튼과 닷메뉴를 만들어주었습니다. 스크립트_선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지 const sliderDot = sliderWrap.qu..

오늘은 위쪽으로 슬라이드가 넘어가는데, 3번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 5 슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.(연속적) 구조 스크립트_선택자 및 변수 설정하기 슬라이드 효과 4에서는 clientWidth값을 통해 이미지 가로값을 구했으니 이번엔 clientHeight를 통해 이미지의 세로값을 구해줍니다. 그리고 CSS 속성중에서도 display: flex; 속성을 없애줍니다. 스크립트_javascript -sliderInner 변수에 있는 DOM 요소에 sliderClone 변수에 저장된 첫 번째 이미지를 복사하여 마지막 자식으로 추가합니다. 이를 통해 슬라이딩이 끝난 후 첫 번째 이미지가 다시 ..

오늘은 왼쪽으로 슬라이드가 넘어가는데, 2번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 4 슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다.(연속적) 구조 구조는 슬라이드 이펙트 2번째와 동일합니다. 스크립트_선택자와 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider ..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 3 슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다. 슬라이드 2번과 거의 동일한 구조와 스크립트지만, CSS 속성 중 바뀌는 부분이 있습니다. 구조 CSS에서 바뀌는 요소 .slider__inner { /* 이미지 움직이는 영역 */ flex-wrap: wrap; width: 4000px; height: 450px; } 2번에선 사진을 가로로 정렬하기 위해 display: flex를 사용했지만, 이번엔 세로로 움직이므로 flex를 제거해줍니다. 스크립트_javascript 2번 방법과 동일하지만, translateX를 translateY로, width값 800을 height..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 2 슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다. 구조 이번에 slider를 slider__inner안에 감싸서 작업했습니다. 스크립트_ javascript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.que..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 1 슬라이드 이펙트 중 가장 기본적인 트랜지션 효과를 줘보겠습니다. 구조 스크립트_javascript // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 let sliderInterva..

자바스크립트 퀴즈 이펙트(일곱 번째) 만들기_보충의 보충보충 이어서 작업해보겠습니다. 스크립트_문제와 이미지 없는 곳 처리 // 문제 설명 없는 곳 제거 document.querySelectorAll(".cbt__question__desc").forEach(desc => { if(desc.innerText === "undefined"){ desc.classList.add("hide"); } }); // 이미지 없는 곳 제거 document.querySelectorAll(".cbt__question__img").forEach(img => { let src = img.querySelector("img").src; if(src.includes("undefined")){ img.classList.add("hid..

자바스크립트 퀴즈 이펙트(일곱 번째) 만들기_보충 저번에 이어서 스크립트를 마저 진행해보겠습니다. 스크립트_보기 체크, omr 체크 // 보기 체크 const answerSelect2 = (elem) => { const answer = elem.value; const answerNum = answer.split("_"); const select = document.querySelectorAll(".cbt__omr .omr"); // 전체 문항 수 100개 const label = select[answerNum[0]].querySelectorAll("input"); // 보기 4개 label[answerNum[1]-1].checked = true; const answerInputs = document.qu..