커서 및 포인터

터치 스크린이 아닌 기기에서 커서는 사용자가 상호작용하는 대상을 알 수 있는 필수적인 방법입니다. 요소와 상호작용하는 방법이나 트랙패드 또는 마우스로 움직이면 사이트에 어떤 영향을 미치는지에 관한 유용한 힌트를 제공할 수도 있습니다.

커서

브라우저는 커서의 몇 가지 일반적인 사용 사례를 자동으로 처리합니다.

커서가 있는 기기에서 이 페이지를 읽고 있다면 페이지를 둘러보세요. 이전에는 커서가 어떻게 바뀌는지 알아차리지 못했을 수도 있지만, 커서가 제공하는 힌트를 확인하세요. 포인터가 텍스트 위로 이동하면 커서가 텍스트를 선택할 수 있음을 나타내는 선택 I자형으로 변경됩니다. 링크 위로 마우스를 가져가면 커서가 검지로 가리키는 손으로 바뀌어 작업을 수행할 수 있음을 나타냅니다. 그 외의 모든 곳에는 기본 커서(일반적으로 화살표)가 표시됩니다.

더 대화형 사이트를 만들 때는 사용자가 상호작용을 더 쉽게 이해할 수 있도록 커서를 맞춤설정하는 것이 좋습니다.

브라우저는 드래그, 크기 조절, 선택 등을 위한 힌트를 제공하는 커서 속성의 다양한 키워드를 지원합니다.

지원되는 커서 중 요소의 상호작용을 전달하는 커서가 없는 경우 커서로 사용할 SVG 또는 PNG 이미지를 제공할 수도 있습니다.

캐럿

삽입 캐럿은 수정 가능한 텍스트에서 내 위치를 표시하는 데 사용됩니다. 마우스를 따라가지 않으므로 커서와는 다릅니다. caret-color를 사용하여 색상을 변경할 수 있습니다.

사용자의 포인터 입력에 응답

마우스나 트랙패드를 사용하는 사용자는 터치 스크린을 사용하는 사용자보다 화면에서 더 정확한 지점과 상호작용할 수 있습니다. 마우스의 정밀도에만 맞춰 디자인하면 터치 스크린이나 미세한 운동 제어 문제가 있는 사용자가 필요에 따라 페이지와 상호작용하지 못할 수 있습니다.

일반적인 문제로는 버튼이 너무 작거나 상호작용 요소가 서로 너무 가까운 경우가 있습니다. 이로 인해 사용자가 올바른 요소와 상호작용하기가 어려워집니다.

버튼 및 기타 대화형 타겟이 충분히 큰지 확인하는 것은 사이트의 접근성을 보장하는 데 중요한 단계입니다. pointer 및 any-pointer 미디어 쿼리를 사용하여 사용자 입력 기기의 정밀도에 따라 스타일을 맞춤설정할 수도 있습니다.

pointer 미디어 기능은 사용자의 기본 입력 기기를 나타내고 any-pointer는 모든 입력 기기를 나타냅니다. 마우스와 같은 기기는 fine와, 터치 스크린과 같은 기기는 coarse와 일치시킬 수 있습니다. none 값은 사용자가 포인터가 있는 입력 기기를 사용하지 않음을 나타냅니다.

포인터 및 터치 이벤트

특정 터치 스크린 동작 사용 중지

터치 스크린을 사용하는 경우 브라우저에서 몇 가지 일반적인 동작을 처리합니다. 예를 들어 두 손가락으로 화면을 터치한 다음 손가락을 벌리면 사이트가 확대됩니다. 사이트에서 이러한 동작을 구현하지 않아도 되지만, 경우에 따라 이러한 동작을 사용 중지하거나 재정의해야 할 수도 있습니다.

브라우저가 일부 작업을 처리하지 않도록 하려면 요소가 처리해야 하는 작업을 나열하세요. pan-x 및 pan-y은 한 손가락 패닝 동작을 사용 설정합니다. 이러한 기능은 여러 손가락을 사용한 확대/축소 및 이동을 지원하는 pinch-zoom와 함께 사용 설정할 수 있습니다.

manipulation 키워드는 pan-x pan-y pinch-zoom과 동일합니다. manipulation는 두 번 탭하여 확대하는 등 짧은 시간에 여러 번의 터치가 필요한 다른 터치 동작을 제외합니다.

touch-action에서 작업을 제외하여 브라우저의 작업 처리를 사용 중지한 후 해당 작업에 포인터 이벤트를 설정할 수 있습니다.

모든 이벤트 및 작업 사용 중지

경우에 따라 요소가 상호작용하지 않도록 지정할 수 있습니다. 예를 들어 버튼에 pointer-events: none를 설정하면 버튼을 클릭할 수 없으며 마우스 오버 상태를 트리거할 수도 없습니다.

이해도 확인