πŸ’» Programming/CSS

[CSS] 16. Cursor ( 마우슀 μ»€μ„œ λͺ¨μ–‘ )

μΌ€μ΄μΉ˜ 2016. 6. 12. 18:05

CSSμ—μ„œλŠ” μ»€μ„œμ˜ λͺ¨μ–‘을 μ„€μ •ν•  수 μžˆλŠ” cursor 속성을 μ œκ³΅ν•©λ‹ˆλ‹€. 

이 속성은 submitλ²„νŠΌμ„ λˆ„λ₯Όλ•Œ 마치 링크가 κ±Έλ €μžˆμ„ λ•Œ 손가락이 λ³΄μ΄λŠ” κ²ƒμ²˜λŸΌ 섀정을 해쀄 수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€.  

 

μ•„λž˜ ν…Œμ΄λΈ”μ—λŠ” μ»€μ„œ 속성이 κ°€μ§ˆ 수 μžˆλŠ” 값듀에 λŒ€ν•œ μ„€λͺ…이 λ‚˜μ™€μžˆμŠ΅λ‹ˆλ‹€.

ValueDescription
autoShape 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...
crosshairA crosshair or plus sign
defaultAn arrow
pointerA pointing hand (in IE 4 this value is hand)
moveThe I bar
e-resizeThe cursor indicates that an edge of a box is to be moved right (east)
ne-resizeThe cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resizeThe cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resizeThe cursor indicates that an edge of a box is to be moved up (north)
se-resizeThe cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resizeThe cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resizeThe cursor indicates that an edge of a box is to be moved down (south)
w-resizeThe cursor indicates that an edge of a box is to be moved left (west)
textThe I bar
waitAn hour glass
helpA 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>

 

κ²°κ³ΌλŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

각 속성값 λͺ…μΉ­ μœ„μ— 마우슀λ₯Ό μ˜¬λ €λ³΄μ„Έμš”. 마우슀 μ»€μ„œλͺ¨μ–‘이 λ³€ν•˜λŠ” 것을 보싀 수 μžˆμ„ κ²λ‹ˆλ‹€.
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_cursors.htm