배너 이미지

JavaScript 태그 글

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

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

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다. let initialX = null,   initialY = null; function initTouch(e) {   initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;   initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`; }; function swipeDirection(e) {   if (initialX !== null && initialY !== null) {     const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,       currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;     let diffX = initialX - currentX,       diffY = initialY - currentY;     Math.abs(diffX) > Math.abs(diffY)     ? (       0 < diffX       ? console.log("to left")       : console.log("to right")     )     : (       0 < diffY       ? console.log("to top")       : console.log("to bottom")     )     initialX = null;     initialY = null;   } } window.addEventListener("touchstart", initTouch); window.addEventListener("touchmove", swipeDirection); window.addEventListener("mousedown", (e) => {   initTouch(e),   window.addEventListener("mousemove", swipeDirection) });...
티스토리에서 Lazy Load 사용하기

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

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

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

window.open() 혹은 a (anchor) 태그에 target="_blank" 어트리븃을 붙여서 연 윈도우와 원래 윈도우 간 정보 교환하는 방법입니다. 새 윈도우를 연 창을 부모창, 부모창에 의해 window.open()이나 a 태그로 열린 창을 자식창이라 칭하겠습니다. 부모창에서 자식창 접근 <!DOCTYPE html> <html> <head>     <title>부모창</title> </head> <body>     <input type="text" id="parentInput">     <div id="childOutput"></div><button id="getChildOutput">자식창 입력 가져오기</button>     <script>         const newWindow = window.open('tmp-child.html');                      document.getElementById("getChildOutput").addEventListener("click", () => {             document.getElementById("childOutput").innerText = newWindow.document.getElementById("childInput").value         })     </script> </body> </html> window.open() 함수를 변수에 집어넣고(예시에선 newWindow),...
T 전화 테마 미리보기 꾸미기

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

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

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

위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요. HTML <a href="[##_article_rep_link_##]" class="indexArticle">   <div class="index_thumbnail">       <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]" data-href="[##_article_rep_link_##]">   </div>   <div class="tit_post">[##_article_rep_title_##]</div>   <div class="detail">       <div class="category">[##_article_rep_category_##]</div>       <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">           <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>       </div>   </div>   <div class="date hidden">[##_article_rep_date_##]</div> </a> 임의로...
Canvas 썸네일, 배너 제작기

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