개발 카테고리 글

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

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

HTML5 Canvas로 밤하늘 그리기

https://codesandbox.io/s/z68y1012yl 참고한 글 https://github.com/marshallku/canvas-night-sky 깃허브 땐나의 계절인 여름도 왔고, 호텔 델루나 보다 보니 보름달이 뜬 밤하늘이 예뻐서 인터넷 뒤적이며 만들어 봤습니다.어디에 써먹을지 고민을 좀 해봤는데, 막상 써먹을 데가 없는 게 아쉽네요. ㅠㅠ HTML에 nightsky란 ID를 지닌 canvas 추가하시고 아래 스크립트만 붙여 넣으셔도 작동합니다. const width = window.innerWidth, height = window.innerHeight, stars = createStars(width, height, 30),

190717 워드프레스 테마 제작일지

일단 이쯤하고 테마 수정은 멈춰야 하나 싶네요 ㅋㅋㅋ블로그에 추가되는 포스트는 별로 없는데, 와중에 테마는 수정하려니 뭔가 한계가 오네요. 당분간은 테마 수정보다 무슨 글 쓸지를 고민해봐야겠습니다. 테마 부분을 손봤습니다.예전처럼 밝은 / 어두운 테마만 선택할 수 있는 게 아니라, 블로그에 있는 모든 테마를 선택할 수 있습니다. 예전엔 2페이지에서 1페이지를 불러올 때도 글 목록 아래의 로더가 표시됐는데, 이젠

[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기

워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $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에 위 함수를

190715 워드프레스 테마 제작일지

홈 화면을 조금 더 꾸며봤습니다.예전 티스토리처럼 특정 카테고리의 글을 표시하는데, 아직 쓴 포스트가 별로 없어 뭘 좀 많이 추가하진 못했습니다. 작업하며 썸네일이 배경으로 들어가는 리스트도 만들었습니다. 예전엔 커버에만 사용할 수 있었지만, 이번엔 카테고리 글 목록 등에도 사용할 수 있도록 했습니다. 헤더에 카테고리 글 목록을 표시하고, 해당 카테고리에 3일 내로 쓴 글이 있으면 동그라미 하나가 표시되도록

[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다.

블로그에 투 두 리스트 추가하기

블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다. 블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다.

홈 화면 변경점

Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다. 대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ 처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다. 어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를

190709 워드프레스 테마 제작일지

스크린샷을 쌓아두기만 하다가 우르르 몰아서 생각하려니 뭘 바꿨는지 떠올리기가 힘들어질 때가 많네요.티스토리 스킨 만들 때부터 자주 하던 소린데, 아직 하고 있네요. 그래도 요즘은 굵직한 변화 있으면 스크린샷 찍어놓고 봅니다. 자잘한 것들은 계속 묻히지만요…;; 두 가지 문제 때문에 홈 화면에 있던 유튜브 비디오를 제거했습니다. 첫째, 생각보다 많은 리소스를 잡아먹습니다. 조금만 사양이 낮은 기기에서 테스트해도 컴퓨터가 힘겨워하더라고요.