kimyws

■ GSAP○ GSAP 이란?GreenSock Animation Platfrom 은 인터랙티브 웹을 위한 요소로화려한 애니메이션과 스크롤 이벤트를 쉽게 구현할 수 있도록 도와주는타임라인 기반의 JS 라이브러리임 ○ CDN 세팅  ■ GSAP 기초○ 기본 메서드- gsap.to()움직임의 끝나는 점을 지정하는 애니메이션원래 위치에서 해당 위치로 변경한다.gsap.to("대상",{속성:값, 속성:값},딜레이);gsap.to(".box1",{x:200, duration:2},3);// 클래스가 .box1인 대상을 x축으로 200으로 2초간 이동해줘 3초이후에 - gsap.from()애니메이션이 지정된 속성에서 시작하여현재 속성으로 이동gsap.from(".box", { duration: 2, x: -100, ..

■ Fullpage-js Fullpage.js는 웹 페이지에서 전체 화면 스크롤링 효과를 구현할 수 있는 JavaScript 라이브러리 웹 페이지를 여러 섹션으로 나누어 각 섹션을 스크롤링으로 전환할 수 있다.이를 통해 사용자는 웹 페이지를 일반적인 방법보다 더 직관적으로 탐색할 수 있으며, 웹 페이지의 시각적 효과를 높일수 있음. ■ Fullpage 적용○ CDN적용- CDN 개념Content delivery Network 콘텐츠 전송 네트워크서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용 - 링크 가져오기fullpage cdnhttps://cdnjs.com/libraries/fullPage.js  - CSS, JS 링크 ○ Fullpage 적용- HTML전체 페이지명(id =..

■ Swiper ○ Swiper란?웹에 사용하기 적합한 오픈 소스 JavaScript 라이브러리반응형 슬라이드 쇼 및 스와이퍼 기능을 쉽게 구현할 수 있음 ○ Swiper 기본 세팅 (CDN 활용)- CDN 개념Content delivery Network 콘텐츠 전송 네트워크서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용 - CSS 속성 및 스크립트 추가 - Style 속성추가속성에 대해서 미리 설정을 지정해줌  - Swiper 구조 설정 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9  - Scr..

■ 자바스크립트(Javascript)란?○ 정의JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어임웹 페이지가 단순히 정적인 정보를 표시하는 것 이상으로시의적절한 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등을표시할 때마다 JavaScript가 관련되어 있음.  ○ HTML, CSS, Javascript 차이- HTML : 문단, 제목, 데이터 표를 정의 페이지에 이미지, 영상을 삽입하는 등 콘텐츠를 정의 - CSS : 배경색 및 콘텐츠에 스타일을 적용하는 데 사용하는 언어 - Javascript : 동적으로 변경되는 콘텐츠를 만들고 멀티미디어를 제어하며이미지에 애니메이션을 적용하는 등 모든 작업을 수행할 수 있는 ..