지니가는사람 0

마우스 커서 css 코드 입니다.

많은 분들이 관심을 기지고 계셔서 일부 수정한 내용 다시 포스팅 합니다.

적용 방법은 다음 예시(휴게더 마우스 커서)처럼 32 * 32 PX(픽셀) 사이즈로 배경 투명화, PNG 파일 형식으로 평상시 마우스 커서 1종, 글이나 그림에 커서를 올렸을때 적용될 마우스 커서 1종으로 총 2가지 종류가 필요합니다.

-> 사이즈는 정사각형, 직사각형 등 상관없었습니다. 다만 여러가지 사이즈를 써본 결과 32 ~ 36px 사이를 썼을 때 가장 무난했습니다.

움직이는 이미지로도 테스트 해보았는데 아무래도 크기가 작아 좋지 않았습니다. 참고해주시면 되겠습니다.

-> 움직이는 이미지를 사용할 경우 36px 로 작업하니 무난했습니다.

이미지를 만드신 다음에 디스코드 서버를 만드시고 이미지 업로드 -> 이미지 링크 복사 후 "/* 1 */" 부분을 지우고 평상시에 쓸 커서 1종 링크를 넣어주시고, 똑같은 방식으로 "/* 2 */"에 바뀔 마우스 커서 1종을 넣어서 트게더 css 코드에 추가해주시면 됩니다.

커서가 바뀌지 않아도 괜찮으신 분은 "/* 2 */에도 "/* 1 */" 링크를 그대로 넣어주시면 됩니다.

-> 커서를 한종류로 쓰실경우 /* 1 */과 /* 2 */를 지우고 해당 위치에 링크를 넣어주시면 됩니다. 이미지 링크는 디스코드 서버를 생성하여 업로드 후에 마우스 오른쪽을 누르면 링크 복사가 나옵니다. 그 링크를 넣으시면 됩니다.

-------------------------------------------

html,

body,

.fr-popup.emoticons,

.fr-top,

select.form-control,

input[type=checkbox],

input[type=radio],

.opt

{

cursor: url(/* 1 */) 0 0, auto !important;

}

#right-search-form>#right-search-btn,

#board-info #board-info-bottom #addFavoriteBtn,

#article-list #article-option-area>#article-option-area-toggle-btn,

#article-list>.article-list-row>.item>.list-title>.list-writer>span,

.reply > .reply-header > .reply-writer.logged,

.reply-menu,

.btn,

.fr-toolbar .fr-command.fr-btn,

.fr-popup .fr-command.fr-btn,

.fr-view img,

.pull-left,

a {

cursor: url(/* 2 */) 0 0, auto !important;

}

span#viewers,

#article-list #boardSearchForm .form-control,

.fr-view,

.fr-box.fr-basic.fr-element,

input[type='text']

{

cursor: url(/* 2 */) 0 0, auto !important;

}

-------------------------------------------