반응형 GSAP5 자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 길라잡이 https://dongjin6539.tistory.com/101 콜백 함수 블로그에서 확인 할 수 있는 콜백 지옥을 해결하기 위해 GSAP 라이브러리를 사용해서 가성이 좋도록 해결할 수 있습니다. 콜백 함수를 해결하려는 이유는 콜백 함수를 중첩해서 사용하면서 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 비동기적으로 수행되는 작업이 많아지면서 콜백 함수가 중첩되어 사용되면서 코드가 복잡해지고, 디버깅이 어려워지고, 유지보수가 어려워지는 문제점이 발생하기 때문입니다. 예시 코드 구성 DJ's PORTFOLIO work about let's introduce frontend developer's all works of portfolio do.. 2023. 5. 4. 슬라이드 이펙트 : 위로 연속으로 움직이기 슬라이드 이펙트 : 위로 연속으로 움직이기 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript slider Effect05 슬라이드 이펙트 : 위로 움직이기(연속적으로) 1 2 3 4 5 6 dongjin6539@naver.com 구성 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다. main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다. css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다. 첫번째 이미지를 다섯번째.. 2023. 4. 12. 슬라이드 이펙트 : 좌로 연속으로 움직이기 슬라이드 이펙트 : 좌로 연속으로 움직이기 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 dongjin6539@naver.com 구성 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다. main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다. css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다. 첫번째 이미지를 다섯번째.. 2023. 4. 11. 슬라이드 이펙트 : 하 → 상 움직이기 슬라이드 이펙트 : 하 → 상 움직이기 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript slider Effect03 슬라이드 이펙트 : 위로 움직이기 1 2 3 4 5 6 dongjin6539@naver.com 코드 구성 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다. main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다. css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다. 두번째 슬라이드 이펙트와 다르게 w.. 2023. 4. 10. 마우스 이펙트 - 마우스 따라다니기(2) 마우스 이펙트 - 마우스 따라다니기(2) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT, CSS / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 God never abandons the courageous. 신은 용기있는 자를 결코 버리지 않는다. dongjin6539@naver.com 코드 블럭 구성 body 태그에 알맞은 header 구역, main 구역, footer 구역을 만들어줍니다. header 태그에 h1 태그, p 태그, ul 태그를 사용해서 제목, 텍스트, 목록을 입력해줍니다. main 태그에 div 태그를 사용해 class "mouse__.. 2023. 3. 21. 이전 1 다음 반응형