안녕하세요, 오늘은 CSS cursor 속성을 사용해서 마우스 커서를 원하는 이미지로 바꿔보겠습니다.
CSS cursor 속성은 다음과 같이 적용할 수 있습니다.
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, auto;
커스텀 마우스 설정을 하려면 cursor 속성 값으로 한개 또는 여러 개의 <url> 값들을 사용할 수 있습니다. 여러 개의 <url> 값들을 사용할 경우 쉼표로 분리해야 하며, 첫번째 이미지 파일 로딩에 실패했을 경우 그 다음 것이 적용됩니다. 그리고
url()의 괄호 안에는 변경하고자 하는 커서 이미지 파일의 경로를 입력합니다.
위에서 'auto' 라고 입력된 값은 필수로 입력해야 하는 키워드 값으로, 모든 이미지를 불러오는 데 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다. 'auto' 이외에 pointer, progress, wait 등 기본 커서명들을 입력할 수 있습니다.
그리고 <url>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 x, y 좌표를 나타냅니다.
다음은 예제를 통해 cursor 속성을 적용해보겠습니다.
먼저 cursor 속성을 적용하지 않은 화면입니다.
그리고 다음은 cursor 속성에 이미지 파일을 지정해준 예제 시연 화면입니다.
다음은 예제 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Custom Cursor</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: url(images/mouse-cursor.png) 2 2, auto;
}
body {
height: 100vh;
}
div {
white-space: pre-line;
overflow-wrap: break-word;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur interdum nibh id viverra. Cras rutrum in neque et vulputate. Ut in varius enim. Etiam vestibulum, dui id tempor porttitor, magna enim varius nibh, sed vehicula ligula mi id purus. Suspendisse pharetra blandit mauris eu fringilla. Donec mi libero, blandit eget condimentum nec, ultrices eget nunc. Nulla odio leo, auctor eu orci ac, egestas semper odio. Nulla consequat arcu non tristique accumsan.
Nunc at blandit tellus. Curabitur nulla nisl, ultricies sit amet leo eget, scelerisque ornare ex. Vestibulum libero lorem, viverra a luctus vel, tempus a massa. In vehicula convallis massa sed feugiat. Nam rhoncus magna malesuada, finibus mauris eget, pulvinar nunc. Etiam ac sapien et augue egestas porttitor. Nunc rutrum iaculis augue, sed sodales massa. Integer in risus nisi. Cras ac metus quis odio sollicitudin accumsan. Nunc consectetur erat est, eget bibendum arcu pretium non.
Fusce laoreet lorem ac diam lobortis laoreet. Nullam at magna nec tellus vestibulum vulputate at ac diam. Sed quis bibendum nulla, nec rhoncus tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec interdum erat vitae massa molestie, in viverra lectus maximus. Vestibulum sollicitudin, elit at semper ultrices, odio enim molestie lorem, sit amet consequat justo elit vel ex. Donec ante est, porttitor non euismod ac, venenatis in lorem. Sed molestie dolor vitae metus tempus, varius imperdiet mi blandit. Nam faucibus a metus vestibulum varius. Integer purus tellus, tincidunt sit amet sem consequat, iaculis feugiat felis. Donec commodo ex quis nisi vulputate auctor. Phasellus elit mi, semper ut felis sed, laoreet sollicitudin tortor. Praesent vitae eleifend tortor, vitae posuere erat. Quisque bibendum mauris mauris, vel laoreet dolor rhoncus vitae. Sed ultrices arcu ac diam semper, at consequat nibh eleifend.
Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec blandit faucibus cursus. Maecenas volutpat enim sed metus mattis interdum. Praesent dolor dui, suscipit ut nulla vitae, tincidunt tincidunt massa. Phasellus varius leo et magna posuere, ac cursus mauris ultricies. Nam ultrices molestie lectus, eget ultrices tellus dictum vel. Praesent volutpat elit et suscipit luctus. Ut dignissim mi ut justo tristique, nec aliquet erat interdum.
</p>
</div>
</body>
</html>
참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
사용한 이미지 출처 : Flaticon
https://www.flaticon.com/premium-icon/mouse-cursor_5993123?term=cursor&page=1&position=60&page=1&position=60&related_id=5993123&origin=tag#
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Drag&Drop 구현해보기 (0) | 2022.11.24 |
|---|---|
| [ HTML / CSS ] 스크롤바 커스텀하기 (0) | 2022.11.21 |
| [HTML/CSS] 버튼 애니메이션 만들어보기 (0) | 2022.11.09 |
| [HTML / CSS] textarea 커스텀하기 (0) | 2022.11.06 |
| [ HTML / CSS ] ::after, ::before 사용해보기 (0) | 2022.11.02 |
