인트로
안녕하세요. 공대아빠입니다.
제 블로그에서 마우스를 클릭하시면 폭죽처럼 터지는 게 신기하다고 하시는 분들이 계셔서 정보를 공유해 볼까 합니다.
스크립트 제공 사이트 접속
마우스에 적용되는 효과는 자바스크립트라는 언어로 제작된 것입니다.
코드가 매우 복잡하게 되어있습니다만, 하나하나 풀어보면 효과가 나오는 게 이해는 갑니다.
매우 오랜 시간 분석이 필요하죠. ㅎㅎ
아래 사이트를 접속합니다.
RV's free DHTML and JavaScript text and graphic effects for your web-site
Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this
www.mf2fm.com
메인 페이지 화면은 아래와 같습니다.
여기서 제가 사용한 효과는 오른쪽 가장 인기 있는 스크립트 4위에 있는 CLICKSPOLOSION 입니다.
영어를 한국어로 번역하면 번역이 안되네요. 추측으로는 클릭 폭발 정도 될 것 같습니다.
4. CLICKSPOLOSION을 클릭하여 이동하여 아래의 화면이 나오게 됩니다.
어떤 브라우저에서 동작이 되는지에 대한 설명과 STEP1, 2, 3로 사용방법에 대해 설명하고 있습니다.
일반적인 홈페이지에 적용 방법으로, 저는 티스토리 블로그에 적용하는 방법으로 설명드리겠습니다.
스킨 편집 메뉴 진입
먼저 내 블로그 설정에서 꾸미기-스킨 메뉴 편집으로 진입합니다.
우측 창에 html 편집을 클릭합니다.
분할된 2개의 창 가운데를 클릭 후 왼쪽으로 드래그하시면 오른쪽 에디터 창이 넓어지게 됩니다.
오늘 작업은 HTML탭에서 진행합니다.
기본적으로 HTML은 TITLE, HEAD, BODY로 이루어져 있습니다.
우리가 적용하는 효과는 페이지는 보이지 않아야 하므로 HEAD에 적용되게 됩니다.
HEAD의 시작은 <head>이고, HEAD의 끝은 </head>입니다.
이 사이에 아까 사이트에 있던 효과를 넣어주고 저장만 하면 됩니다.
동영상으로 간단히 보여드리겠습니다.
홈페이지에 다양한 효과 있으니 구경해보시고 원하시는 효과를 적용하시면 됩니다.
마무리
오늘 포스팅은 마우스 효과를 주는 스크립트를 블로그에 적용하는 방법에 대해 알아보았습니다.
포스팅 읽어주셔서 감사합니다.
즐거운 하루 보내시고요, 공감과 구독은 저에게 동기부여가 됩니다.
'강좌 > HTML & CSS' 카테고리의 다른 글
| [Tips] 내 포스팅 글에 간단히 하이라이트 적용해봅시다. (31) | 2022.12.11 |
|---|
댓글