배너 이미지

홈 화면 변경점

홈 화면 변경점

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

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

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

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

바닐라에서 jQuery slideToggle 구현하기

바닐라에서 jQuery slideToggle 구현하기

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 } 함수를 실행하면 요소의...

CSS filter blur 렉 해결하기

CSS filter blur 렉 해결하기

css의 filter blur의 렉이 생각보다 심하더라고요.평상시엔 렉이 전혀 없는데, 이미지를 불러오는 등 특정 작업을 하고 있을 땐 꽤 심하게 버벅댑니다. #element { transform: translateZ(0); will-change: transform; backface-visibility: hidden; transition: .5s } #element:hover { filter: blur(5px) } 위 코드를 사용해 어느 정도 해결했습니다. 항상 생기는 렉도 아니고, 테스트 중인 GPU도 1660TI로 그리 나쁜 제품은 또 아니라서,...

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

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

페이지 좌측 상단의 삼선 메뉴에 마우스를 올리면 이렇게 화살표로 바뀌도록 해봤습니다. 모바일 기기에선 헤더 카테고리의 내용 자체를 표시하지 않습니다.(여담이지만, 크롬 개발자 도구에서 모바일 디바이스로 보게 설정하니 php에서도 모바일 기기로 접속한 것으로 인식하네요.) 유튜브 비디오도 이미지처럼 본문보다 커지도록 설정했습니다. 방명록 페이지를 추가했습니다.주소는 marshall-ku.com/guestbook으로 티스토리에서 쓰던 url과 동일합니다. guestbook이란 페이지를 생성하고 댓글을 달 수 있게 설정하는 꼼수를...

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

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

            기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. 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...

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

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

헤더 카테고리 눈에 드러나는 가장 큰 변화입니다.헤더에 카테고리 리스트를 최근 글, 썸네일과 함께 표시합니다. 티스토리에선 ajax로 모든 카테고리 페이지에서 글을 가져와서 사용자에게 꽤 부담되는 작업이었는데, 여기선 제가 서버를 만질 수 있으니 ajax를 이용하지 않고 작업했습니다. 티스토리에선 이 기능을 쓰면 최초 로딩 시 렉이 잠깐 걸렸는데 이젠 그럴 일이 없습니다. 아직 php가 익숙하지 않아서 생각보다 오래...

홈서버 설치기 - 1

홈서버 설치기 - 1

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

1415161718
카카오페이 qr코드 모바일이시라면 클릭