JavaScript 태그 글

[자바스크립트] 스와이프 방향 알아내기

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다.

티스토리에서 Lazy Load 사용하기

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 완벽하게 작동하기 위해선 서버사이드에서 이미지의 경로를 삽입하지 않거나, loading="lazy"란 옵션을 줘야 하기 때문에, 티스토리에선 완벽하게 작동하기 힘듭니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될

[자바스크립트] 부모창과 자식창 정보 교환

window.open() 혹은 a (anchor) 태그에 target="_blank" 어트리븃을 붙여서 연 윈도우와 원래 윈도우 간 정보 교환하는 방법입니다.

T 전화 테마 미리보기 꾸미기

T 전화 테마를 올릴 때 항상 이미지만 죽 나열하곤 했는데, 좀 더 테마 미리 보기 같은 느낌을 낼 순 없을까 싶어 만들어본 데모입니다. CSS로 휴대폰 목업을 만들고, 제 휴대폰과 동일한 화면 비를 갖도록 한 후에, 안에 이미지를 넣어주면 끝납니다. 화면을 클릭하시면 이미지 목록 레이어가 보이고, 이미지를 클릭하면 레이어가 사라지며 휴대폰 화면이 변경됩니다. 만들긴 했는데, 아무래도

티스토리 썸네일에 유튜브 썸네일 불러오기

위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요.

[티스토리] 태그로 글 가져오기

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. 1. Array를 반환하는 버전 async function getPostsByTag({ tag, selector, title, date, desc, thumbnail }) {     const tagArray = await Promise.all(         tag.map((tagString) =>             getPosts({    

Canvas 썸네일, 배너 제작기

깃허브 제작기 링크 소개 HTML5 Canvs를 이용해서 간단하게 썸네일, 배너 등에 쓸 수 있는 이미지를 제작할 수 있는 앱입니다. 이미지의 크기 조정, 텍스트 수정, 배경 색 및 글자 색 변경, 배경에 이미지 추가, 해당 이미지의 투명도 조절 등의 기능이 포함되어 있습니다. 포토샵 등의 도구보다 자유도는 떨어지지만, 배너나 썸네일을 만들기는 훨씬 수월합니다. 사용법 크기 조정 Canvas의

[티스토리] 인기글인지 확인하기

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <s_sidebar_element> <!-- 이 블로그 인기글 --> <div class="popularPost"> <h3>이 블로그 인기글 </h3> <ul> <s_rctps_popular_rep> <li> <a href="[##_rctps_rep_link_##]" class="ImSoHot">[##_rctps_rep_title_##]</a> <span class="cnt">[##_rctps_rep_rp_cnt_##]</span> <s_rctps_rep_thumbnail> <img src="[##_rctps_rep_thumbnail_##]"/> </s_rctps_rep_thumbnail> <a href="[##_rctps_rep_category_link_##]">[##_rctps_rep_category_##]</a> </li> </s_rctps_popular_rep> </ul>

유튜브 썸네일 추출하기

Github 간편하게 유튜브 썸네일을 추출할 수 있는 웹앱입니다. 220428 업데이트 모든 썸네일 크기 렌더링하도록 수정 Shorts 썸네일 추출할 수 있도록 업데이트 210222 업데이트 png 이미지 제거 추출 버튼 클릭할 때마다 html 구조를 초기화하지 않도록 수정 original.jpg가 없는 이미지는 maxresdefault.jpg 출력 링크에 시간 등 옵션이 들어있을 때 썸네일이 제대로 출력되지 않던 오류 수정 Export Thumbnails 사용법