gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif를 이용하시면 됩니다. CSS만 이용하기 HTML1234 Colored by Color Scriptercs CSS1234567891011.hov-anim-box .animated { display: none} .hov-anim-box:hover .animated { display: inline} .hov-anim-box:hover .static { display: none}csstatic은 멈춰있는 이미지, animated는 움직이는 이미지입니다. 자바스크립트 없이 실행된다는 장점은 있지만, 한 번 마우스를 올리고 gif가 재생되기 시작하면 멈춰있는 이미지와 움직이는 이미지 사이의 시간 차이가 발생하면서 이상하게 보이는 게 단점입니다. Java..

비디오(349.61kb) //원본이 수정된 관계로 아래 움짤과 밝기가 조금 달라졌고, 용량도 차이가 있으나 원본은 349.61kb GIF (4.68mb) gif는 프레임이 조금 잘리고 크기도 줄었지만, 당연하게 비디오 용량이 압도적으로 작다. 티스토리에 글을 쓸 때 움직이는 이미지(animated gif. APNG)를 삽입하고 싶을 때가 오기 마련이다. 그럴 때, 카카오 TV 등에 업로드한 후에, 동영상의 링크 (원문을 예로 들자면 https://tistory4.daumcdn.net/tistory/2837190/skin/images/20chaeng_Speed.mp4) 를 알아내야 한다. '공유하기'등을 누르면 나오는 페이지의 링크가 아닌 동영상의 링크가 필요하다. 그 링크만 알아낸다면 아래 코드에 집어넣..