Path로 어떻게 만드는지 알려주세요. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ MotionPathPlugin Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG or an Array of points. The magical "align" feature bends coordinate systems and really sets it apart. You can even edit t greensock.com Animate SVG Object Along Motion Path Using the standard anima..

1. toggleActions 카카오뱅크 카카오뱅크 이용안내, 상담하기, 소비자보호, 증명서발급, 회사소개, 인재채용, (주)카카오뱅크 www.kakaobank.com 카뱅을 모티브로 토글액션 구현해보기 재밌군

1. scrollTrigger 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 뒤로가기 했을 때도 보여주세요! 라고 하면 toggleActions: 'play none reverse none' 으로 적는다. 스크롤 올리면 뒤로갔다가 다시 내리면 play된다 onEnter : 시작하면 play 해라 onLeave : 떠나면 pause 멈춰라 onEnterBack: 스크롤 위로 잠깐 올리면 reverse 뒤로가라 onLeaveBack : 스크롤 계속해서 위로 올라가면 none (default 값) 앞의 reverse의 말을 듣게됨 참고

1. stagger stagger는 첫 번째 인자로, 애니메이션을 실행할 list 를 받고, 그 list에 있는 element 들에 차례로 애니메이션을 실행 시켜준다. 2. 속성 // 끝에서 0.5초 간격으로내려온다 gsap.to('.cont', {duration:1, y: 100, stagger: {each: 0.5, from: 'end'}}) // 끝에서 2초동안 4개의 cont가 순차적으로 내려온다. gsap.to('.cont', {duration:1, y: 100, stagger: {amount: 2, from: 'end'}}) each : 1 target인 box1들이 각각 1초동안 animate amount:1 target인 box1들이 1초를 box1의 수만큼 나누어 animate from ..

1. Intl API 소개 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 국제화(internalization) 자바스크립트에서는 이러한 데이터 포멧팅 문제를 해결해주기 위해서 Intl API를 제공하고 있다. 2. Intl.DateTimeFormat Intl API의 Intl.DateTimeFormat를 사용하면 날짜나 시간 데이터를 쉽게 국제화를 할 수 있다. 포멧팅 옵션으로 dateStyle과 timeStyle이 자주 사용되는데 full, long, medium, short 중 하나로 설정할 수 있다. > new Intl.DateTimeFormat("ko", { dateStyle: 'full' }).format(new Date()) '2022년 3월 8일 화요일' ..

1. if-else if 문과 if - if 문의 차이점 if- else if 를 사용하는 경우 하나의 조건이 만족 되면 나머지 else if 부분은 수행되지 않음 if - if 로 사용하게 되면 각각 다른 조건 문으로 해석되어 각각 수행하게 됨 2. if-else if 문 let age = 12; let charge; if(age < 8){ charge = 1000; console.log('미 취학 아동입니다.') } else if(age < 14){ charge = 2000; console.log('초딩입니다.') } else if(age < 20){ charge = 2500; console.log('중고딩 입니다.') } else{ charge = 3000; console.log('어른입니다.') ..

* JSON (JavaScript Object Notation - 자바스크립트 객체 표기법)은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있음. { "name": "Lee", "age": 20, "alive": true, "hobby": ["traveling", "tennis"] } 1. JSON.parse 문자열로 된 JSON을 객체로 변환한다. (문자열 -> 객체) 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이므로 이를 객체로 사용하려면 JSON 포맷의 문자열을 객체화해야함. parse라는 것은 문장을 분석하다 라는 뜻 2. JSON.stringify 객체를 JSON ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. Set이란? Set 은 중복을 허용하지 않는 값을 모아놓은 컬렉션이다. 자바스크립트 표준 내장 객체 중 하나이다. set 객체는 자료형에 관계없이, 원시 값과 객체 참조 모두 유일한 값으로 저장할 수 있다. 즉, set 내의 모든 값을 유일한 값을 유지 const arr = [1, 1, 1, 2, 2, 2, 3, 3, 3]; console.log(new Set(arr)); // Set(3) { 1, 2, 3 } console.log(...[1, 2, 3]); // 1 2 3 console.log(...new Set(arr)); // 1 2 3 console.log([...new Set(arr)]); // [ 1, 2, 3 ] console.log(Array.from(new Set(arr))); //..

버튼 클릭시 숫자 증가 감소함을 보여줌

이벤트 연결 이벤트 해제 이벤트 연결 상태 : 해제 작년에는 이렇게 구현했었는데 올해는 buttons를 반복문 돌려서 flag로 상태를 변화시켜 보았다! document.addEventListener('DOMContentLoaded', () => { const p = document.querySelector('p'); const buttons = document.querySelectorAll('button'); let flag = false; buttons.forEach(btn => { btn.addEventListener('click', () => { if (!flag) { p.textContent = '이벤트 연결 상태 : 연결'; flag = true; } else { p.textContent = ..

if : 조건이 만족 될 때에만 코드가 실행 const a = 5; if (a === 5) { console.log('5'); } else if (a === 6) { console.log('6'); } else { console.log('없음'); } const test = 100; switch (test) { case 100: console.log('100'); break; case 90: console.log('90'); break; default: break; } switch : 특정 값이 무엇이냐에 따라 다른 작업을 수행 switch문은 필요한 조건에 만족하는 경우마다 각각 다른 조건을 매칭하여 실행시킬 수 있다는 장점이 있다. 또한 모든 각각의 개별조건들이 많은 경우 이를 if 문을 사용하여 처..