사용자 정의 CSS 커서

커서는 사용자가 텍스트를 클릭하거나 입력할 수 있는 화면의 위치를 나타냅니다. 다른 웹 사이트 구성 요소에 사용되는 다른 커서가 있을 수 있습니다. 개발자는 응용 프로그램에서 사용되는 커서가 매력적이어야 합니다. 예를 들어, 가리키는 손 모양의 커서를 마우스 호버 버튼에 사용할 수 있습니다. 텍스트(깜박이는 선) 표시기는 텍스트를 입력할 텍스트 상자에 활용됩니다.

커서 속성의 값을 지정하여 사용하는 CSS에는 몇 가지 커서 스타일이 있습니다. 그러나 개발자는 CSS를 사용하여 사용자 지정 커서를 만들 수 있습니다.

이 학습 가이드는 다음에 대해 제공합니다.

- CSS 커서
- 커스텀 커서 CSS

주제를 다루기 전에 실제 예제와 함께 CSS 커서 모양을 살펴보겠습니다.

CSS 커서

CSS ' 커서 ” 속성에는 포인터, 없음, 진행률 등과 같은 다양한 값이 있습니다. 마우스를 올리면 다른 커서가 표시되는 행을 포함하는 테이블을 만들어 보겠습니다.

예: HTML에서 다양한 CSS 커서를 나타내는 테이블 만들기

먼저 HTML에

요소를 추가합니다. 이 요소 내부:

태그는 행을 만드는 데 사용됩니다.

첫 번째 행에는 머리글이 포함되어 있습니다.

이러한 제목은

태그에는 두 개의

