사진에 마우스를 올리면 신기하게 사진이 커지는 방법, 블로그 팁!

ㆍ잡학지식

모바일 검색으로 블로그를 찾는 분이 가장 많아지면서 기존 블로그 스킨에서 반응형 블로그로 스킨을 바꿨다. 반응형 블로그 스킨을 수정하고 배우면서 놀라운 블로그를 발견하게 되고 새로운 팁들을 공부하게 되었다. 인터넷 환경이 점차 변화하면서 블로그 스킨도 그에 대응하게 되는 스킨이 바로 반응형 블로그 및 홈페이지인 것 같다.



블로그 스킨을 공부하면서 알게 된 사실을 정리하면, 첫째, 페이지가 빨리 열려야한다. 둘째, 단순하고 공간적인 여백의 미를 살려야한다. 셋째, 정확한 카테고리를 지정한다 넷째, 불필요한 스크립트는 피한다. 다섯째, 애드센스 광고와 색상 및 위치를 고려한다등 여러 가지를 신중하게 받아들이게 되었다. 무엇보다 방문자가 눈에 확 들어고 편하게 블로그를 찾아오게 끔하는 것이 중요하다.


자바스크립트_JavaScript


블로그 및 홈페이지를 구현하다보면 다양한 기능들에 대한 유혹이 많이 있다. 그 중 자신에게 꼭 필요한 기능을 추가하는 것이 좋으며 오늘 소개할 블로그 팁은 사진을 자연스럽게 크게 하는 것이다. 사진 이미지에 마우스를 올리면 사진이 커지는  방법은 아주 간단하며 http://music666.tistory.com 블로그 운영자 VJ Her0님에게 얻은 소스이다. VJ Her0 블로그는 음악 블로그인데 환상적인 스킨과 기능이 설치되어 있다. 티스토리 스킨에 공부하고 싶은 분은 방문해보면 좋을 것이다.


☞ 사진 위에 마우스를 올리면 사진이 커지게 하는 방법.

 -  티스토리 관리자 화면 → 꾸미기 → HTML/CSS  편집 → style.css 여기에 아래 코드를 삽입하면 끝...!


img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 6s ease-in;
-moz-transition: all 6s ease-in;
-o-transition: all 6s ease-in;
-ms-transition: all 6s ease-in;
transition: all 6s ease-in;
}


VJ Her0님 블로그는 티스토리 멀티미디어 블로그로 최고의 스킨을 구현하고 있으며 배경 화면도 동영상으로 할 수 있는 멋진 모습도 볼 수 있다. 배경을 이미지가 아닌 동영상으로 보는 순간 응용하고 싶었지만 참고 있는 중이다. VJ Her0님은 프로그램언에도 수준급 내공을 갖고 있어 가끔 필요한 소스를 문의하면 친절하게 답변해주어 티스토리 스킨 제작자 중 숨은 고수라 생각이 들었다.


[관련글]

▶ 반응형 티스토리 블로그 스킨 변경 후기

▶ top,다음뷰,구독 버튼을 해상도에 관계 없이 블로그 좌우에 고정 설치하기

▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.

<▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!








  • 프로필사진
    Favicon of https://kwangjae.com BlogIcon KwangJae2014.04.16 13:25 신고

    블로그가 반응형이군요 ㅎ 멋집니다.
    신기하긴 한데, 필요성에서 조금 아쉬운거 같아요.
    저걸 다르게 이용하면, 좀 더 멋지게 쓸 수 있을지 않을까요...
    그 다르다는걸 모르니까 문제지만요, 신기한 정도 잘 보앗어요~

    • 프로필사진
      Favicon of https://sepaktakraw.life BlogIcon 모피우스2014.04.16 13:28 신고

      반응형이 활성화되면 자유도와 완성도 높은 스킨이 나오지 않을까 생각합니다.

      찾아 주셔서 대단히 감사드립니다.^^

  • 프로필사진
    Favicon of https://rja49.tistory.com BlogIcon 온누리492014.04.16 13:48 신고

    잘보고 갑니다
    행사 중이라 인사만 드리고 가네요^^

    • 프로필사진
      Favicon of https://sepaktakraw.life BlogIcon 모피우스2014.04.16 13:52 신고

      바쁘신데도 찾아주셔서 감사합니다. 저도 지금 강원도 화천에 대회 참가차 왔습니다.^^

  • 프로필사진
    Favicon of https://photopark.tistory.com BlogIcon skypark박상순2014.04.16 17:01 신고

    오~~ 참 좋은방법이네요.
    유용한 블로그 팁, 감사 합니다.^^

  • 프로필사진
    Favicon of https://boksuni.tistory.com BlogIcon 복돌이^^2014.04.16 17:02 신고

    오옷...제가 궁금한 점을 꼭찝어서 올려 주셨네요
    고맙습니다.
    제블로그 바로 적용해 봐야 겠어요~^^

  • 프로필사진
    Favicon of https://music666.tistory.com BlogIcon VJ HerO2014.04.17 20:53 신고

    블로그 유입경로 보고 들어왔다가 제이야기가 있어서 놀랐습니다.^.^
    저도 티스토리 블로그에 둥지 튼지 1년밖에 안됬구요. 그전에는 코딩이나 홈페이지와는 전혀 아는바가 없었던지라 고수칭호는 부끄럽습니다.
    동영상 배경은 제가 글재주가 별로 없어서 지인이신 onasaju님께 부탁드려 방법을 포스팅 해두었습니다. 간단하게 적용되는 소스이니 참고해 주셔요. http://onasaju.tistory.com/280

    • 프로필사진
      Favicon of https://sepaktakraw.life BlogIcon 모피우스2014.04.18 08:55 신고

      블로그 꾸며놓은신 거보고 놀랐습니다. 좋은 정보 감사합니다.

      추가 설명도 고맙습니다. 이런 정보 구하기가 요즘 어려운 것 같습니다.

      행복한 하루되세요.

  • 프로필사진
    Favicon of https://everythingbyenvy.tistory.com BlogIcon Gobbledigook2016.03.23 16:50 신고

    감사합니다~ 혼자 책보고 해보겠다고 끙끙댔었는데 여기 다 해주셨네요ㅠㅠ