[마우스 꾸미기 1탄] 마우스 모양 바꾸기

기본 마우스 모양이라면 너무 단조로워서 마우스 모양을 바꿔 보기 위해 정리하던중, 여러가지 방법이 있어서 정리해 보았다.

내가 정리한 방법은 총 3가지로 1탄,2탄, 3탄에 걸쳐 포스팅을 나눠보았다.

참고로, [코딩 공부하는 소라(https://webkimsora.tistory.com/61)]님의 블로그에서 찾은 내용에 의하면, 커서 모양을 바꾸는 것은 모바일용 브라우저, 오페라 에서는 적용이 안되며, 익스 6이상에서는 가능하다고 한다.

즉, 브라우저마다 적용 가능한 커서 모양이 다르니, 이 점을 꼭 알고 계시길!

---

[마우스 꾸미기 1탄] 마우스 모양 바꾸기

기본 커서의 속성을 바꿔 마우스 모양을 GUI에서 사용하는 모양으로 바꾸는 방법에 대해 설명했다.

이번 포스팅의 주요 내용이다.

[마우스 꾸미기 2탄] 마우스 아이콘의 이미지를 변경

마음에 드는 아이콘을 웹 배포용 이미지를 이용하여 변경할 수 있다.

이 부분에 대해선 아래의 포스팅을 참고하길 바란다.

[마우스 꾸미기 2탄] 마우스 아이콘 바꾸기

[마우스 꾸미기 3탄] 내가 만든 마우스로 지정

쉽게 아이콘을 제작해서 나만의 아이콘을 만들고 싶다면 아래 포스팅을 참고하시길!

[마우스 꾸미기 3탄] 마우스를 내가 만든 아이콘으로 바꾸기

---

1) 기본 커서 속성 변경하기

 

<CSS>에서 아래와 같은 형태로 소스를 편집하는 것으로 커서 모양을 변경할 수가 있다.

◯◯에는 어느 부분에 {커서 : 커서의 모양을 넣을 지를 나타낸다.

◯◯ {cursor: 지정값;}

참고로, 기본 커서 모양을 변경하는 데에 있어 어떤 형태가 있는 지 아래의 테이블에서 확인할 수 있다.

pointer	all-scroll	alias	none	copy
cell	col-resize	crosshair	default	help
move	wait	progress	*-resize	not-allowed
row-resize	text	vertical-text	zoom-in	zoom-out

출처: https://sunday-sunny.tistory.com/13 [화창한 일요일] 

지정하고 싶은 모양을 정해서 소스를 편집해 준다.

---

  Cell 모양 마우스를 페이지 전체에 적용하기

CSS에 추가하는 방법인데 블로그 관리> 스킨 편집을 누른다.

스킨 편집에서 HTML편집을 클릭한다.

 CSS탭을 클릭!

CSS에서 html,body부분에 아래의 소스를 붙여넣기를 해준다.

cursor에는 위의 테이블을 참고하여 원하는 커서 모양을 지정한다.

나는 cell모양으로 해보고 싶어서 cell을 값으로 지정했는데 적용이 안됬다. 간혹, 브라우저에 따라서 CSS가 적용이 안되는 경우가 있다. 브라우저 자체에서 대응하지 않아서 그런 건데, 그런 경우를 위해, auto설정을 넣어 CSS로 지정된 모양이 적용되지 않더라도,기본 모양(default)으로 마우스가 나타나도록 할 수 있다.

html, body { cursor: cell, auto;}

이 방법이 안된다면, 아래와 같은 방법을 적용해 보자.

우선 css에 커서 모양을 적용할 요소를 만든다. 사실 나도 잘 몰라서 Accessibility Navigation에 넣어줬다..

#demo_241-7{
   cursor: cell;
 }

그런 다음 HTML에 가서 하이퍼링크를 적용시킬 <a href>태그에 CSS에서 지정한 id인 demo_241-7을 부여한다.

참고로 id는 임의로 아무거나 자신이 하고 싶은 거로 정해도 된다.

예를 들면, id="apple"이라던가 알기 쉽도록!

헷갈린다면 아래와 같이 <a href="하이퍼링크를 걸 주소" id="CSS에서 지정한 커서 요소값"> 링크시 보여지는 문자 </a>로 구성된 태그를 넣으면 된다. 

즉, id는 CSS탭에서 넣어준 demo_241-7를 넣어주면 된다.

	<a href="" id="demo_241-7"> H o m e </a>

이렇게 하면, 링크를 걸었던 H o m e 부분에 커서를 놓으면 cell 모양으로 바뀌는 것을 확인할 수 있다!

---

  특정 부분에만 적용 

특정 부분에만 적용하고 싶다면 style을 이용해서 적용할 수 있다.

예를 들어, "cell"이라는 문자열에 커서를 올렸을 때 모양이 바뀌게 하고 싶다면, 아래와 같이 style에 cursor모양을 지정한다.

<p style="cursor:cell"> cell </p>

cell이라는 문자열에 커서를 갖다 대면 cell 모양으로 바뀌는 것을 알 수 있다.

cell

자세한 내용은 아래 사이트들을 참고하면 좋을 듯 하다.

---

참고&출처 사이트

[CSS] cursor 마우스 커서 정리

[css] cursor 속성 (마우스 모양 선택)