CSS로 커서 변경하기 - 마우스 커서 종류 및 CSS 설정

Table of Contents - いろいろ Tips - 目次: Sitemap Generator - サイトマップ生成プログラム

In-Page Search - 検索を自ページ設置

Download Counter - ダウンロードカウンター

Draft Manager - ブラウザで下書き保存

Text Encryption - テキスト暗号・復号化

CSS & JavaScript - 圧縮・整形/復元ツール

Simple Yet Powerful Note Tool - メモメモ

Task Management - 仕事/やること管理

Local Storage Check - ローカルストレージチェック

Pixel Art - ピクセルアート作成

Freehand Drawing - フリーハンドドローイング

Pomodoro Timer - ポモドーロタイマー

Text Counter - 文字数カウント

Notepad - メモ帳

原稿用紙エディター

俳句・短歌下書きツール

ウィンドウサイズ

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べ

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

ひらがな→ヘボン式ローマ字変換

ウェブページで長音ローマ字

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

キーボードの記号と入力方法

操作で使うキーの名称

CSSでカーソルを変える

CSS로 커서 변경하기
= 마우스 커서 종류 및 CSS 설정 =

웹페이지에서 마우스 커서 또는 마우스 포인터의 모양은 CSS 속성 "cursor"를 사용하여 설정할 수 있습니다.
이 가이드는 다양한 커서 모양의 CSS 값과 설정 방법을 다룹니다.
속성을 클릭하면 복사할 수 있습니다. 이 페이지에서는 "cursor:copy" 속성이 복사 가능한 요소에 추가되어 있습니다.
각 속성에 대한 샘플 이미지가 제공됩니다. 그러나 운영 체제 버전과 브라우저에 따라 모양이 다를 수 있습니다.
"On Mouse" 섹션 위에 마우스를 올리면 사용자의 환경에서 커서가 어떻게 표시되는지 확인할 수 있습니다.

《설정 방법》

페이지 내 여러 섹션에 적용하려면, 일반적으로 <head> 섹션 또는 외부 CSS 파일에 다음과 같이 작성합니다.
".cursorstyle"은 사용자 정의 클래스 이름입니다.

<style>
.cursorstyle {
cursor : pointer;
}
</style> 복사
"class" 속성을 사용하여 위의 CSS를 적용하는 예제.
<span class="cursorstyle">텍스트</span> 복사

<div class="cursorstyle">텍스트</div> 복사

<a class="cursorstyle">텍스트</a> 복사
단일 섹션 또는 몇 개의 요소에 적용하는 경우.
"style" 속성을 사용하여 속성을 직접 작성합니다.
<span style="cursor : pointer;">텍스트</span> 복사

<div style="cursor : pointer;">텍스트</div> 복사

《커서 유형 및 CSS 값》

