[HTML-CSS] 이미지(img) 위에서, 마우스 커서를 십자가(플러스 기호)로 변경

이미지 위에서는 하얀 마우스 커서가 거추장스럽고, 그림의 감상을 방해할 수도 있습니다. 마우스 커서가 그림 위를 지날 때에, 커서를 십자가 등으로 변경하면 편리합니다.

모든 그림에서 마우스 커서 변경하는 코드

웹페이지의 head 부분에 위와 같이 정의해 주면, 본문의 모든 그림에서 커서가 변경됩니다.

특정 그림에서만 마우스 커서 변경하는 코드

모든 그림에서 커서 변경하는 것보다는, 다음과 같이 특정 그림에만 별도로 지정해 주는 것이 좋습니다.




결과:



cursor:crosshair 이 속성은, 파이어폭스에도 IE에서와 똑같이 잘 작동합니다.

이미지 외에, <div> 등의 태그에서도 cursor 속성으로 마우스 커서를 바꿀 수 있습니다. 위의 코드박스에도 현재 십자가 커서가 지정되어 있습니다. 그러나 텍스트가 있는 곳에서 커서를 변경하면 방문객들에게 혼란을 줄 수 있기 때문에 기본값으로 놔 두는 것이 바람직합니다.


▶▶ HTML CSS, 마우스 커서 변경 방법, 모래시계, 십자가; Mouse Cursor Change

☞ HTML | CSS | 자바스크립트 JavaScript

---

Q: 진짜 십자가 이미지 있는 곳은?

HTML 말고, 교회에서 쓸 십자가 이미지(The Holy Cross)는?

A: 다음 주소에서 검색해 보시기 바랍니다:
<구글 이미지 검색에서 cross 로 검색>