개발 카테고리 글

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

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

요소를 클릭했을 때, 물결(Ripple)이 퍼져 나가는 것 같은 효과를 줄 수 있습니다.

[CSS] 열리는 문 만들기

CSS로 여닫을 수 있는 문 만들기

유튜브 썸네일 추출하기

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

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

CSS로 요소를 특정 비를 유지하며 크기가 줄어들도록 하실 수 있습니다.

손님 댓글 수정 기능 업데이트

브라우저에 쿠키를 저장해서 30분 동안은 작성자가 댓글을 수정할 수 있도록 업데이트했습니다. 브라우저 쿠키를 사용해서, 사용자 환경이 달라지면 수정할 수 없습니다. 답글 버튼 옆에 버튼들이 추가됩니다. 답글 바로 오른쪽 버튼은 수정 버튼, 그 다음은 삭제 버튼입니다. 수정 버튼을 클릭하면 이렇게 댓글을 수정할 수 있는 창이 댓글 안에 생깁니다. 삭제 버튼은 그냥 댓글이 삭제됩니다. 해당 댓글에만 접근

[CSS] 드로어(Drawer) 만들기

퓨어 CSS로 만든 드로어입니다.input과 label, 그리고 CSS 선택자인 ~만 적절히 조합하면 요소를 클릭하면 다른 요소에 class 더하고 빼는 수준의 작업은 CSS만으로도 할 수 있습니다. 먼저 CSS 선택자인 ~ 는 elem1 ~ elem2 와 같은 방식으로 사용하며, elem1 뒤에 있는 elem2 모두를 선택합니다.여기서 중요한 건, elem 1과 elem 2의 부모는 같은 요소여야 합니다. 당연히 label::before를 클릭해도

왜 블로그에 Vanilla JS를 사용했나

블로그를 Vanilla JS만 이용해 SPA(Single Page Application)로 업데이트한 후기도 정리해봤습니다.바닐라 자바스크립트로 SPA 만든 과정과 후기 들어가기 앞서 jQuery는 한때 굉장히 강력한 라이브러리였지만, 자바스크립트가 해야 할 일(eg. 양방향 데이터 바인딩)이 갈수록 많아지면서 React, Angular, Vue와 같은 라이브러리에 묻히는 라이브러리가 되었습니다. 하지만, 웹 애플리케이션 같은 거대한 규모가 아닌, 블로그 같은 작은 규모의 페이지에선 여전히 쉽고 강력한 라이브러리임은

[자바스크립트] 로또 추첨기

우연히 새로 발견한 개발자 커뮤니티를 둘러보다 발견한 프로젝트에서 아쉬운 점이 보여 후다닥 만들어봤습니다. 개선하고 싶었던 점은 1 - 버튼을 연타하면 애니메이션이 진행되는 중에도 결과가 바뀐다.2 - 새로운 숫자를 부여받을 때 조금 더 역동적인 애니메이션이 표시됐으면 좋겠다. 이 두 가지 사항입니다. let tmp = 1; let numbers; function decryptEffect(element, time) { const effect = setInterval(() =>