![[워드프레스] 플러그인 없이 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...
Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다. 대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ 처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다. 어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를...
스크린샷을 쌓아두기만 하다가 우르르 몰아서 생각하려니 뭘 바꿨는지 떠올리기가 힘들어질 때가 많네요.티스토리 스킨 만들 때부터 자주 하던 소린데, 아직 하고 있네요. 그래도 요즘은 굵직한 변화 있으면 스크린샷 찍어놓고 봅니다. 자잘한 것들은 계속 묻히지만요…;; 두 가지 문제 때문에 홈 화면에 있던 유튜브 비디오를 제거했습니다. 첫째, 생각보다 많은 리소스를 잡아먹습니다. 조금만 사양이 낮은 기기에서 테스트해도 컴퓨터가 힘겨워하더라고요....
페이지 좌측 상단의 삼선 메뉴에 마우스를 올리면 이렇게 화살표로 바뀌도록 해봤습니다. 모바일 기기에선 헤더 카테고리의 내용 자체를 표시하지 않습니다.(여담이지만, 크롬 개발자 도구에서 모바일 디바이스로 보게 설정하니 php에서도 모바일 기기로 접속한 것으로 인식하네요.) 유튜브 비디오도 이미지처럼 본문보다 커지도록 설정했습니다. 방명록 페이지를 추가했습니다.주소는 marshallku.com/guestbook으로 티스토리에서 쓰던 url과 동일합니다. guestbook이란 페이지를 생성하고 댓글을 달 수 있게 설정하는 꼼수를...
헤더 카테고리 눈에 드러나는 가장 큰 변화입니다.헤더에 카테고리 리스트를 최근 글, 썸네일과 함께 표시합니다. 티스토리에선 ajax로 모든 카테고리 페이지에서 글을 가져와서 사용자에게 꽤 부담되는 작업이었는데, 여기선 제가 서버를 만질 수 있으니 ajax를 이용하지 않고 작업했습니다. 티스토리에선 이 기능을 쓰면 최초 로딩 시 렉이 잠깐 걸렸는데 이젠 그럴 일이 없습니다. 아직 php가 익숙하지 않아서 생각보다 오래...