꿈트(GGUMT)

자바스크립트를 이용해 슬라이더 효과 만들기 SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기 아래쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기 완성화면 ✈00.HTML Javascript Slide Effect03 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com 🏴🏳‍🌈 ✈01.CSS 🏴🏳‍🌈 ✈03.선택자 🏴. appendChild() 메서드는 DOM(Document Object Model)에서 사용되며, 주어진 부모 노드에 새로운 자식 노드를 추가하는데 사용됩니다. // 부모 요소 선택 const parent = document.getElementById('parent-element'); // 새로운 자식 요소 생성 const child = document..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 ✈00. html Javascript Slide Effect02 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com ✈00. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 움직이는 이미지 */ disp..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 세가지 방식으로 스크립트를 적용해 보았습니다 🏳‍🌈00. 공통 선택자 부분 ✈01. JAVASCRIPT ✈02. GSAP 🏴. GSAP CDN소스를 가져와 적용합니다. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js ✈03. jQuery //jQuery CDN 🏴. jQuery CDN소스를 가져와 적용합니다. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jq..