CSS를 사용하여 다양한 유형의 커서를 설정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 다양한 유형의 커서를 설정하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-22 19:45:03

앞으로

1628명이 탐색했습니다.

CSS를 사용하여 다양한 유형의 커서를 설정하는 방법은 무엇입니까?

CSS(Cascading Style Sheets)는 커서 스타일을 포함하여 웹 사이트의 시각적 모양을 디자인하는 강력한 도구입니다. 커서는 웹 디자인의 중요한 측면입니다. 이는 사용자에게 시각적 피드백을 제공하고 효과적으로 상호 작용할 수 있도록 도와줍니다.

커서란 무엇인가요?

커서는 화면에서 사용자의 현재 위치를 나타내는 위치 표시기입니다. "캐럿"이라고도 합니다. 사용자 인터페이스 디자인에서 중요한 역할을 합니다. CSS에서는 특정 위치에서 수행할 수 있는 작업을 나타내는 시각적 피드백을 사용자에게 제공하기 위해 필요에 따라 커서를 설정할 수 있습니다.

문법

으아아아

이제 CSS를 사용하여 설정할 수 있는 다양한 유형의 커서를 살펴보겠습니다.

기본 커서

웹 디자인에서 기본 커서는 가장 일반적인 커서 유형으로, 다른 커서가 지정되지 않은 경우에 사용됩니다. 이는 화면에 화살표 포인터처럼 보이며 사용자가 요소를 클릭할 수 있음을 나타냅니다.

예 1

다음은 기본 커서를 설정하는 예입니다.

으아아아

포인터 커서

포인터 커서는 링크를 가리키는 손 모양으로 표현됩니다. 사용자가 링크 위로 마우스를 가져가면 해당 요소를 클릭할 수 있음을 나타냅니다. 다음 코드를 사용하여 포인터 커서를 설정할 수 있습니다 −

으아아아

텍스트 커서

텍스트 커서는 I자 모양의 커서 포인터 형태로 나타나는 깜박이는 수평 또는 수직선입니다. 사용자가 텍스트나 텍스트 입력 필드 위로 마우스를 가져가면 텍스트를 편집했거나 선택했음을 나타냅니다. 다음 코드를 사용하여 텍스트 커서를 설정할 수 있습니다 -

으아아아

십자형 커서

십자선 커서는 단순히 십자선 포인터에 대한 수평 및 수직선으로 나타납니다. 십자형 커서는 이미지 편집 도구와 같이 화면의 특정 영역을 선택하는 데 사용됩니다. 다음 코드를 사용하여 십자선 커서를 설정할 수 있습니다 -

으아아아

커서 이동

모바일 커서는 네 개의 화살표 모양으로 화면에 나타납니다. 일반적으로 요소를 끌어서 놓아 이동할 수 있음을 나타내는 데 사용됩니다. 다음 코드를 사용하여 움직이는 커서를 설정할 수 있습니다 -

으아아아

커서는 허용되지 않습니다

커서가 허용되지 않는다는 것은 요청한 작업이 수행되지 않는다는 의미입니다. 대각선이 있는 원 형태로 나타납니다. 다음 코드를 사용하여 허용되지 않는 커서를 설정할 수 있습니다.

으아아아

진행 커서

진행 커서가 회전하는 원 형태로 나타납니다. 이는 프로그램이 백그라운드에서 사용 중이지만 사용자는 여전히 인터페이스와 상호 작용할 수 있음을 나타냅니다. 다음 코드를 사용하여 진행 커서를 설정할 수 있습니다 -

으아아아

커서를 기다리세요

커서가 회전하는 바람개비 모양으로 나타날 때까지 기다립니다. 이는 프로그램이 사용 중이어서 사용자 인터페이스와 상호 작용할 수 없음을 나타냅니다. 다음 코드를 사용하여 대기 커서를 설정할 수 있습니다 -

으아아아

도움말 커서

도움말 커서가 물음표 포인터로 나타납니다. 도움말 아이콘이나 버튼을 클릭하는 등 사용자에게 도움이 필요할 때 사용됩니다. 다음 코드를 사용하여 도움말 커서를 설정할 수 있습니다 -

으아아아

예 2

다음은 CSS를 사용하여 다양한 유형의 커서를 설정하는 방법의 예입니다.

으아아아

CSS를 사용하여 커서를 맞춤설정하세요

CSS에서 제공하는 표준 커서 외에도 사용자 정의 커서를 사용할 수도 있습니다. 사용자 정의 커서를 사용하면 웹사이트에 독특한 터치를 추가할 수 있습니다.

예 3

다음은 CSS를 사용하여 사용자 정의 커서를 만드는 예입니다.

으아아아

위의 예에서는 my-cursor 클래스를 사용하여 div 요소를 생성한 다음 커서 속성을 URL()로 설정했습니다. https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), 자동. 즉, 브라우저는 커서_120340.png 파일을 사용자 정의 커서로 사용하고 파일을 찾을 수 없거나 로드에 실패하면 기본 커서로 대체됩니다.