CSS 커서 목록
CSS의 cursor로 지정할 수 있는 커서 전 36종류를 호버로 확인하고 코드 복사
특징
cursor 전 36종 일괄 표시
CSS 표준 키워드를 한 페이지에 모아 게재
호버로 실물을 그 자리에서 확인
마우스를 올리면 커서가 그 형태로 변함
용도별 6개 그룹으로 정리
한 줄 설명을 곁들여 목표 커서를 찾기 쉬움
CSS를 1클릭으로 복사
「cursor: pointer;」 형태로 그대로 붙일 수 있음
사용 방법
그룹에서 찾기
「일반」「드래그&드롭」등 용도별 제목에서 후보 찾기
마우스를 올려서 확인
「여기에 마우스를 올려주세요」의 틀에 커서를 겹쳐서 형태 확인
복사해서 붙여넣기
「복사」버튼으로 CSS를 가져와서 자신의 스타일시트에 붙이기
사용 사례
버튼과 링크의 커서 확인
클릭할 수 있는 요소에 붙이는 pointer의 외형을 확인
드래그 조작 UI의 커서 선택
grab, move, copy를 비교하여 정렬 바꾸기나 이동 조작에 맞는 형태 선택
비활성·처리 중의 표현 사용 구분
not-allowed, wait, progress의 차이를 실물로 확인해서 사용 구분
CSS 학습에서 값의 암기
cursor에 쓸 수 있는 값의 종류와 의미를 한 번에 보고 외우기
기초 지식
pointer와 default의 차이
pointer는 손가락 형태의 커서로, 링크나 버튼처럼 클릭할 수 있는 요소임을 나타낼 때 사용합니다. default는 환경 표준 화살표 커서로, 클릭해도 아무것도 일어나지 않는 문자나 배경 위에서 사용하는 것이 기본입니다.
cursor의 초기값 auto의 동작
cursor 속성의 초기값은 auto로, 브라우저가 문자 위에서는 text, 그 외의 장소에서는 default처럼 커서의 형태를 장소에 따라 자동으로 선택합니다.
cursor를 지정해도 변하지 않는 원인
cursor를 지정해도 커서의 형태가 변하지 않을 때는 다른 요소가 위에 겹쳐있거나 다른 규칙으로 지정이 덮어씌워지고 있는 경우가 많습니다.
- 위에 겹친 요소：투명한 요소나 의사 요소가 위에 겹쳐있으면 커서의 형태는 맨 위에 있는 요소의 cursor 지정에 따라 표시됩니다.
- 상세도에 의한 덮어씌우기：같은 요소에 여러 규칙이 적용되는 경우 상세도(선택자의 강도)가 높은 규칙의 cursor 지정이 우선됩니다.
- OS와 브라우저에 따른 차이：커서의 디자인은 OS나 브라우저가 제공한 것이 사용되므로, 같은 값이어도 Windows와 macOS에서는 형태가 다릅니다.
안전성 및 프라이버시
브라우저 내 처리
입력 데이터는 사용 중인 브라우저 내에서만 처리되며 외부로 전송되지 않습니다.
브라우저 내에서만 처리
커서 표시와 코드 복사는 모두 사용 중인 브라우저 내에서 처리되며, 입력 데이터는 서버로 전송되지 않습니다.
통신은 HTTPS로 암호화
페이지 로드도 TLS로 암호화되어 제3자가 내용을 읽을 수 없습니다.
제3자로의 전송 없음
광고 네트워크나 트래커 등 외부 서비스로 입력 내용을 전송하지 않습니다.
결과 자동 저장 없음
복사한 코드나 입력 제안을 서버에 저장하지 않습니다.
Google 검색에서 RAKKOTOOLS 팔로우하기
189개의 편리한 도구를 Google 검색·AI 검색에서 더 쉽게 찾을 수 있습니다!
- 검색에서 발견
- AI 검색에서도 표시
- 새 도구도 발견
업데이트 정보
- update #318
CSS 커서 목록 추가, cursor의 모든 종류를 호버로 확인하고 복사