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

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

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될 이미지를 로딩할 필요가 없으니, 이미지의 src에 1px * 1px짜리 이미지를 하나 넣어줘서 이미지에 아무런 오류가 발생하지 않도록...
[자바스크립트] 부모창과 자식창 정보 교환

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

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),...
티스토리 썸네일에 유튜브 썸네일 불러오기

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

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

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

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. getPostsByTag = (tag, target, elem) => {   const ajax = new XMLHttpRequest;   let parser, e;   document.querySelector(target) === null || (     ajax.open("GET", `/tag/${encodeURI(tag)}`),     ajax.send(null),     ajax.onreadystatechange = () => {       (4 === ajax.readyState) && (         parser = new DOMParser().parseFromString(ajax.responseText, "text/html"),         e = parser.querySelectorAll(elem),         e.length === 0         ? target.innerText = "해당 태그의 글을 찾을 수 없습니다."         : (           Array.from(e).forEach(a => {             document.querySelector(target).append(a)           })         )       )     }   ) } 위 스크립트를 추가하신 다음 getPostsByTag("태그 이름", "컨테이너 선택자", "포스트 선택자") 위와 같이 함수를 호출하시면 됩니다. 컨테이너 선택자, 포스트 선택자 모두 CSS...
워드프레스 포스트 조회수 확인하기

워드프레스 포스트 조회수 확인하기

들어가며 참고한 글 개인적으로 플러그인 사용을 선호하지 않아서, 플러그인 없이 개별 포스트에 카운터를 달 수 있게 작업했습니다. 위 글에 나온 소스를 적용하면, F5 누르면 누를 때마다 조회수가 올라가는 불상사가 벌어지기에, 그 부분만 수정했습니다. functions.php 수정 function getPostViews($postID) { $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if ($count == '') { delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key,...
[티스토리] 인기글인지 확인하기

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

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <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>...
[CSS, 자바스크립트]Material Ripple 효과 구현하기

[CSS, 자바스크립트]Material Ripple 효과 구현하기

요소를 클릭했을 때, 물결(Ripple)이 퍼져 나가는 것 같은 효과를 줄 수 있습니다. See the Pen Material Ripple by Marshall (@marshall-ku) on CodePen. HTML <a href="#" class="material-ripple">Click Me!</a> <a href="#" class="material-ripple" data-color="ff99ff">Custom Color</a> 엘리먼트에 material-ripple이란 class만 추가하시면 됩니다. ripple 효과에 특정 색상을 원하시면 data-color이란 속성을 만드신 후에 색상 코드를 추가하시면 됩니다.* 16진수 색상을 이용해주시고, #은 제외하고...
[CSS] 열리는 문 만들기

[CSS] 열리는 문 만들기

문을 두드려보세요! (닫으실 때도 문을 누르셔야 닫힙니다.) 깃허브 갤러리 정리하다 Knock Knock 티저 보고 생각나 급하게 만들어본 문입니다. ㅋㅋㅋ 문은 3d로 만들어보려다 데스크탑에선 딱 맞췄는데 화면이 작아지니까 입체로 만들려고 덧댄 부분들이 뒤틀리더라고요 ㅠㅠ 이건 시간 내서 제대로 해봐야 하지 않을까 싶습니다. Knock Knock 티저 비디오에서 문 두드리는 소리를 가져왔고, 문도 티저 이미지에서 ?만 잘라내서 사용했습니다....
유튜브 썸네일 추출하기 (JPG, PNG)

유튜브 썸네일 추출하기 (JPG, PNG)

애초에 유튜브 썸네일 확장자는 jpg라 이걸 억지로 png로 바꾸는 게 큰 의미가 있을까 싶긴 하지만, 예전 유튜브 썸네일 추출기를 업데이트해봤습니다. 깃허브 추출기 사용법 1. 추출기 링크를 클릭합니다. 2. 추출하고 싶은 비디오의 링크를 "주소를 입력해주세요"라 적힌 칸에 붙여 넣습니다. 3. "Export" 버튼을 클릭합니다. JPG 4. "Download" 버튼을 클릭합니다.5. 이미지를 우클릭 후 저장합니다. PNG 4. "Image" 아래의...