본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

JS 응용하기32

#검색결과

총 32개를 찾았어요 ^^b

/

슬라이드 이펙트_02 : 이미지를 슬라이드 하는 3가지 방법! 슬라이더 이펙트 02 슬라이더 이펙트를 Javascript/GSAP/Jquery를 통해 구현해보도록 하겠습니다~ Javascript 개념 소개 객체 기반의 스크립트 언어로 웹 브라우저에서 해석되는 인터프리터 언어입니다. 하단의 코드를 통해 gsap로 이미지 슬라이드를 구현합니다. const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentIndex = 0; sliderInner.style.transition = "all 0.8s" setInterval(()=>{ currentIndex = (currentIndex..

슬라이드 이펙트_01 : 이미지를 한장씩 바꿔보자~ 슬라이더 이펙트 01 한장씩 넘어가는 슬라이드 이미지를 구현해보겠습니다. JS코드 정해진 이미지의 길이만큼 정보를 받아와 한장씩 이미지를 넘겨주는 스크립트를 구현해보겠습니다 번외. 이번에 사용한 다음 이미지를 보여줄 값을 sliderCount로 나눠 구한 이유는 만약 sliderCount가 5가 나왔을때를 가정해본다면 2를 5로 나누어도 몫은 0 나머지는 2 나눌수가 없어서 그대로 나머지가 되는 것이며, 5이상의 수일때만 나눌 수가 있기 때문에 1부터 4까지는 5보다 작아서 나눌 수가 없으므로 몫이 아닌 그대로 나머지가 됩니다. let nextIndex = (currentIndex + 1) % sliderCount; 우선 이미지 슬라이드가 구현된 만큼만 반복하기 위해서는 아래와 같은 방법이 필요합니다. ..

퀴즈 이펙트_06 Quiz Effect 06 여러 문제에 정답을 체크하고, 그 답이 맞았는지 틀렸는지 구분하고, 총 몇개 중 몇개 맞았는지 구분하여 퀴즈 이펙트 05번을 구현해보겠습니다 완성 예시 HTML 데이터 및 기본 구조를 아래와 같이 제작해줍니다. HTML 구조 전체보기 ${question.answerType} 정답입니다! 틀렸습니다! 다음 문제 보기 🫠 Javascript quizScore 변수에 정답을 저장해서 맞은 갯수가 몇개인지 알려주는 문제 출제 예제를 만들어보겠습니다! 확인 버튼을 통해 다양한 성적 정보 알려주기 하단의 스크립트를 통해 확인 버튼을 누르면 맞은개수, 총점, 탈락여부 알려주게 구성하였습니다. // 정답 확인 버튼 const answerQuiz = () => { if(quizCount ===..

퀴즈 이펙트_05 Quiz Effect 05 여러 문제에 정답을 체크하고, 그 답이 맞았는지 틀렸는지 구분하고, 몇개 맞았는지 구분하여 퀴즈 이펙트 05번을 구현해보겠습니다 완성 예시 HTML 데이터 및 기본 구조를 아래와 같이 제작해줍니다. HTML 구조 전체보기 Quiz 객관식(여러문제) 유형 1 2 3 4 5 6 to_before@naver.com Javascript quizScore 변수에 정답을 저장해서 맞은 갯수가 몇개인지 알려주는 문제 출제 예제를 만들어보겠습니다! //문제정보 const quizInfo = [ { //01번 answerType: "웹디자인 기능사 2014년 04회", answerNum: "1", answerAsk: "주전자, 냉장고, 자동차를 디자인하는 디자인 영역은?", answerChoi..

이전 1 ··· 3 4 5 6 7 8 다음

728x90

#HASH_TAGS

-

1

멈추지 않는 ' j ' 시리-즈 코딩 오늘 조업 마감했습니다. 울적하니 꽃을 달아봤습니다 오징어 1Kg 당 3000원 선택해주세요 scroll-snap-align Method 제이쿼리 코드 숙제가 다양해서 너무 좋아요 이건 또 뭐람 화사한가요? 메서드 HTML scroll-snap-type 공부 오늘도 웹표준은.. 슬라이드 결과 : 월요일 테스트 다크모드 테스트테스트 ImageSlideEffect 필터선택자 오징어 한마리 수확 완료! 오징어 두마리 포획 완료 JQuery 내일은 즐거운 월요일 오늘은 내가바로 오징어!

티스토리툴바