웹 카테고리 글

위 사진에 나온 글처럼 딱히 썸네일로 쓸만한 사진이 없는 포스트를 쓸 때, 지금까진 코드를 캡처하는 등 꽤 무성의한 방식으로 썸네일을 만들어왔습니다. 그래도 포스트를 대표하는 이미진데 조금 더 정성 들여 만들어야 하지 않을까 하는 생각이 문득 들더라고요. 그렇다고 매번 포토샵 키긴 귀찮고, 모바일이랑 PC 모두에서 이용할 수도 없으니, HTML5의 Canvas를 이용해 간단한 썸네일 제작 앱을 만들어보는...

홈 화면 슬라이더를 제거하고 이미지가 하나만 랜덤으로 나오도록 했습니다.같은 이미지만 계속 나오는데, 굳이 그 슬라이드를 보고 있을 이유가 없을 것 같더라고요. 저도 딱히 오래 보진 않고. 서버에서 랜덤 이미지를 뿌려주는데, PHP의 랜덤도 딱히 마음에 들진 않네요.JS보다 더 심하게 랜덤이 아닌 느낌이 듭니다. 태그 클라우드 추가 태그 클라우드용 페이지도 추가했습니다. 티스토리에선 정렬 방식도 마음대로 못 정해서...

얼마 전에 아침에 두꺼비집이 내려가 있어서 서버가 꺼진 적이 있습니다.찾아보니, 전기가 차단돼도 배터리로 일정 시간 전기를 공급해줄 수 있는 장치가 있던데, 과한 투자 같아 일단 참는 중입니다. ㅋㅋㅋ 컴퓨터를 24시간 켜두기만 하니 애가 힘들어하는 것 같아 요즘은 일주일에 한두 번 5분 정도씩 껐다 켜는 중입니다.귀찮은 동시에 뭔가 진짜 서버 관리하는 느낌도 나서 나쁘진 않네요. 물론...

들어가며 참고한 글 개인적으로 플러그인 사용을 선호하지 않아서, 플러그인 없이 개별 포스트에 카운터를 달 수 있게 작업했습니다. 위 글에 나온 소스를 적용하면, 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,...

뭐 사실 인터넷을 제대로 쓰기 시작하면서 단 한 번도 좋아한 적은 없는 브라우저입니다만, 웹을 배우면서는 싫어하는 브라우저가 된 이젠 언급하기도 지치는 익스플로러입니다. 티스토리 스킨 만들던 초창기엔 인터넷 익스플로러는 지원하지 않는다는 문구를 친절히 넣어뒀지만, 어느샌가 그것도 귀찮아 그냥 되건 말건 신경도 안 쓰고 살았습니다. 그래도 티스토리 쓰던 시절엔 jQuery로 짠 소스가 많아서 페이지를 볼 순 있었는데,...

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

요소를 클릭했을 때, 물결(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진수 색상을 이용해주시고, #은 제외하고...

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

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