O
티스토리 마우스커서 적용
공개를해요

 
개인적으로 갠홈에 적용하던 코드인데 티스토리에서도 정상 동작 확인해서 배포합니다.
적용한 예시 이미지는 쟝아님 커미션입니다.(링크) 문제될 시 글은 내리겠습니다. (_ _)
 
갠홈은 아보카도 퍼스널 환경에서 확인했습니다.

 

 

수정 이력

2026-03-13. 게시글 공개 

 

 
 
수정하는 부분은 총 3가지입니다.
 

  1. 커서 파일(gif 확장자. ani X) 업로드
  2. html 편집
  3. css 추가

 
스킨 편집 > html편집
으로 들어가주세요.
 
 

커서 파일 업로드

 
추가 버튼을 눌러서 커서 파일을 업로드해주세요.
예제는 해당 경로를 기준으로 작성됩니다. 
 
cur_de.gif : 기본 커서
cur_c.gif : 클릭 커서
cur_t.gif : 텍스트 입력 커서
 
예제 파일명은 이렇게 되어있으나 예제와 맞추지 않고 아래 css에서 파일명을 수정하셔도 무방합니다.
 
 

HTML 편집

<div id="cusCur"></div>
<script>
    (function() {
        const cursor = document.getElementById('cusCur');
        if (!cursor) return;

        let mouseX = -100;
        let mouseY = -100;

        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        }, { passive: true });

        function curRender() {
            cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
            requestAnimationFrame(curRender);
        }
        requestAnimationFrame(curRender);
    })();
</script>

 
커서 위치 동작 스크립트입니다.
<body> 내부 최하단에 넣어주세요.
 
만약 동일한 id가 html 내에 이미 존재한다면 id를 바꿔주세요.
 
 

CSS 편집

/* cursor */
body * {
    cursor: none !important;
}
#phocus-container * {
    cursor: default !important;
}
#phocus-container .phocus-btn-item:hover {
    cursor: pointer !important;
}
#cusCur {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 48px; /*사이즈 다를경우 조절*/
    height: 48px;
    z-index: 999999;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    will-change: transform;
    transform: translate3d(-100%, -100%, 0);
    background-image: url('./images/cur_de.gif'); /*기본 커서 파일명 변경*/
}
/*클릭 커서 적용*/
body:has(
    a:hover,
    button:hover,
    [role="button"]:hover,
    .btn:hover,
    label:hover,
    select:hover,
    input[type="checkbox"]:hover,
    input[type="radio"]:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover,
    input[type="file"]:hover,
    input[type="range"]:hover,
    input[type="color"]:hover
) #cusCur {
    background-image: url('./images/cur_c.gif'); /*클릭 커서 파일명 변경*/
}
/*텍스트 커서 적용*/
body:has(
    input[type="text"]:hover,
    input[type="password"]:hover,
    input[type="email"]:hover,
    input[type="search"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="number"]:hover,
    textarea:hover,
    p:hover,
    [contenteditable="true"]:hover
) #cusCur {
    background-image: url('./images/cur_t.gif'); /*텍스트입력 커서 파일명 변경*/
}
body::after {
    position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1;
    content: url('./images/cur_c.gif') url('./images/cur_t.gif') /*텍스트입력, 클릭 커서 파일명 변경*/
}

 
css에 추가해주세요.
html에서 id를 바꾸셨다면 여기서도 cusCur 을 해당 id로 변경해주셔야 합니다.
 
마우스 커서 경로는 티스토리에 파일 올리신 경로(및 파일명)대로 작성하시면 됩니다.
예제와 파일명을 맞추지 않으셨다면
cur_de/cur_c/cur_t
를 각각 기본/클릭/텍스트입력 커서 파일명으로 변경해주세요. (5군데)
 
width, height 는 사용하시는 커서 사이즈대로 해주세요! 예제는 48*48 사이즈를 기준으로 작성되었습니다만 표준 사이즈는 아마 32*32 입니다….
 
개인적인 선호로 클릭 혹은 입력할때 커서가 바뀌게끔 해놨습니다만 커서 종류를 1개만 사용하신다면 아래쪽을 사용해주세요. ^_^
파일명은 하나만 변경하시면 됩니다.
 

/* cursor */
body * {
    cursor: none !important;
}
#phocus-container * {
    cursor: default !important;
}
#phocus-container .phocus-btn-item:hover {
    cursor: pointer !important;
}
#cusCur {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 48px; /*사이즈 다를경우 조절*/
    height: 48px;
    z-index: 999999;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    will-change: transform;
    transform: translate3d(-100%, -100%, 0);
    background-image: url('./images/cur_de.gif'); /*기본 커서 파일명 변경*/
}

 
추가적으로 다른 커서gif 사용을 원할 시, css내에서 추가로 분기를 나눠주시면 되겠습니다.
 
 
저장하신 후 정상적으로 동작하는지 확인해주세요!
 
 
원래는 마우스 환경에서만 커서를 보이게 하려고 했는데 제가 코드를 수정하다 말았기 때문에, 터치 환경에서도 (직전 터치 위치에) 커서가 나타납니다….
동작에 치명적인 큰 문제가 생기지 않는다면 당분간은 방치할 확률이 높습니다. ^_T;

 

 

적용시 문제가 있을경우, 트위터로 연락주시면 확인해보겠습니다.

평일 저녁에 주로 확인이 가능하므로 빠른 확인은 힘듭니다.
 

감사합니다.
 
 

티스토리툴바