stroke-dasharray stroke-dasharray: (홀수번째 인자) (짝수번째 인자) stroke-dasharray: 100 100 100 100 100 100 stroke-dasharray: 1000 → 하나만 주어진다면, dash의 길이와 공백의 길이가 각각 1000씩 준어진다는 의미 홀수번째 인자는 dash의 길이, 짝수번째 인자는 공백의 길이 stroke-dashoffset 얼만큼 공백을 둬서 어디서부터 그릴지에 관한 속성 이 dashoffset을 스크롤의 높이에 따라 1000에서 0 사이 값으로 변경시켜주면 선이 그려지는 애니메이션 만들 수 있음 ratio (%) path를 원하는 지점에서 끝내려면 비율 ratio를 구해야됨 공식 ) window.scrollY(화면 맨 위) + wi..
참고 🤍 https://www.youtube.com/watch?v=wbDpZwDRgRk&list=LL&index=1 https://github.com/dream-ellie/javascript_animation GitHub - dream-ellie/javascript_animation Contribute to dream-ellie/javascript_animation development by creating an account on GitHub. github.com 1) Typelt (1) Typelt > Documentation > Vanilla JavaScript (2) Quick Links > Vanilla JavaScript (3) Installation > CDN or npm / yarn htt..
[JavaScript] - [jQuery] 기초, 입문자 1 [jQuery] 기초, 입문자 1 jQuery - JS 코드양을 줄일 수 있는 방법 - 라이브러리 - 요즘은 jQuery 보다 react를 더 많이 씀 - 근데 jQuery로 개발된 사이트가 엄청 많음 ^ ^ - 문법이 간결하다 - 사용하기 쉽다 - 빠르게 배울 수 있다 - hyonyong.tistory.com css, removeAttr, attributing 1 첫번 2 둘 3 삼 each 1 첫번 2 둘 3 삼 width, height, outerWidth, outerHeight 1 첫번 2 둘 3 삼 offset, position 1 첫번 2 둘 3 삼 text 1 첫번 2 둘 3 삼 fade, fadeOut, hide, show, an..
jQuery - JS 코드양을 줄일 수 있는 방법 - 라이브러리 - 요즘은 jQuery 보다 react를 더 많이 씀 - 근데 jQuery로 개발된 사이트가 엄청 많음 ^ ^ - 문법이 간결하다 - 사용하기 쉽다 - 빠르게 배울 수 있다 - 다른 라이브러리들과 충돌을 일으키지 않는다. - 다양한 플러그인이 존재한다. - 브라우저 호환성 문제를 해결해준다. 설치 jQuery 파일 받아서 첨부, 하기 귀찮으면 CDN으로 설치 jQuery 3.x > minified 버전 다운 - uncompressed 버전 : 그냥 원본 파일 - minified 버전 : 공백 제거 버전, 용량이 더 작음 - slim 버전 : 기능이 많이 빠진 라이트 버전 https://releases.jquery.com/ jQuery CDN..
