자바스크립트14 [JavaScript]마우스 오버시 이미지 확대하기 이번 시간에는 마우스 오버시 이미지를 확대를 진행해보겠습니다. https://stickode.com/detail.html?no=2583 스틱코드 stickode.com 스틱코드에서 하단 소스를 즐겨찾기 해주세요. html안에 script를 작성을 해보았습니다. script부분만 떼서 따로 적용을 하셔도 되고, 그대로 사용하셔도 됩니다. 고양이 이미지박스 두개를 만들어 줍니다. header안에 기본적인 html,body style을 만들어줍니다. 이미지1 onmouseenter, onmouseleave 핸들러에 달아줍니다. onmouseenter는 마우스가 올라갔을때 실행되고, onmouseleave는 마우스를 내렸을시 실행 됩니다. 마우스올라가면 확대, 마우스 내려가면 다시 원래 상태로 돌아갑니다. tr.. 2021. 11. 19. [JavaScript] 구글맵 API 클러스터링 만들기 안녕하세요.~ 이번시간에는 웹 프론트에서 Javascript와 구글맵 API를 이용해서 지도 클러스터링을 만들어 보겠습니다. 스틱코드 (stickode.com/mainlogin.html) 이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. HTML 설정 스틱코드를 통해 HTML 코드를 설정해주도록 하겠습니다. 스틱코드를 사용하면 다음과 같이 코드가 완성됩니다. (YOUR API KEY 부분에 구글API 키를 넣으시면 됩니다.) HTML 전문입니다. 여기에 CSS.. 2021. 7. 10. [JavaScript] 디지털 시계 만들기 자바스크립트을 활용하여 디지털 시계를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '디지털 시계 만들기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 digitalClockHTML을 입력하면 자바스크립트로 디지털 시계 만드는 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 digitalClockCSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 완성된 코드 중 수정이 필요한 부분을 작성해줍니다. 수정이 필요한 부분은 body의 배경색(line 8.. 2021. 6. 2. [JavaScript] 배경 색상 변경시키기 자바스크립트을 활용하여 배경 색상을 변경시켜주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 배경 색상을 변경시켜주는 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 backgroundimage_HTML을 입력하면 자바스크립트 배경색 바꾸기 - html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 backgroundimage_CSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 수정하고 싶은 부분을 수정해주세요. colorBox는 선택할 수 있는 색.. 2021. 5. 20. [JavaScript] 애니메이션 구현하기 (anime.js 사용) 이번 예제에서는 스틱코드 플러그인을 이용해서 anime.js을 사용해보겠습니다. stickode.com/detail.html?no=2121 스틱코드 stickode.com anime.js란? Anime.js는 자바스크립트를 기반으로 하는 경량의 애니메이션 라이브러리입니다. 여러분은 웹페이지에서 여러 가지 CSS 속성과 SVG 혹은 DOM 속성을 움직이는 데 이 라이브러리를 이용할 수 있습니다. 라이브러리에서는 애니메이션에 관한 모든 것이 제어 가능하고, 타깃으로 하고 싶은 엘리먼트나 움직이게 하고 싶은 속성들을 명시하는 다수의 방법을 제공합니다. 1. html 작성 (main.html) 스틱코드 단축 자동완성 호출 태그 : anime.js-html Animate left yellow Animate bot.. 2021. 5. 19. 이전 1 2 다음
