[Javascript] 요소가 뷰포트 안에 있는지 확인하기
[Javascript] 요소가 뷰포트 안에 있는지 확인하기

들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 12345678$.fn.isvisible = function() { var a = $(this).offset().top, b = a + $(this).outerHeight(), c = $(window).scrollTop(), d = c + $(window).height(); return b > c && a = a};Colored by Color Scriptercs 스크롤을 위에서 아래로 내리는 경우만 생각하면 위처럼 조금 더 짧은 스크립트를 이용하셔도 됩니다. 이제, 상술한 스크립트를 활용할 시간입니다. 1234..

마우스를 올려 gif를 재생하기
마우스를 올려 gif를 재생하기

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..

티스토리 모바일 경로(/m)에서 강제로 원래 경로로 리다이렉트
티스토리 모바일 경로(/m)에서 강제로 원래 경로로 리다이렉트

들어가기에 앞서, 적용이 꽤 귀찮은 스크립트라 블로그 모든 글에 적용하기보다 특정 글들에만 사용하는 게 좋지 않을까 생각합니다. 모바일 페이지를 사용하지 않는다고 설정해둬도 페이지 생성 자체가 막히는 게 아니라서, 접근은 잘만 됩니다. 네이버 블로그는 구글에 검색하면 모바일 페이지로 노출되는 것도 엄청나게 많던데, 티스토리 블로그는 잘 모르겠네요. 여튼, 블로그에 적용한 스크립트 등 때문에 모바일 화면에서 보면 안 되는 글들에 설정해주면 꽤 유용하게 쓸 수 있지 않나 싶습니다. * 주의사항 글 목록 창에 나오는 글 미리 보기가 짧아서 스크립트가 미리 보기에 보이면 화면 전체가 이상하게 표시됩니다. 인덱스 ~ 귀찮아서 가 미리 보기입니다. 10 1시 방향에 html 클릭 > 글 제일 아래에 script 태..

유튜브 팝업 레이어 만들기
유튜브 팝업 레이어 만들기

.popupVideo란 div 아래의 a 태그를 클릭하면 유튜브 비디오를 레이어로 띄워 주면서 영상을 재생합니다. (PC) 화면의 빈 곳을 누르면 팝업 레이어가 사라지면서 유튜브 영상이 정지됩니다. a 태그 안에 들어간 내용은 유튜브 들어가셔서 아무 영상이나 클릭하시면 https://www.youtube.com/watch?v=ZBCGkpJWjVc 같은 형식으로 주소창에 표시될 겁니다. ?v= 뒤의 내용이 비디오의 id입니다. 해당 내용 복사해서 붙이시면 됩니다. '공유'버튼 클릭하시면 youtu.be/ 뒤에 나오는 내용도 똑같이 비디오의 id입니다. 데모 1번 영상 2번 영상 HTML 1234567 1번 영상 2번 영상 Colored by Color Scriptercs CSS 123456789101112..

티스토리 404 페이지에서 메인 화면으로 리다이렉트
티스토리 404 페이지에서 메인 화면으로 리다이렉트

404 페이지 확인 이 글 뒤에 이어서 작성하는 글입니다. 404 페이지를 꾸미는 방법은 여기서 확인해주세요. 12345678$(function() { var b = $(".article_container"), f = $(".absent_post").length, h = $(".article_container div"); 0 0) { setTimeout(function() { location.href = "/" }, 5000)}Colored by Color Scriptercs 핵심은 여기입니다. .absent_post의 개수가 0개를 초과하면, 5초 뒤에 "/" 경로로 이동하게 하는 스크립트입니다.5000을 수정하시면 리다이렉션되는 시간을 조절하실 수 있습니다.

유튜브 세로 영상 퍼오기
유튜브 세로 영상 퍼오기

유튜브에 모니터의 사이즈가 아닌 휴대폰의 사이즈에 최적화되어 올라오는 영상의 수는 날이 갈수록 늘고 있습니다. 그런데 아직도 유튜브의 '퍼가기(embed)' 기능은 거의 모든 비디오를 가로 560, 세로 315에 맞춰서 퍼오도록 자동으로 설정합니다. iframe을 조금만 수정하면 세로 비디오로 변경할 수 있습니다. 예시 HTML1cs 간단하게 width와 height만 변경하면 됩니다. 원본에서 쓰는 560 * 315 를 뒤집어서 315 * 560으로 바꿔도 당연히 됩니다. 너비 / 높이 = 0.5625만 되게 해주세요. 당연하지만, 예전에 소개해 드렸던 반응형으로 iframe 감싸는 방법을 미디어 쿼리와 함께 이용하시면 적절하게 반응형으로 표시하실 수 있습니다.

[Javascript] 요소를 클립보드로 복사하기
[Javascript] 요소를 클립보드로 복사하기

자바 스크립트를 이용해 요소를 클립보드로 복사하는 방법입니다.*IE 8 아래로는 작동하지 않습니다. 123$(".copy").each(function() { $(this).append("")});Colored by Color Scriptercsinput으로 요소를 복사해놔야 클립보드로 옮겨갈 수 있기 때문에, 복사하고 싶은 속성을 input의 value로 옮겨줍니다.복사하고자 하는 게 아니면, $(this).text()를 $(this).attr("something") 등으로 수정하시면 됩니다. 1234$(".copy-img").each(function() { $(this).wrap(""), $(this).parents("span").append("")})Colored by Color Scriptercs이..

[Javascript] 티스토리 어드민인지 확인하기
[Javascript] 티스토리 어드민인지 확인하기

관리 / 글쓰기 등 관리자만 사용하는 메뉴는 굳이 관리자가 아닌 사용자에게 보여줄 필요가 없습니다.그런데도 보통은 관리자만 쓰는 메뉴가 모두에게 보이거나, 로그인 안 한 사용자에게만 보이지 않도록 작업하는 게 대부분이더라고요. 12345$(document).ready(function() { if ($(".tt_add_link[data-alert]").length > 0) { // Do Something }}Colored by Color Scriptercs아주 짧은 조건문 하나면 관리자 여부를 확인할 수 있습니다.위 스크립트 아래에 작성한 내용은 관리자일 경우에만 작동합니다. 12345$(document).ready(function() { if ($(".tt_add_link[data-alert]").len..

티스토리 이미지 강제로 원본 표시하기
티스토리 이미지 강제로 원본 표시하기

글쓰기 가로 폭을 설정하면 일괄적으로 글 영역의 이미지 크기가 변경되면 좋겠지만, 애석하게도 그런 기능은 지원하지를 않습니다 ㅠㅠ그래서 그냥 만약 이미지가 컨테이너보다 작으면 원본 이미지로 표시되도록 작업했습니다. 이미지가 충분히 큰데도 컨테이너를 꽉 채우지 못하는 게 좀 눈에 거슬려서 작업했는데, 실용성이 그리 높을지는 잘 모르겠네요;; 123456789$(".imageblock").each(function() { var a = $(this), b = a.children("img"); if (a.width()

스킨/스킨 목록
잡담
갤러리