CSS의 커서란 무엇입니까?
우리는 이미 맞춤형 커서를 매일 사용하고 있습니다. 이러한 상호 작용은 버튼 위에 마우스를 올리면 포인터 커서가 손 모양으로 바뀌거나, 텍스트 위에 마우스를 올리면 커서가 텍스트 커서로 바뀌는 등 수정된 커서를 사용하여 가능해집니다.
그러나 커서는 사용자에게 다양한 추가 창의적 기회를 제공하는 데 사용될 수도 있습니다.
사용자 정의 커서 개발을 시작하기 전에 CSS에는 자주 수행되는 다양한 작업에 대한 기본 커서가 이미 있다는 점을 알아야 합니다.
이 커서는 마우스를 올려놓은 정확한 지점에서 수행할 수 있는 옵션을 제공합니다. 예를 들어 링크를 클릭해야 함을 나타내는 커서, 요소 끌어서 놓기, 개체 확대/축소 등이 있습니다.
CSS 커서 속성을 사용하여 원하는 커서 종류를 설명하세요.
CSS 커서 속성
CSS 커서 속성을 사용하여 사용자에게 표시되어야 하는 커서 종류를 지정할 수 있습니다.
사진을 양식의 제출 버튼으로 사용하는 것은 이 기능을 유용하게 적용하는 것입니다. 기본적으로 커서가 링크 위에 있으면 포인터 대신 손 모양이 나타납니다. 그러나 양식의 제출 버튼으로 인해 양식이 변경되지는 않습니다. 이는 누군가가 제출 버튼인 이미지 위로 마우스를 가져갈 때마다 사진을 클릭할 수 있다는 시각적 단서 역할을 합니다.
이 속성은 쉼표로 구분된 0개 이상의 값과 필요에 따라 하나의 키워드 값으로 지정되며 각각은 이미지 파일을 참조합니다.
통사론
cursor: value;
속성 값
| 자동: | 이 속성의 기본 설정은 커서를 배치하는 것입니다.
| 별명: | 이 속성은 커서의 생성 관련 표시를 표시하는 데 사용됩니다.
| 전체 스크롤: | 이 속성의 커서는 스크롤을 나타냅니다.
| 셀: | 이 속성의 커서는 셀 또는 셀 그룹이 현재 선택되어 있음을 나타냅니다.
| 상황에 맞는 메뉴: | 이 속성의 커서는 상황에 맞는 메뉴가 있음을 나타냅니다.
| 열 크기 조정: | 커서가 이 속성의 열 위에 있으면 수평으로 크기가 조정될 수 있습니다.
| 복사: | 이 속성의 커서는 복사해야 할 항목이 있음을 나타냅니다.
| 십자선: | 이 속성에서는 커서가 십자선으로 나타납니다.
| 기본: | 기본 커서.
| 전자 크기 조정: | 이 속성의 커서는 상자의 오른쪽 가장자리를 이동해야 함을 나타냅니다.
| 크기 조정: | 이 속성의 커서는 양방향 크기 조정 커서를 나타냅니다.
| 돕다: | 이 속성에서 커서는 지원에 액세스할 수 있음을 표시합니다.
| 이동하다: | 이 속성의 포인터는 무언가를 이동해야 함을 의미합니다.
| . n-크기 조정: | n-resize 속성을 사용할 때 포인터는 상자의 위쪽 경계가 이동되어야 함을 나타냅니다.
| 크기 조정: | 이 속성을 사용하면 상자의 가장자리가 오른쪽 및 위쪽으로 이동해야 함을 커서가 표시합니다.
| 새로운 크기 조정: | 양방향 크기 조정 커서는 이 속성으로 표시됩니다.
| Ns 크기 조정: | 양방향 크기 조정 커서는 ns-resize 속성으로 표시됩니다.
| Nw-크기 조정: | 이 속성의 커서는 상자의 위쪽 및 아래쪽 가장자리가 위쪽 및 왼쪽으로 이동됨을 나타냅니다.
| 코 크기 조정: | 양방향 크기 조정 커서는 이 속성으로 표시됩니다.
| 낙하 금지: | 이 속성의 커서는 끌어온 개체를 이 위치에 덤프할 수 없음을 나타냅니다.
| 없음: | 이 속성에 따른 요소에는 커서가 표시되지 않습니다.
| 허용되지 않는 것: | 이 속성의 커서는 요청된 작업이 수행되지 않음을 나타냅니다.
| 바늘: | 이 속성의 커서는 포인터 역할을 하며 링크 진행 상황을 표시합니다.
| 진전: | 이 속성의 커서는 프로그램이 활성 상태임을 나타냅니다.
| 행 크기 조정: | 커서는 이 기능이 수직 행 크기 조정을 허용한다는 것을 보여줍니다.
| S 크기 조정: | 이 속성을 사용할 때 포인터는 상자의 아래쪽 경계가 낮아져야 함을 나타냅니다.
| 크기 조정: | 이 속성의 커서는 상자의 가장자리가 오른쪽 및 아래쪽으로 이동해야 함을 나타냅니다.
| SW 크기 조정: | 이 속성의 커서는 상자의 왼쪽 및 아래쪽 가장자리를 이동해야 함을 나타냅니다.
| 텍스트: | 이 속성의 커서는 선택할 수 있는 텍스트를 나타냅니다.
| URL: | 이 속성에는 쉼표로 구분된 사용자 정의 커서 URL 목록과 목록 끝에 일반 커서가 포함되어 있습니다.
| 세로 텍스트: | 이 속성의 커서는 가능한 수직 텍스트 선택을 표시합니다.
| W-크기 조정: | 이 속성을 사용할 때 포인터는 상자의 왼쪽 가장자리를 이동해야 함을 나타냅니다.
예
이 예에서는 커서 속성을 활용하는 방법을 보여줍니다. 커서 속성 값이 대기로 설정되어 있으므로 프로그램이 사용 중입니다.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 산출
CSS 커서 속성을 사용하여 사용자에게 표시되어야 하는 커서 종류를 지정할 수 있습니다. 사진을 양식의 제출 버튼으로 사용하는 것은 이 기능을 유용하게 적용하는 것입니다. 기본적으로 커서가 링크 위에 있으면 포인터 대신 손 모양이 나타납니다.
