[ CSS 입문 ] cursor 속성

| 개요

cursor 속성을 이용하면 해당 태그 위에 마우스를 위치할 때 마우스 커서 모양을 마음대로 바꿀 수 있습니다.

 

 

| 예제

<style type="text/css">
   .cursors span{
      display: inline-block;
      margin: 5px;
      padding: 5px 10px;
      background-color: #d2f4ff;
      border: 2px solid #09c;
   }
</style>

<div class="cursors">
   <span style="cursor: auto">Auto</span>
   <span style="cursor: crosshair">Crosshair</span>
   <span style="cursor: default">Default</span>
   <span style="cursor: pointer">Pointer</span>
   <span style="cursor: move">Move</span>
   <span style="cursor: e-resize">e-resize</span>
   <span style="cursor: ne-resize">ne-resize</span>
   <span style="cursor: nw-resize">nw-resize</span>
   <span style="cursor: n-resize">n-resize</span>
   <span style="cursor: se-resize">se-resize</span>
   <span style="cursor: sw-resize">sw-resize</span>
   <span style="cursor: s-resize">s-resize</span>
   <span style="cursor: w-resize">w-resize</span>
   <span style="cursor: text">Text</span>
   <span style="cursor: wait">Wait</span>
   <span style="cursor: help">Help</span>
</div>

| 결과값

Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help