개발 카테고리 글

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),

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

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

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

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

[자바스크립트] 자동으로 글자 적고 지우기

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다.

바닐라에서 jQuery slideToggle 구현하기

jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다.

CSS filter blur 렉 해결하기

filter blur만 사용하면 버벅이는 브라우저 렉 해결하기

[자바스크립트] 기기 방향 감지하기

기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. const box = document.getElementById("testBox"); function handleOrientation(event) { const alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (!beta) { addMouseEvent() } document.getElementById("alpha").innerText = alpha, document.getElementById("beta").innerText = beta, document.getElementById("gamma").innerText = gamma, box.style.transform

홈서버 설치기 - 1

CPU E3-1220V2보드 GA-B75M-D3H 램 ddr3 2gb * 2 파워 잘만 zm350 HDD 도시바 2TB GPU는 아는 컴퓨터집사장님이 남는다고 하나 주셨는데, 모델을 확인 안 해봤네요. 여하튼 꽂아뒀습니다. 케이스는 DAVEN 크리스탈 3.0 풀 아크릴이란 제품을 이용했습니다. 케이스에 파워를 고정할 순 없지만, 본체가 누워있을 예정이라 크게 신경 쓰진 않았습니다.세워둘 상황이 와도 그냥 거꾸로 세워두면 별문제 없지 않을까 싶네요.