이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
드리머 미스티
음악・악기・독서・여러가지 생활 정보 등을 제공합니다
mystee.tistory.com
저의 메인 블로그에 가보셔서 블로그의 이름인 "드리머 미스티"라고 쓰여있는 곳에 마우스 커서를 올려주면 블로그의 이름이 춤을 추는 듯이 움직이는 것을 보실 수가 있습니다.
그 효과를 주는 방법을 알려드겠습니다.
HTML과 CSS를 전혀 모르시는 분들은 무슨 내용인지 이해를 할 수 없는 글이 될 수도 있습니다.
무슨 말인지 전혀 모르겠지만 이 효과를 꼭 주고 싶은 분들은 이 블로그의 카테고리 html과 css를 통해서 공부를 해보시기를 권해드립니다.
참고 포스트
CSS 트랜스폼 중심축 바꾸기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜스폼 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들
gogogameboy.tistory.com
트랜스폼에 대해서 공부했던 이 포스트에 올린 생활코딩 강의 영상에 CSShake 라는 사이트가 나옵니다.
그 사이트의 셰이크 효과를 블로그에 줘보도록 하겠습니다.
CSShake
CSShake Some CSS classes to move your DOM! Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake
elrumordelaluz.github.io
위의 사이트로 들어갑니다.
스크롤을 제일 아래로 내리면 다운로드 메뉴가 있습니다.
클릭해서 들어갑니다.
이 사이트의 모든 셰이크 효과를 쓰실 분들은 가장 위의 두 파일 중에서 하나만 받으시고,
어느 특정 셰이크 효과만 쓰실 분들은 해당 셰이크 css 파일을 마우스 오른쪽 클릭을 해서 다운로드합니다.
여담이지만 코드 경량화를 한 파일이나 안 한 파일이나 용량의 크기 차이가 거의 없어서 저는 가장 위의 파일을 다운로드했습니다.
CSS 코드 경량화 minify
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, link와 import 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
코드 경량화가 무엇인지 궁금하신 분은 이 포스트를 확인해주세요.
일단은 그냥 넘어가도 되는 내용입니다.
블로그의 html 편집으로 들어가서 상단의 파일업로드를 클릭한 후,
하단의 +추가를 클릭해서 방금 전에 다운로드한 css 파일을 업로드합니다.
그러면 image/ 폴더에 해당 css 파일이 올라가는 것을 확인할 수 있습니다.
티스토리 블로그 html 편집 들어가는 법
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 이번 포스팅은 포스팅 거리도 못 되는 정말 민망할 정도로 쉬운 내용입니다. 하지만
gogogameboy.tistory.com
혹시 html 편집이 어디 있는지, 소스 코드 내의 검색은 어떻게 하는지 모르시는 분들은 위의 글을 확인해주세요.
성공적으로 업로드를 했다면 html 편집으로 돌아가서 <head></head> 안에 이 소스 코드를 넣어줍니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
저는 같은 종류의 <link> 태그들 아래에 코드를 넣었습니다.
CSS, link와 import
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 이 포스팅은
gogogameboy.tistory.com
관련 내용은 이 포스트를 통해서 공부할 수 있습니다.
블로그의 타이틀에 해당하는 이 태그들을 <div class="shake"></div>로 감쌌습니다.
그리고 그 결과는 저의 메인 블로그에서 보시는 대로입니다.
응용해서 원하는 곳에다가 재밌는 효과들을 여기저기에 넣어보시길 바랍니다.
아직 뭐가 뭔지 모르겠는 분들은 제 블로그를 통해서 차근차근 공부해보시면 다 이해하실 수 있습니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'blog > 스킨 편집' 카테고리의 다른 글
| 티스토리 블로그 북클럽 스킨, 유튜브 영상을 반응형으로 만드는 법 (0) | 2021.10.01 |
|---|---|
| 티스토리 블로그 CSS로 폰트 변경하는 방법 (0) | 2021.01.06 |
| 티스토리 북클럽 스킨에서 인스타그램 새 창으로 뜨게 하기 (2) | 2020.12.17 |
| 티스토리 북클럽 스킨의 홈 프로모션, 새 창으로 뜨게 하기 (0) | 2020.12.16 |
| 티스토리 블로그 html 편집 들어가는 법 (0) | 2020.12.16 |
댓글