CSS 값 [클릭하여 복사]	OS에서의 샘플 [브라우저에 따라 다를 수 있음]		마우스 오버 형태 미리보기	설명
CSS 값 [클릭하여 복사]	Windows	Mac	마우스 오버 형태 미리보기	설명
auto cursor: auto;			《마우스 오버》	브라우저가 컨텍스트에 따라 자동으로 커서를 결정
default cursor: default;			《마우스 오버》	표준 화살표를 표시
none cursor: none			《마우스 오버》	커서를 표시하지 않음
context-menu cursor: context-menu			《마우스 오버》	컨텍스트 메뉴 사용 가능
help cursor: help			《마우스 오버》	도움말 항목
pointer cursor: pointer			《마우스 오버》	링크 위에 마우스를 올릴 때 등
progress cursor: progress			《마우스 오버》	작업 처리 중. 사용자 상호작용 가능
wait cursor: wait			《마우스 오버》	작업 처리 중. 사용자 상호작용 불가능
cell cursor: cell			《마우스 오버》	작업 처리 중. 사용자 상호작용 불가능
crosshair cursor: crosshair			《마우스 오버》	비트맵에서 선택을 나타내는 십자 커서
text cursor: text			《마우스 오버》	선택 가능한 텍스트
vertical-text cursor: vertical-text			《마우스 오버》	선택 가능한 세로 텍스트
alias cursor: alias			《마우스 오버》	별칭 또는 바로 가기 생성 가능
copy cursor: copy			《마우스 오버》	복사 가능
move cursor: move			《마우스 오버》	이동 가능
no-drop cursor: no-drop			《마우스 오버》	해당 위치에 드롭할 수 없음
not-allowed cursor: not-allowed			《마우스 오버》	요청된 작업을 수행할 수 없음
grab cursor: grab			《마우스 오버》	드래그 가능, 일반적으로 grabbing과 함께 사용됨
grabbing cursor: grabbing			《마우스 오버》	드래그 중, grab과 함께 사용됨
all-scroll cursor: all-scroll			《마우스 오버》	모든 방향으로 스크롤 가능
col-resize cursor: col-resize			《마우스 오버》	수평 가장자리 조정이 가능한 크기 조절 상자
row-resize cursor: row-resize			《마우스 오버》	수직 가장자리 조정이 가능한 크기 조절 상자
n-resize cursor: n-resize			《마우스 오버》	가장자리를 북쪽(위쪽)으로 이동 가능한 크기 조절 상자
w-resize cursor: w-resize			《마우스 오버》	가장자리를 서쪽(왼쪽)으로 이동 가능한 크기 조절 상자
s-resize cursor: s-resize			《마우스 오버》	가장자리를 남쪽(아래쪽)으로 이동 가능한 크기 조절 상자
e-resize cursor: e-resize			《마우스 오버》	가장자리를 동쪽(오른쪽)으로 이동 가능한 크기 조절 상자
nw-resize cursor: nw-resize			《마우스 오버》	가장자리를 북서쪽(왼쪽 위)으로 이동 가능한 크기 조절 상자
ne-resize cursor: ne-resize			《마우스 오버》	가장자리를 북동쪽(오른쪽 위)으로 이동 가능한 크기 조절 상자
sw-resize cursor: sw-resize			《마우스 오버》	가장자리를 남서쪽(왼쪽 아래)으로 이동 가능한 크기 조절 상자
se-resize cursor: se-resize			《마우스 오버》	가장자리를 남동쪽(오른쪽 아래)으로 이동 가능한 크기 조절 상자
ew-resize cursor: ew-resize			《마우스 오버》	가장자리를 수평 양방향으로 조정 가능한 크기 조절 상자
ns-resize cursor: ns-resize			《마우스 오버》	가장자리를 수직 양방향으로 조정 가능한 크기 조절 상자
nesw-resize cursor: nesw-resize			《마우스 오버》	가장자리를 북동-남서(오른쪽 위 & 왼쪽 아래) 방향으로 조정 가능한 크기 조절 상자
nwse-resize cursor: nwse-resize			《마우스 오버》	가장자리를 북서-남동(왼쪽 위 & 오른쪽 아래) 방향으로 조정 가능한 크기 조절 상자
zoom-in cursor: zoom-in			《마우스 오버》	확대 가능
zoom-out cursor: zoom-out			《마우스 오버》	축소 가능
URL	모든 이미지를 커서로 설정할 수 있습니다. 이미지 크기는 128 × 128px로 제한됩니다. 샘플 이미지 크기는 70 × 70px입니다. 《마우스 오버》 .cursorimg {cursor: url(image-path), auto;} 복사 ".cursorimg"는 임의의 이름을 사용할 수 있습니다. <div {cursor: url(image-path), auto;}>Text</div> 복사 《Retina 디스플레이 지원》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} 복사

CSS로 커서 변경하기= 마우스 커서 종류 및 CSS 설정 =

CSS로 커서 변경하기
= 마우스 커서 종류 및 CSS 설정 =

おすすめサイト・関連サイト…