π» Programming/CSS
[CSS] 16. Cursor ( λ§μ°μ€ 컀μ λͺ¨μ )
μΌμ΄μΉ
2016. 6. 12. 18:05
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