- 위 예제의 커서 이름을 사용하면 됩니다.
- cursor : 커서이름
- cursor : pointer
- 자가복제 마우스도 한번 눌러보세요 ㅎ (제이쿼리 공작소를 오픈하면 다르겠습니다)
cursor
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
cursor 는 마우서 커서를 지정합니다.
화살표, 십자선, 모래시계등 .. 아 모래시계는 옛날 이야기 인가요..
등으로 커서를 바꾸어 줍니다. ^^;
예제 1
아래에 마우스를 올려보세요
보기
| auto | crosshair | default | pointer |
| e-resize | w-resize | s-resize | n-resize |
| se-resize | nw-resize | ne-resize | sw-resize |
| text | wait | help |
자가복제 마우스 클릭해 보세용  |
설명
예제 2
resize 마우스 커서 이름의 유래(?)
보기
| nw-resize 북서 |
n-resize 북 |
ne-resize 북동 |
| w-resize 서 |
 그렇군! (↑마구클릭) |
e-resize 동 |
| sw-resize 남서 |
s-resize 남 |
se-resize 남동 |
설명
- 동서남북의 앞글자를 의미합니다.
- east, west, south, north
- 가운데 얼굴에 제이쿼리로 장난좀 쳐 봤습니다. ^^; (클릭해 보세용)
- east, west, south, north
- 가운데 얼굴에 제이쿼리로 장난좀 쳐 봤습니다. ^^; (클릭해 보세용)
연구 1
제이쿼리와 crosshair 마우스 커서로 놀아보기(?) - 벽을 조준후 클릭해서 파괴하세요.
보기
소스
<script type="text/javascript">
function explode(o){
$(o).effect('explode', 500, function(){
$(o).show();
});
}
</script>
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : crosshair;
}
</style>
<div class="css_test">
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/><br><br>
<img src="/img/css/bg0280.gif" onclick="explode(this)" style="width:300px"/>
</div>
function explode(o){
$(o).effect('explode', 500, function(){
$(o).show();
});
}
</script>
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : crosshair;
}
</style>
<div class="css_test">
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/>
<img src="/img/css/bg0280.gif" onclick="explode(this)"/><br><br>
<img src="/img/css/bg0280.gif" onclick="explode(this)" style="width:300px"/>
</div>
사용된 CSS (클릭시 보기) :
cursortext-align
설명
- 어디다 쓰면 좋을까 생각하다 만들어 보았습니다.
- 재미는 없네요 ^^;
- 재미는 없네요 ^^;