svg로 스크롤 인디케이터 만들기
블로그 & 스킨/How to
svg로 스크롤 인디케이터 만들기

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123<svg id="scroll-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">  <path fill="rgba(255,255,255,.5)" stroke=..

[JS] Iframe 내부 요소 수정하기
블로그 & 스킨/How to
[JS] Iframe 내부 요소 수정하기

Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 heade..

[JS] 요소가 뷰포트 안에 있는지 확인하기
블로그 & 스킨/How to
[JS] 요소가 뷰포트 안에 있는지 확인하기

들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 12345678$.fn.isvisible = function() {  var a = $(this).offset().top,     &..

마우스를 올려 gif를 재생하기
블로그 & 스킨/How to
마우스를 올려 gif를 재생하기

gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif를 이용하시면 됩니다. CSS만 이용하기 HTML1234<span class="hov-anim-box">  <img src="https://t1.daumcdn.net/cfile/tistory/996B5C3F5C2DCE5304?original" alt="" ..

티스토리 모바일 경로(/m)에서 강제로 원래 경로로 리다이렉트
블로그 & 스킨/How to
티스토리 모바일 경로(/m)에서 강제로 원래 경로로 리다이렉트

들어가기에 앞서, 적용이 꽤 귀찮은 스크립트라 블로그 모든 글에 적용하기보다 특정 글들에만 사용하는 게 좋지 않을까 생각합니다. 모바일 페이지를 사용하지 않는다고 설정해둬도 페이지 생성 자체가 막히는 게 아니라서, 접근은 잘만 됩니다. 네이버 블로그는 구글에 검색하면 모바일 페이지로 노출되는 것도 엄청나게 많던데, 티스토리 블로그는 잘 모르겠네요. 여튼, 블로그에 적용한 스크립트 등 때문에 모바일 화면에서 보면 안 되는 글들에 설정해주면 꽤 ..

유튜브 팝업 레이어 만들기
블로그 & 스킨/How to
유튜브 팝업 레이어 만들기

.popupVideo란 div 아래의 a 태그를 클릭하면 유튜브 비디오를 레이어로 띄워 주면서 영상을 재생합니다. (PC) 화면의 빈 곳을 누르면 팝업 레이어가 사라지면서 유튜브 영상이 정지됩니다. a 태그 안에 들어간 내용은 유튜브 들어가셔서 아무 영상이나 클릭하시면 https://www.youtube.com/watch?v=ZBCGkpJWjVc 같은 형식으로 주소창에 표시될 겁니다. ?v= 뒤의 내용이 비디오의 id입니다. 해당 내용 복사해서..

티스토리 404 페이지에서 메인 화면으로 리다이렉트
블로그 & 스킨/How to
티스토리 404 페이지에서 메인 화면으로 리다이렉트

404 페이지 확인이 글 뒤에 이어서 작성하는 글입니다. 404 페이지를 꾸미는 방법은 여기서 확인해주세요.12345678$(function() {  var b = $(".article_container"),      f = $(".absent_post").length,    &nb..

유튜브 세로 영상 퍼오기
블로그 & 스킨/How to
유튜브 세로 영상 퍼오기

유튜브에 모니터의 사이즈가 아닌 휴대폰의 사이즈에 최적화되어 올라오는 영상의 수는 날이 갈수록 늘고 있습니다. 그런데 아직도 유튜브의 '퍼가기(embed)' 기능은 거의 모든 비디오를 가로 560, 세로 315에 맞춰서 퍼오도록 자동으로 설정합니다. iframe을 조금만 수정하면 세로 비디오로 변경할 수 있습니다. 예시 HTML1<iframe width="360" height="640" src="https://w..

티스토리 툴바