CSS에서는 커서의 모양을 설정할 수 있는 cursor 속성을 제공합니다.
이 속성은 submit버튼을 누를때 마치 링크가 걸려있을 때 손가락이 보이는 것처럼 설정을 해줄 수 있도록 해줍니다.
아래 테이블에는 커서 속성이 가질 수 있는 값들에 대한 설명이 나와있습니다.
| Value | Description |
|---|---|
| auto | Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on... |
| crosshair | A crosshair or plus sign |
| default | An arrow |
| pointer | A pointing hand (in IE 4 this value is hand) |
| move | The I bar |
| e-resize | The cursor indicates that an edge of a box is to be moved right (east) |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
| n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
| s-resize | The cursor indicates that an edge of a box is to be moved down (south) |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) |
| text | The I bar |
| wait | An hour glass |
| help | A question mark or balloon, ideal for use over help buttons |
| <url> | The source of a cursor image file |
그럼 다음 예제를 한번 보도록 하죠.
<p>각 속성값 명칭 위에 마우스를 올려보세요. 마우스 커서모양이 변하는 것을 보실 수 있을 겁니다.</p> <div style="cursor:auto">Auto</div> <div style="cursor:crosshair">Crosshair</div> <div style="cursor:default">Default</div> <div style="cursor:pointer">Pointer</div> <div style="cursor:move">Move</div> <div style="cursor:e-resize">e-resize</div> <div style="cursor:ne-resize">ne-resize</div> <div style="cursor:nw-resize">nw-resize</div> <div style="cursor:n-resize">n-resize</div> <div style="cursor:se-resize">se-resize</div> <div style="cursor:sw-resize">sw-resize</div> <div style="cursor:s-resize">s-resize</div> <div style="cursor:w-resize">w-resize</div> <div style="cursor:text">text</div> <div style="cursor:wait">wait</div> <div style="cursor:help">help</div> |
결과는 아래와 같습니다.
|
Reference : http://www.tutorialspoint.com/css/css_cursors.htm
| [CSS] 18. Dimension ( 높이, 너비, width, height ) (0) | 2016.06.12 |
|---|---|
| [CSS] 17. Outlines ( 외곽선, 아웃라인 ) (0) | 2016.06.12 |
| [CSS] 15. Paddings ( 패딩 ) (0) | 2016.06.12 |
| [CSS] 14. Lists ( 리스트, 목록 ) (0) | 2016.06.12 |
| [CSS] 13. Margins ( 마진, 여백 ) (0) | 2016.06.12 |