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

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

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

[CSS] 텍스트 꾸미기

TWICE TWICECHAEYOUNG 위 예시처럼 텍스트 배경에 그래디언트를 넣거나 이미지를 넣을 때 사용합니다. #element { -webkit-background-clip: text; color: transparent; } 보이는 것처럼, 꽤 간단하게 사용할 수 있습니다. -webkit-background-clip이지만, Firefox에서도 작동합니다. 텍스트를 선택하면 배경이 변경되니, 위 예시처럼 user-select: none과 함께 사용하시는 걸 추천합니다. 또한, 위 예시처럼 복잡한 이미지를 배경으로 넣으면 굉장히 산만한 효과를 연출할 수 있기 때문에,...
반응형 유튜브 비디오 만들기

반응형 유튜브 비디오 만들기

데모 페이지Github 위 비디오처럼 CSS로 요소를 특정 비를 유지하며 크기가 줄어들도록 하실 수 있습니다. .resvid { position: relative; width: 100%; padding-bottom: 56.25%; margin: auto } .resvid iframe { position: absolute; width: 100%; height: 100% } .resvid.alt { width: 35%; padding-bottom: 62.22% } .resvid.square { width: 70%; padding-bottom: 70% } .resvid.old { width: 80%; padding-bottom: 60%...