html 포인터 변경, 커서 변경
#CSS#front-end#hover#onmouse 커서 변경#onmouse 포인터 변경#onmouseover#마우스 커서 변경하기#마우스 포인터 변경하기#커서 변경하기#포인터 변경하기
💡이 글의 요약
마우스를 가져갔을때 스타일이 바뀌는 것 쯤이야 style 태그 혹은 css 에 쉽게 적용할 수 있습니다. 하지만, 매번 div 하나를 위해 css 클래스를 만들고 :hover 와 같이 작성을 하는 것은 참 귀찮습니다. 그래서 오늘은 div의 style=""태그 안에 사용할 수 있는 onmouseover 효과를 적겠습니다 커서를 적용을 할 때에는, 많은 방법이 있겠지만, 설명드리게 될 방식은 한 번(한 페이지)만 실행될 커서 변경에 대한 코드입니다 아래는 지정할 수 있는 커서들의 목록이에요! auto 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. default 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. none 커서 없음. context-..
마우스를 가져갔을때 스타일이 바뀌는 것 쯤이야 style 태그 혹은 css 에 쉽게 적용할 수 있습니다. 하지만, 매번 div 하나를 위해 css 클래스를 만들고 :hover 와 같이 작성을 하는 것은 참 귀찮습니다. 그래서 오늘은 div의 style=""태그 안에 사용할 수 있는 onmouseover 효과를 적겠습니다
커서를 적용을 할 때에는, 많은 방법이 있겠지만, 설명드리게 될 방식은 한 번(한 페이지)만 실행될 커서 변경에 대한 코드입니다
아래는 지정할 수 있는 커서들의 목록이에요!
| auto | 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. | |
| default | 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. | |
| none | 커서 없음. | |
| context-menu | 콘텍스트 메뉴 사용 가능. | |
| help | 도움말 사용 가능. | |
| pointer | 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다. | |
| progress | 프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대) | |
| wait | 프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다. | |
| cell | 표의 칸이나 여러 칸을 선택할 수 있음. | |
| crosshair | 십자 커서. 종종 비트맵 선택에 사용합니다. | |
| text | 글씨 선택 가능. 보통 I빔 모양입니다. | |
| vertical-text | 세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다. | |
| alias | 별칭이나 바로가기를 만드는 중. | |
| copy | 복사하는 중. | |
| move | 움직이는 중. | |
| no-drop | 현재 위치에 놓을 수 없음. bug 275173: Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다. |
|
| not-allowed | 요청한 행동을 수행할 수 없음. | |
| grab | 잡을 수 있음. (잡아서 이동) | |
| grabbing | 잡고 있음. (잡아서 이동) | |
| all-scroll | 모든 방향으로 이동 가능. (패닝) bug 275174: Windows에서 all-scroll은 move와 같습니다. |
|
| col-resize | 항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다. | |
| row-resize | 항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다. | |
| n-resize | 움직일 수 있는 모서리. 예를 들어, se-resize 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 n-resize와 s-resize는 ns-resize와 같습니다. | |
| e-resize | ||
| s-resize | ||
| w-resize | ||
| ne-resize | ||
| nw-resize | ||
| se-resize | ||
| sw-resize | ||
| ew-resize | 양방향 크기 조절 커서. | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| zoom-in | 확대/축소할 수 있음. | |
| zoom-out |
See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.