태그를 사용하여 지정됩니다. 다른
태그가 포함되어 열을 데이터로 채웁니다. 두 번째	태그는 CSS ' 커서 ” 값이 다른 속성입니다. 위 시나리오의 HTML 코드는 다음과 같습니다. < 테이블 > < 트 > < 일 스타일 = '너비: 200픽셀;' > CSS 커서 선택기 일 > < 일 스타일 = '너비: 200픽셀;' > 커서 스타일 일 > 트 > < 트 > < td > 커서: 포인터 td > < td >< 단추 스타일 = '커서: 포인터;' > 바늘 단추 > td > 트 > < 트 > < td > 커서: 진행률 td > < td >< 단추 스타일 = '커서: 진행;' > 진전 단추 > td > 트 > < 트 > < td > 커서: 허용되지 않음 td > < td >< 단추 스타일 = '커서: 허용되지 않음;' > 허용되지 않음 단추 > td > 트 > < 트 > < td > 커서: 없음 td > < td >< 단추 스타일 = '커서: 없음;' > 없음 단추 > td > 트 > < 트 > < td > 커서: 이동 td > < td >< 단추 스타일 = '커서: 이동;' > 이동하다 단추 > td > 트 > < 트 > < td > 커서: 잡기 td > < td >< 단추 스타일 = '커서: 잡아;' > 붙잡다 단추 > td > 트 > < 트 > < td > 커서: 복사 td > < td >< 단추 스타일 = '커서: 복사;' > 복사 단추 > td > 트 > < 트 > < td > 커서: 열 크기 조정 td > < td >< 단추 스타일 = '커서: 크기 조정;' > 크기 조정 단추 > td > 트 > < 트 > < td > 커서: 행 크기 조정 td > < td >< 단추 스타일 = '커서: 행 크기 조정;' > 행 크기 조정 단추 > td > 트 > < 트 > < td > 커서: 텍스트 td > < td >< 단추 스타일 = '커서: 텍스트;' > 텍스트 단추 > td > 트 > 테이블 > 위의 코드는 다음과 같은 결과를 생성합니다. 다음 섹션에서는 HTML 요소에 다른 스타일을 적용합니다. 스타일 '모든' 요소 * { 심: 0 ; 여유: 0 ; 글꼴 패밀리: Arial, Helvetica, sans-serif; } 모든 HTML 요소는 아래에 설명된 CSS 스타일로 적용됩니다. “ 심 ' 속성 ' 0 ” 값은 요소 콘텐츠 주위에 공백을 포함하지 않습니다. “ 여유 ' 속성 ' 0 ” 값은 각 요소 외부에 공백을 추가하지 않습니다. “ 글꼴 모음 ' 속성에 값이 할당됨 ' 굴림, 헬베티카, 산세리프 '. 첫 번째 스타일이 브라우저에서 지원되지 않는 경우 다른 스타일을 적용해야 하는지 확인하기 위해 글꼴 스타일 목록이 제공됩니다. 스타일 '테이블' 요소 테이블 { 여백: 0px 자동; 테두리: 1px 솔리드 게인즈보로; } HTML 테이블 요소는 아래에 설명된 CSS 속성과 함께 적용됩니다. “ 국경 ” 속성이 “ 1px 솔리드 게인즈버러 ”는 각각 테두리 너비, 테두리 스타일 및 테두리 색상을 나타냅니다. “ 여유 ” 속성은 위에 지정된 대로 동작합니다. 스타일 'td' 요소 td { 텍스트 정렬: 가운데; }	요소는 ' 속성으로 적용됩니다. 텍스트 정렬 ” 값으로 “ 센터 '. 열의 텍스트를 중앙에 정렬합니다. 스타일 '버튼' 요소 단추 { 배경색: cadetblue; 패딩: 10px 10px; 색상: #ffffff; 폭: 150px; } 위의 HTML 코드에 사용된 버튼 요소는 아래에 설명된 새로운 CSS 속성으로 스타일이 지정됩니다. “ 배경색 ” 요소의 배경색을 지정합니다. “ 심 '로 할당된 값과 함께 10픽셀 10픽셀 ” 요소 항목의 위쪽 아래쪽에 10px, 왼쪽-오른쪽에 10px의 공간을 추가합니다. “ 색상 ” 요소의 글꼴 색상을 조정합니다. “ 너비 ”는 요소의 폭을 조절하는 속성입니다. 위의 코드는 다음과 같은 결과를 생성합니다. 지금까지 CSS에서 제공하는 커서에 대해 알아보았습니다. 다음 섹션에서는 CSS를 사용하여 사용자 지정 커서를 만드는 방법에 대한 예제를 설명합니다. 커스텀 커서 CSS 개발자는 응용 프로그램에 적합한 커서를 사용해야 합니다. 커서는 사용자의 관심을 끌 수 있도록 매력적으로 만들어야 합니다. 또한 이 목적을 위해 사용자 지정 커서를 만들 수 있습니다. 아래 예시를 보세요! 예: CSS로 사용자 지정 커서를 만드는 방법은 무엇입니까? HTML에서 두 개의 div 요소를 추가합니다. 클래스와 하나 ' 원 ” 클래스가 있는 다른 하나는 “ 가리키다 '. HTML < 사업부 수업 = '원' > 사업부 > < 사업부 수업 = '가리키다' > 사업부 > CSS 섹션으로 이동해 보겠습니다. 스타일 '본문' 요소 몸 { 높이: 100vh; } HTML 파일의 본문 요소는 ' 스타일로 적용됩니다. 키 ” 요소의 높이를 설정하는 속성입니다. 스타일 '서클' div .원 { 너비: 20px; 높이: 20px; 테두리: 2px 솔리드 화이트; 경계 반경: 오십 % ; } 다음은 '클래스를 갖는 div 요소에 적용되는 CSS 속성에 대한 설명입니다. 원 ”: “ 너비 ” 속성은 요소의 너비를 조정합니다. “ 국경 '로 지정된 값이 있는 속성 2px 솔리드 화이트 ”는 테두리 너비, 테두리 스타일 및 색상을 나타냅니다. “ 경계 반경 ” 속성은 요소의 테두리 라운드를 변경합니다. 스타일 '포인트' div .가리키다 { 폭: 5px; 높이: 5px; 배경색: 흰색; 경계 반경: 오십 % ; } 클래스 포인트가 있는 div 요소는 아래에 설명된 다양한 속성과 함께 제공됩니다. “ 배경색 ” 속성은 요소의 배경색을 지정합니다. “ 경계 반경 ” 요소의 가장자리를 둥글게 설정합니다. 다른 속성은 논의된 것과 동일하게 작동합니다. 주어진 코드는 웹 페이지에 다음 커서를 표시합니다. HTML과 CSS를 사용하여 커서를 만들었습니다. 이제 다음 섹션에서는 필요한 기능을 커서에 추가하기 위해 JavaScript 코드를 작성합니다. 자바스크립트 < 스크립트 > const cursorCircle = document.querySelector ( '.원' ) ; const cursorPoint = document.querySelector ( '.가리키다' ) ; const moveCursor = ( 그리고 ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` 번역하다 ( ${마우스X} 픽셀, ${마우스Y} 픽셀 ) ` ; cursorPoint.style.transform = ` 번역하다 ( ${마우스X} 픽셀, ${마우스Y} 픽셀 ) ` ; } window.addEventListener ( '마우스무브' , 이동커서 ) 스크립트 > 위의 JavaScript 코드에 대한 설명은 다음과 같습니다. “ <스크립트> ” 태그는 JavaScript 코드를 작성하는 데 사용되는 태그와 쌍을 이룹니다. “ const ” 키워드는 변수가 뒤따르는 const 키워드를 재할당할 수 없음을 나타냅니다. “ document.querySelector('.circle') ”는 문서의 지정된 선택기와 일치하는 원 div 요소를 반환합니다. “ document.querySelector('.포인트') ”는 문서의 지정된 선택기와 일치하는 포인트 div 요소를 반환합니다. “ const moveCursor = (e) => ” 이 기능은 커서 기능을 지정합니다. “ e.clientY ”는 마우스 이벤트가 발생했을 때 수직 좌표를 반환합니다. “ e.clientX ”는 마우스 이벤트가 발생했을 때 수평 좌표를 반환합니다. “ 커서서클.스타일.변환 ” circle div는 스타일 변환으로 적용됩니다. “ cursorPoint.style.transform ” 스타일 변환으로 포인트 div가 적용됩니다. “ 번역(${mouseX}px, ${mouseY}px) ” 변형 속성의 값은 가로 및 세로 좌표를 설정합니다. “ window.addEventListener('마우스', moveCursor) ” 이벤트 리스너 메서드는 마우스 움직임을 듣습니다. 전역 창 개체의 일부입니다. 위의 코드 블록을 제공하면 아래와 같이 커서가 화면에서 자동으로 이동합니다. 멋지다! 다양한 CSS 속성을 가진 사용자 지정 커서를 만들었습니다. 결론 CSS ' 커서 ” 속성에는 다양한 커서 스타일을 나타내는 수많은 값이 있습니다. 그러나 HTML 요소와 CSS 속성을 활용하면 맞춤형 커서를 만들 수 있습니다. 그런 다음 기능을 활성화하기 위해 JavaScript 코드가 구현됩니다. 이 연구는 실제 예제를 통해 사용자 정의 CSS 커서를 만드는 방법을 보여주었습니다. 다른 범주 라즈베리 파이 이더넷 다른 나노 줌 시나몬 리뷰 Zorinos 라디오 마인크래프트 Ssh 오픈바스 압축 라라벨 에어크랙 사무 생산성 소프트웨어 신병 시스템 호출 시스템 네트워킹 Gpu 단 플렉스 우에피 도커 방화벽 와이어샤크 시놀로지 Pdf 이더 리움 앵무새 Os 숭고한 세리눅스 하이퍼-V 핸드폰 암호 금언 섬세 쥐 Nmap 메타스플로잇 급류 태블릿 파이 참 곱슬 곱슬하다 어디 Gcc 글꼴 Ssl 엔비디아 이미지 Usb 오징어 친구 Vlc 미디어 플레이어 Dns 비트코인 건반 잉크스케이프 암호화 페도라 오운클라우드 스캐너 원자 빨간 모자 팀뷰어 스카이프 Vpn Xfce 주피터 노트북 Nfs 블로그 Lvm 수세 미디어 플레이어 포식스 증기 젠킨스 힘 오라클 리눅스 Netstat 평방 미터 블루투스 Ssd 꽉 붙잡음 젠투 오디세이 오디오 Cpu 텐서플로 오토데스크 루분투 Llvm 윈도우 Microsoft Edge (레거시) 인터넷 익스플로러 사무실 다른 스카이프 라즈베리 파이 웹캠 미디어 플레이어 cPanel 하프록시 금언 신병 숭고한 우분투 24.04 넥스트클라우드 덕 엔비디아 USB 패스스루 페도라 #보안 부트 장치 통과 SDN 인기 게시물 Node.js 시도-캐치 다른 새로운 Jupyter Hub 사용자 계정을 만드는 방법 다른 Google Docs의 페이지 나누기 다른 Docker Compose를 사용하여 단일 컨테이너를 다시 시작하는 방법 다른 Proxmox VE 8의 부팅 가능한 USB Thumb 드라이브를 만드는 방법 다른 Numpy 이동 평균 다른 SSD용 TRIM 기능은 무엇이며 활성화하는 방법은 무엇입니까? 다른 Git의 커밋되지 않은 변경 사항과 일부 Git diff를 자세히 표시하는 방법은 무엇입니까? 다른 Grep 명령을 사용하여 파일 이름만 인쇄하는 방법 다른 가장 강력한 Discord 봇은 무엇입니까? 다른 C++ 멤버 함수 포인터 다른 Java는 여러 예외를 포착합니다. 다른 Word 문서를 인쇄하는 방법 다른 Node.js에서 MySQL 데이터베이스를 만드는 방법은 무엇입니까? 다른 내보내기 명령에 해당하는 Windows 다른 JavaScript의 for 루프에서 2씩 증가시키는 방법 다른 합동 기호 LaTeX를 사용하는 방법 다른 SQL에서 테이블 복사 다른 C++ 배열 목록을 사용하는 방법 다른 무선 네트워크에 자동 연결을 켜거나 끄는 방법 다른

태그를 사용하여 지정됩니다. 다른

태그가 포함되어 열을 데이터로 채웁니다.

두 번째

태그는 CSS ' 커서 ” 값이 다른 속성입니다.

위 시나리오의 HTML 코드는 다음과 같습니다.

< 테이블 >
< 트 >
< 일 스타일 = '너비: 200픽셀;' > CSS 커서 선택기 일 >
< 일 스타일 = '너비: 200픽셀;' > 커서 스타일 일 >
트 >
< 트 >
< td > 커서: 포인터 td >
< td >< 단추 스타일 = '커서: 포인터;' > 바늘 단추 > td >
트 >
< 트 >
< td > 커서: 진행률 td >
< td >< 단추 스타일 = '커서: 진행;' > 진전 단추 > td >
트 >
< 트 >
< td > 커서: 허용되지 않음 td >
< td >< 단추 스타일 = '커서: 허용되지 않음;' > 허용되지 않음 단추 > td >
트 >
< 트 >
< td > 커서: 없음 td >
< td >< 단추 스타일 = '커서: 없음;' > 없음 단추 > td >
트 >
< 트 >
< td > 커서: 이동 td >
< td >< 단추 스타일 = '커서: 이동;' > 이동하다 단추 > td >
트 >
< 트 >
< td > 커서: 잡기 td >
< td >< 단추 스타일 = '커서: 잡아;' > 붙잡다 단추 > td >
트 >
< 트 >
< td > 커서: 복사 td >
< td >< 단추 스타일 = '커서: 복사;' > 복사 단추 > td >
트 >
< 트 >
< td > 커서: 열 크기 조정 td >
< td >< 단추 스타일 = '커서: 크기 조정;' > 크기 조정 단추 > td >
트 >
< 트 >
< td > 커서: 행 크기 조정 td >
< td >< 단추 스타일 = '커서: 행 크기 조정;' > 행 크기 조정 단추 > td >
트 >
< 트 >
< td > 커서: 텍스트 td >
< td >< 단추 스타일 = '커서: 텍스트;' > 텍스트 단추 > td >
트 >
테이블 >

위의 코드는 다음과 같은 결과를 생성합니다.

다음 섹션에서는 HTML 요소에 다른 스타일을 적용합니다.

스타일 '모든' 요소

* {
심: 0 ;
여유: 0 ;
글꼴 패밀리: Arial, Helvetica, sans-serif;
}

모든 HTML 요소는 아래에 설명된 CSS 스타일로 적용됩니다.

- “ 심 ' 속성 ' 0 ” 값은 요소 콘텐츠 주위에 공백을 포함하지 않습니다.
- “ 여유 ' 속성 ' 0 ” 값은 각 요소 외부에 공백을 추가하지 않습니다.
- “ 글꼴 모음 ' 속성에 값이 할당됨 ' 굴림, 헬베티카, 산세리프 '. 첫 번째 스타일이 브라우저에서 지원되지 않는 경우 다른 스타일을 적용해야 하는지 확인하기 위해 글꼴 스타일 목록이 제공됩니다.

스타일 '테이블' 요소

테이블 {
여백: 0px 자동;
테두리: 1px 솔리드 게인즈보로;
}

HTML 테이블 요소는 아래에 설명된 CSS 속성과 함께 적용됩니다.

- “ 국경 ” 속성이 “ 1px 솔리드 게인즈버러 ”는 각각 테두리 너비, 테두리 스타일 및 테두리 색상을 나타냅니다.

“ 여유 ” 속성은 위에 지정된 대로 동작합니다.

스타일 'td' 요소

td {
텍스트 정렬: 가운데;
}

요소는 ' 속성으로 적용됩니다. 텍스트 정렬 ” 값으로 “ 센터 '. 열의 텍스트를 중앙에 정렬합니다.

스타일 '버튼' 요소

단추 {
배경색: cadetblue;
패딩: 10px 10px;
색상: #ffffff;
폭: 150px;
}

위의 HTML 코드에 사용된 버튼 요소는 아래에 설명된 새로운 CSS 속성으로 스타일이 지정됩니다.

- “ 배경색 ” 요소의 배경색을 지정합니다.
- “ 심 '로 할당된 값과 함께 10픽셀 10픽셀 ” 요소 항목의 위쪽 아래쪽에 10px, 왼쪽-오른쪽에 10px의 공간을 추가합니다.
- “ 색상 ” 요소의 글꼴 색상을 조정합니다.
- “ 너비 ”는 요소의 폭을 조절하는 속성입니다.

위의 코드는 다음과 같은 결과를 생성합니다.

지금까지 CSS에서 제공하는 커서에 대해 알아보았습니다. 다음 섹션에서는 CSS를 사용하여 사용자 지정 커서를 만드는 방법에 대한 예제를 설명합니다.

커스텀 커서 CSS

개발자는 응용 프로그램에 적합한 커서를 사용해야 합니다. 커서는 사용자의 관심을 끌 수 있도록 매력적으로 만들어야 합니다. 또한 이 목적을 위해 사용자 지정 커서를 만들 수 있습니다.

아래 예시를 보세요!

예: CSS로 사용자 지정 커서를 만드는 방법은 무엇입니까?

HTML에서 두 개의 div 요소를 추가합니다. 클래스와 하나 ' 원 ” 클래스가 있는 다른 하나는 “ 가리키다 '.

HTML

< 사업부 수업 = '원' > 사업부 >
< 사업부 수업 = '가리키다' > 사업부 >

CSS 섹션으로 이동해 보겠습니다.

스타일 '본문' 요소

몸 {
높이: 100vh;
}

HTML 파일의 본문 요소는 ' 스타일로 적용됩니다. 키 ” 요소의 높이를 설정하는 속성입니다.

스타일 '서클' div

.원 {
너비: 20px;
높이: 20px;
테두리: 2px 솔리드 화이트;
경계 반경: 오십 % ;
}

다음은 '클래스를 갖는 div 요소에 적용되는 CSS 속성에 대한 설명입니다. 원 ”:

- “ 너비 ” 속성은 요소의 너비를 조정합니다.
- “ 국경 '로 지정된 값이 있는 속성 2px 솔리드 화이트 ”는 테두리 너비, 테두리 스타일 및 색상을 나타냅니다.
- “ 경계 반경 ” 속성은 요소의 테두리 라운드를 변경합니다.

스타일 '포인트' div

.가리키다 {
폭: 5px;
높이: 5px;
배경색: 흰색;
경계 반경: 오십 % ;
}

클래스 포인트가 있는 div 요소는 아래에 설명된 다양한 속성과 함께 제공됩니다.

- “ 배경색 ” 속성은 요소의 배경색을 지정합니다.
- “ 경계 반경 ” 요소의 가장자리를 둥글게 설정합니다.
- 다른 속성은 논의된 것과 동일하게 작동합니다.

주어진 코드는 웹 페이지에 다음 커서를 표시합니다.

HTML과 CSS를 사용하여 커서를 만들었습니다. 이제 다음 섹션에서는 필요한 기능을 커서에 추가하기 위해 JavaScript 코드를 작성합니다.

자바스크립트

< 스크립트 >
const cursorCircle = document.querySelector ( '.원' ) ;
const cursorPoint = document.querySelector ( '.가리키다' ) ;
const moveCursor = ( 그리고 ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` 번역하다 ( ${마우스X} 픽셀, ${마우스Y} 픽셀 ) ` ;
cursorPoint.style.transform = ` 번역하다 ( ${마우스X} 픽셀, ${마우스Y} 픽셀 ) ` ;
}
window.addEventListener ( '마우스무브' , 이동커서 )
스크립트 >

위의 JavaScript 코드에 대한 설명은 다음과 같습니다.

- “ <스크립트> ” 태그는 JavaScript 코드를 작성하는 데 사용되는 태그와 쌍을 이룹니다.
- “ const ” 키워드는 변수가 뒤따르는 const 키워드를 재할당할 수 없음을 나타냅니다.
- “ document.querySelector('.circle') ”는 문서의 지정된 선택기와 일치하는 원 div 요소를 반환합니다.
- “ document.querySelector('.포인트') ”는 문서의 지정된 선택기와 일치하는 포인트 div 요소를 반환합니다.
- “ const moveCursor = (e) => ” 이 기능은 커서 기능을 지정합니다.
- “ e.clientY ”는 마우스 이벤트가 발생했을 때 수직 좌표를 반환합니다.
- “ e.clientX ”는 마우스 이벤트가 발생했을 때 수평 좌표를 반환합니다.
- “ 커서서클.스타일.변환 ” circle div는 스타일 변환으로 적용됩니다.
- “ cursorPoint.style.transform ” 스타일 변환으로 포인트 div가 적용됩니다.
- “ 번역(${mouseX}px, ${mouseY}px) ” 변형 속성의 값은 가로 및 세로 좌표를 설정합니다.
- “ window.addEventListener('마우스', moveCursor) ” 이벤트 리스너 메서드는 마우스 움직임을 듣습니다. 전역 창 개체의 일부입니다.

위의 코드 블록을 제공하면 아래와 같이 커서가 화면에서 자동으로 이동합니다.

멋지다! 다양한 CSS 속성을 가진 사용자 지정 커서를 만들었습니다.

결론

CSS ' 커서 ” 속성에는 다양한 커서 스타일을 나타내는 수많은 값이 있습니다. 그러나 HTML 요소와 CSS 속성을 활용하면 맞춤형 커서를 만들 수 있습니다. 그런 다음 기능을 활성화하기 위해 JavaScript 코드가 구현됩니다. 이 연구는 실제 예제를 통해 사용자 정의 CSS 커서를 만드는 방법을 보여주었습니다.

사용자 정의 CSS 커서

CSS 커서

커스텀 커서 CSS

결론

범주

인기 게시물