10.1 cursor 속성
CSS에서는 cursor 속성을 사용하여 요소에 마우스가 위치할 때 커서 모양을 변경할 수 있어.
이 속성은 다양한 커서 타입을 설정할 수 있게 해주는데, 웹 페이지의 인터랙티브성과 시각적 매력을 높이는 데 도움을 줘.
cursor 속성은 요소 위에 마우스 커서의 모양을 정의해. 값은 미리 정해진 값 또는 사용자 정의(커스텀) 이미지일 수 있어.
구문:
element {
cursor: value;
}
값:
cursor 속성은 미리 정의된 값과 사용자 정의 값으로 나뉘는 다양한 값을 지원해.
미리 정의된 값:
default: 기본 커서pointer: 손 모양 커서, 주로 링크에 사용됨text: 텍스트 커서 (I-모양), 주로 텍스트 필드에 사용됨move: 이동 커서wait: 모래시계 또는 대기 커서help: 물음표 모양 커서crosshair: 십자선 모양 커서not-allowed: 금지 모양의 커서 (선이 그어진 원)grab및grabbing: 끌기 위한 커서
미리 정의된 값 사용 예:
CSS
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="default-cursor">기본 커서</div>
<div class="pointer-cursor">포인터 커서</div>
<div class="text-cursor">텍스트 커서</div>
10.2 사용자 정의 값 (커스텀 커서)
cursor 속성은 또한 사용자 정의 이미지를 커서로 사용할 수 있어. 이를 위해 url 값을 사용해.
구문:
element {
cursor: url("custom-cursor.png"), fallback;
}
여기서:
url('custom-cursor.png'): 커서 이미지의 경로를 지정해fallback: 사용자 정의 이미지를 로드할 수 없는 경우 사용할 미리 정의된 값
커스텀 커서 사용 예:
CSS
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor">커스텀 커서</div>
</body>
커스텀 커서에 대한 사양 및 제한사항:
- 이미지 형식:
.cur,.png,.jpg,.gif형식을 지원해. - 이미지 크기: 성능과 호환성을 위해 32x32 픽셀 또는 작은 이미지를 사용하는 것이 좋음.
- 클릭 핫스팟 좌표: 기본값은 왼쪽 상단 (0,0) 이지만, 커서 이미지에서 클릭 핫스팟의 좌표를 설정할 수 있어.
10.3 사용자 정의 커서 사용의 세부사항
이미지 형식
사용자 정의 커서는 PNG, GIF, JPG, SVG와 같은 다양한 형식일 수 있어. 배경과 상관없이 커서가 올바르게 보이도록 투명도를 지원하는 형식(PNG 등)을 사용하는 것이 좋음.
이미지 크기
커서 이미지는 너무 커서는 안 돼. 권장 크기는 32x32 픽셀 이하임. 큰 이미지는 일부 브라우저에서 올바르게 표시되지 않을 수 있어.
핫스팟 좌표 지정
추가 값을 통해 이미지 URL 뒤에 커서의 핫스팟(포커스 지점)의 좌표를 지정할 수 있어.
구문
element {
cursor: url("custom-cursor.png") x y, fallback;
}
여기서:
x및y: 이미지의 왼쪽 상단을 기준으로 한 핫스팟의 좌표.
핫스팟 좌표를 사용하는 예:
CSS
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor-focus">포커스가 있는 커스텀 커서</div>
</body>
코드 설명:
.custom-cursor-focus: 가운데가 핫스팟이 되도록 (16, 16) 좌표로 설정된 커스텀 커서를 지정해
실용적인 응용:
- UI/UX 개선: 사용자 정의 커서를 사용하면 사용자 인터페이스를 크게 개선하여 직관적이고 미적으로 더 매력적으로 만들 수 있어.
- 인터랙티브 요소: 커스텀 커서를 버튼, 링크, 아이콘 등과 같은 인터랙티브 요소에 적용할 수 있어.
- 게임 및 애플리케이션: 게임과 웹 애플리케이션에서 커스텀 커서는 유니크한 스타일과 분위기를 만들어주는 데 도움을 줘.
GO TO FULL VERSION