728x90 반응형 jQuery3 [codepen] 코드펜에 제이쿼리(jQuery) 넣기!! 안녕하세요~ 코드펜으로 간단한 코드를 테스트해 보는 경우가 자주 있습니다. 특히 저는 요즘 포스팅을 작성하면서, 테스트용으로 코드펜을 사용하고 있는데요~ js 코드를 입력할 때 순수 자바스크립트 사용이 가능하지만, 셀렉터를 빨리 잡기 위해 제이쿼리(jQuery)를 이용해 코드를 작성하기도 합니다. 이럴 때! 코드펜에 제이쿼리를 넣어서 테스트하고자 하는 분들을 위해서 이번 포스팅에서는 코드펜에 제이쿼리 플러그인을 추가하는 방법을 소개합니다~ 코드펜에 제이쿼리 플러그인 추가하는 방법 1. 코드펜 접속 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development .. 2022. 4. 7. [javaScript] Top버튼 스크롤 하단 붙이기 Top버튼 스크롤 하단 붙이기 안녕하세요~ UI 모션 개발을 할 때, 컨텐츠가 긴 경우를 대비해서 보통 우측 하단에 상단으로 이동할 수 있는 일명 Top버튼을 많이 적용하고 있습니다. Top버튼을 적용시킬 때 여러가지 기능이 있을 수 있습니다. 단순히 우측하단에 Top버튼 위치시키기 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측 하단에 Top버튼 보이기 - 단점 : 푸터와 겹치게 됨 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측하단에 Top버튼 보이기 - 장점 : 푸터와 겹치지 않음 - 단, 스크롤이 푸터에 닿기 전에 Top버튼은 푸터 바로위에 위치시키기 위의 3가지 경우 중에서 마지막 3번째 경우에 대한 모션구현을 해보았습니다. 디폴트로 Top버튼 숨겨져 있고.. 2022. 4. 6. [javaScript] 스크롤 여부에 따른 버튼영역 하단에 붙이기!! 안녕하세요! 웹사이트를 제작할 때, 스크롤 여부에 따라 버튼 영역을 푸터 하단 쪽에 붙이는 기능이 필요할 때가 종종 있습니다. 다른 작업에서도 이와 같은 유사한 기능을 작업 할 수 있기 때문에 히스토리 차원으로 코드 남깁니다!! 유사한 작업을 하시는 분들께 도움이 되었으면 합니다~ 💡html과 css 코드는 동일! 💡jQuery로 구현한 경우와 javaScript로 구현한 경우! 1) 제이쿼리로 구현한 코드 1-1) 브라우저 화면보다 컨텐츠 내용이 짧아, 스크롤 발생 안 한 경우 HTML 삽입 미리보기할 수 없는 소스 1-2) 브라우저 화면보다 컨텐츠 내용이 길어, 스크롤 발생했을 경우 HTML 삽입 미리보기할 수 없는 소스 2) 자바스크립트로 구현한 코드 2-1) 브라우저 화면보다 컨텐츠 내용이 짧아,.. 2022. 3. 25. 이전 1 다음 728x90 반응형
