일단 이쯤하고 테마 수정은 멈춰야 하나 싶네요 ㅋㅋㅋ블로그에 추가되는 포스트는 별로 없는데, 와중에 테마는 수정하려니 뭔가 한계가 오네요. 당분간은 테마 수정보다 무슨 글 쓸지를 고민해봐야겠습니다. 테마 부분을 손봤습니다.예전처럼 밝은 / 어두운 테마만 선택할 수 있는 게 아니라, 블로그에 있는 모든 테마를 선택할 수 있습니다. 예전엔 2페이지에서 1페이지를 불러올 때도 글 목록 아래의 로더가 표시됐는데, 이젠...
![[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기](https://wp.marshallku.com/wp-content/uploads/2019/07/postcount-400x108.png)
워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $category->count 혹은 $category->category_count 를 사용하면 해당 카테고리의 포스트 개수가 출력됩니다. 하지만, 위와 같은 코드는 하위 카테고리의 포스트는 세지 않고, 순수하게 해당 카테고리의 포스트 개수만 출력합니다. function postCount($id) { $count = get_category($id)->count; foreach (get_categories(array('child_of' => $id)) as $category) { $count += $category->count; } return $count; } function.php에 위 함수를...
홈 화면을 조금 더 꾸며봤습니다.예전 티스토리처럼 특정 카테고리의 글을 표시하는데, 아직 쓴 포스트가 별로 없어 뭘 좀 많이 추가하진 못했습니다. 작업하며 썸네일이 배경으로 들어가는 리스트도 만들었습니다. 예전엔 커버에만 사용할 수 있었지만, 이번엔 카테고리 글 목록 등에도 사용할 수 있도록 했습니다. 헤더에 카테고리 글 목록을 표시하고, 해당 카테고리에 3일 내로 쓴 글이 있으면 동그라미 하나가 표시되도록...
![[워드프레스] 플러그인 없이 Infinite Scroll 사용하기](https://wp.marshallku.com/wp-content/uploads/2019/07/infinite-scroll-400x225.png)
Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다. 테마 수정하기 PHP <?php get_header(); ?> <main id="main" class="postList<?php echo postListStyle() ?>"> <div class="gutter-sizer"></div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <a class="link_post<?php...
블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다.블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다. HTML <div class="m_todo"> <h1>할 일 목록</h1> <ul> <li> <span>장보기</span> <div class="checkbox"></div> </li> <li done> <span>호텔 델루나 시청</span> <div class="checkbox"></div> </li> </ul> </div> CSS .m_todo { margin: 0 auto; background: #4DD0E1; padding: 10px; border-radius:...
Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다. 대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ 처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다. 어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를...
스크린샷을 쌓아두기만 하다가 우르르 몰아서 생각하려니 뭘 바꿨는지 떠올리기가 힘들어질 때가 많네요.티스토리 스킨 만들 때부터 자주 하던 소린데, 아직 하고 있네요. 그래도 요즘은 굵직한 변화 있으면 스크린샷 찍어놓고 봅니다. 자잘한 것들은 계속 묻히지만요…;; 두 가지 문제 때문에 홈 화면에 있던 유튜브 비디오를 제거했습니다. 첫째, 생각보다 많은 리소스를 잡아먹습니다. 조금만 사양이 낮은 기기에서 테스트해도 컴퓨터가 힘겨워하더라고요....
![[자바스크립트] 자동으로 글자 적고 지우기](https://wp.marshallku.com/wp-content/uploads/2019/07/type-400x105.png)
How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다. let i = 0, j = 0; const textArray = ["HTML", "CSS", "Javascript"], speed = 100, target = document.getElementById("type"); function txtnum() { j == textArray.length - 1 ? j = 0 : j++ } function type() { i < textArray[j].length ? (target.innerHTML += textArray[j].charAt(i), i++,...
jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다. function toggleSlide(element) { let a; 0 === element.offsetHeight ? ( element.style.height = "auto", a = element.offsetHeight, element.style.height = 0, void element.offsetHeight, element.style.height = `${a}px` ) : element.style.height = 0 } 함수를 실행하면 요소의...