커서는 " 이후로 사용되었습니다. 모든 데모의 어머니 "은 Douglas Englebart가 60년대 후반에 마우스와 그래픽 사용자 인터페이스를 세상에 소개한 곳입니다. 마우스 커서를 사용하면 컴퓨터 화면에서 공간 내 위치를 확인할 수 있습니다. 사용자 경험 도구로서 우리가 화면의 어느 지점에서나 컴퓨터가 무엇을 하고 있는지 보여줄 수 있다는 것은 정말 대단한 일입니다. 이 기사에서는 웹사이트의 사용자 경험을 개선하기 위해 웹페이지에서 마우스 커서를 사용할 수 있는 몇 가지 방법에 대해 설명합니다.
구문
CSS 선택기에서 다음 구문을 사용하여 커서를 기본 화살표가 아닌 다른 것으로 변경합니다.
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>
첫 번째 대괄호 세트 사이에는 쉼표로 구분된 URL 목록이 있습니다. 이것은 선택적 값입니다. 사용자 지정 커서를 사용할 수 있습니다. 인터넷에는 고유한 것을 만드는 데 도움이 되는 사용자 지정 커서 작성자가 얼마든지 있습니다.
쉼표로 구분된 목록은 브라우저가 첫 번째 목록을 로드하려고 시도함을 나타냅니다. 첫 번째 것을 찾을 수 없거나 URL이 정확하지 않으면 작동하는 것을 찾을 때까지 목록 아래로 이동하거나 마지막에 필수 키워드로 설정됩니다.
첫 번째 매개변수 – URL 포함은 선택 사항입니다. 두 번째는 그렇지 않습니다. 보고 싶은 커서 유형을 알려주는 일련의 지침을 제공하는 키워드를 포함해야 합니다. 다음은 사용 가능한 값 중 일부입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>
table {
width:100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead {
width: 100%;
background: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto {
cursor: auto;
}
td#cell {
cursor: cell;
}
td#crosshair {
cursor: crosshair;
}
td#default {
cursor: default;
}
td#none {
cursor: none;
}
td#pointer {
cursor: pointer;
}
td#help {
cursor: help;
}
td#progress {
cursor: progress;
}
td#wait {
cursor: wait;
}
td#text {
cursor: text;
}
td#vertical-text {
cursor: vertical-text;
}
td#zoom-in {
cursor: zoom-in;
}
td#zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>Automatically figures out which cursor to use based on context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>Typically an arrow, but depends on platform being used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<tr>
<td>wait</td>
<td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>Indicates to user that we can zoom in on something. </td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>Indicates to user that we can zoom out on something. </td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
</body>
</html> 위의 코드는 사이트에서 사용할 수 있는 사용 가능한 커서 중 일부만 공유합니다. 다른 사람들은 MDN을 확인하세요.
결론
오늘 우리는 사용자 경험을 개선하는 데 도움이 되도록 웹사이트에 커서를 추가하는 다양한 방법을 살펴보았습니다. 커서를 사용하여 페이지의 특정 지점에서 수행할 수 있는 작업을 표시함으로써 사용자는 사이트를 탐색할 때 무엇을 기대할 수 있는지 알 수 있습니다. 여기에 언급된 것보다 더 많은 것이 있습니다.
필요에 맞게 커서를 사용자 지정할 수 있는 다양한 방법을 확인하는 것이 좋습니다. 그리고 기억하세요. 커서는 UX의 절반에 불과합니다. 나머지 절반은 실제로 사용자가 커서가 수행할 것으로 기대하는 것을 구현하는 것입니다. 우리는 다른 시간에 그것에 들어갈 것입니다. 즐거운 해킹!
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.