Properties

Properties

Editing
  • account_tree
  • bug_report

cursor

커서의 모양을 설정한다.

사용 가능한 값 타입

<'cursor'>

DEVDIC-Specified Data Types

cursor 속성에 사용되는 타입이다.

  • CSS Basic User Interface Module Level 4
    [ [<url> [<x> <y>]?,]*[ auto | default | none |context-menu | help | pointer | progress | wait |cell | crosshair | text | vertical-text |alias | copy | move | no-drop | not-allowed | grab | grabbing |e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll |zoom-in | zoom-out] ]

사용되는 키워드

  • alias

    커서가 가리키고 있는 대상으로 부터 별칭/바로가기가 생성될 수 있음을 나타낸다.

  • all-scroll

    항목을 모든 방향으로 스크롤할 수 있음을 나타낸다.

  • auto

    UA(user agent)는 현재 컨텍스트에 따라 표시할 커서를 결정한다. 특히 선택 가능한 텍스트 또는 편집 가능한 요소에 대해 텍스트로 작동하고 그 외는 기본 값을 사용한다.

  • cell

    셀(cell) 또는 셀 집합을 선택할 수 있음을 나타낸다.

  • col-resize

    열의 크기를 가로로 조정할 수 있음을 나타낸다.

  • context-menu

    커서가 가리키는 대상에 따라 상황에 맞는 메뉴를 사용할 수 있음을 나타낸다.

  • copy

    커서가 가리키는 대상이 복사될 수 있음을 나타낸다.

  • crosshair

    보통 2차원 비트맵 이미지의 선택 모드를 나타낸다.

  • default

    운영체제에 따라 기본 커서를 나타낸다. 일반적으로 화살표 모양을 갖는다.

  • e-resize

    동쪽 방향을 가리키는 화살표를 나타낸다.

  • ew-resize

    동서쪽 양방향을 가리키는 화살표를 나타낸다.

  • grab

    커서가 가리키는 대상이 잡아 끌어 드래그 될 수 있음을 나타낸다.

  • grabbing

    잡아 끌어 드래그되고 있음을 나타낸다.

  • help

    커서가 가리키는 대상에 대한 도움말을 사용할 수 있음을 나타낸다.

  • move

    이동이 가능한 대상임을 나타낸다.

  • n-resize

    북쪽 방향을 가리키는 화살표를 나타낸다.

  • ne-resize

    북동쪽 방향을 가리키는 화살표를 나타낸다.

  • nesw-resize

    북동쪽과 남서쪽 양방향을 가리키는 화살표를 나타낸다.

  • no-drop

    드래그한 대상을 커서가 가리키는 위치에 놓을 수 없음을 나타낸다.

  • none

    커서를 표시하지 않는다.

  • not-allowed

    요청한 작업이 수행되지 않음을 나타낸다.

  • ns-resize

    남북쪽 양방향을 가리키는 화살표를 나타낸다.

  • nw-resize

    북서쪽 방향을 가리키는 화살표를 나타낸다.

  • nwse-resize

    북서쪽과 남동쪽 양방향을 가리키는 화살표를 나타낸다.

  • pointer

    링크를 의미하며 클릭할 수 있음을 나타낸다. 일반적으로 집게 손가락을 펼친 손의 뒷면으로 표시한다. 명시적으로 지정하지 않아도 링크가 걸린 대상들은 UA 스타일시트에 의해 자동으로 나타낸다.

  • progress

    프로그램이 처리중임을 나타내며 사용자는 다른 상호작용이 가능함을 나타낸다. 운영체제에 따라 보여지는 커서의 모양은 다를 수 있다.

  • row-resize

    행의 크기를 세로로 조정할 수 있음을 나타낸다.

  • s-resize

    남쪽 방향을 가리키는 화살표를 나타낸다.

  • se-resize

    남동쪽 방향을 가리키는 화살표를 나타낸다.

  • sw-resize

    남서쪽 방향을 가리키는 화살표를 나타낸다.

  • text

    선택 가능한 텍스트를 나타낸다.

  • vertical-text

    선택 가능한 세로 텍스트를 나타낸다.

  • w-resize

    서쪽 방향을 가리키는 화살표를 나타낸다.

  • wait

    프로그램이 처리중이며 사용자는 기다려야 함을 나타낸다.

  • zoom-in

    대상을 확대할 수 있음을 나타낸다.

  • zoom-out

    대상을 축소할 수 있음을 나타낸다.

관련 함수

모든 함수를 표시하지 않을 수도 있다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'cursor'〉auto
    CSS Basic User Interface Module Level 4

    UA(user agent)는 현재 컨텍스트에 따라 표시할 커서를 결정한다. 특히 선택 가능한 텍스트 또는 편집 가능한 요소에 대해 텍스트로 작동하고 그 외는 기본 값을 사용한다.

  • CSS Basic User Interface Module Level 4

    CSS에서 사용할 외부 리소스를 가져온다.

    사용자가 지정한 리소스를 커서로 사용한다. url() 함수로 리소스를 지정할 수 있으며 콤마로 구분된 리스트로 작성할 수 있다. UA는 리스트 순서에 따라 사용 가능한 리소스를 검색하고 사용할 수 없는 경우 순차적으로 검색해서 사용 가능한 리소스를 찾아 적용한다. 만약에 사용자 커서를 모두 검색할 수 없는 경우 마지막에 지정된 커서 키워드를 사용한다. 좀더 자세한 사용은 구문을 참고하기 바란다.

구문

  • url(<url>) <x> <y>, keyword
    CSS Basic User Interface Module Level 4

    url() 함수는 커서로 사용할 이미지의 경로를 지정한다. 다음 나오는 두 개의 숫자는 이미지의 최상단 모서리를 기준으로 커서가 상호작용할 영역의 x, y 좌표값을 지정한다. 콤마 뒤의 키워드는 이미지를 커서로 사용할 수 없을 때 적용될 커서 모양을 설정하는 키워드이다.

    커서의 모양을 테스트

테스트 도구

커서의 모양을 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Basic User Interface Module Level 4

Last review date: 2022-11-25

지원 웹브라우저