CSS pointer-events 속성이란 무엇인가?

CSS의 pointer-events 속성은 요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다. 포인터 이벤트는 마우스 클릭, 호버 효과, 텍스트 선택 등이 있습니다. 이는 개발에서 상호작용을 제어하는 데에 중요한 역할을 합니다. 클릭, 호버 등 포인터 이벤트에 대한 세밀한 제어를 가능하게 하여 사용자 경험을 향상시킬 수 있고, 웹 개발자들은 이 속성을 활용하여 인터랙티브한 웹 페이지를 구축하고 다양한 상호작용 시나리오를 다룰 수 있습니다.

pointer-events 속성

pointer-events 속성은 요소의 박스가 클릭, 호버, 드래그 등 포인터 이벤트의 대상이 될 수 있는지를 정의합니다.

포인터 이벤트 개념 알아보기

마우스, 터치, 펜 등과 같은 포인팅 장치를 통해 발생하는(이벤트가 발생한다고 합니다.) 사용자의 상호작용을 말합니다. 이러한 포인터 이벤트는 사용자가 웹 페이지나 애플리케이션과 상호작용할 때 발생하며, 클릭, 호버, 드래그 등 다양한 동작이 있습니다. 포인터 이벤트는 사용자 인터페이스의 동작 및 상호작용을 제어하고 사용자 경험을 향상시키는 데에 중요한 역할을 합니다.

예를 들어, 마우스로 요소를 클릭하면 클릭이라는 행위에 대한 포인터 이벤트가 발생합니다. 모바일에서 요소에 터치하면 터치하는 행위에 대한 포인터 이벤트가 발생합니다. 마우스로 요소를 호버하거나 드래그할 때에도 마찬가지로 포인터 이벤트가 발생합니다.

pointer-events 속성의 정의와 구문

pointer-events 속성 정의
초기 값 auto
적용 요소 모든 요소
상속 예
CSS 출처링크: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 
/* 키워드 값 */
pointer-events: none;
pointer-events: auto;

/* 전역 값 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
pointer-events: revert;
pointer-events: revert-layer;

pointer-events 값

pointer-events 속성 값
auto 기본 값입니다. 요소는 일반적으로 동작하며 기존 속성에 따라 포인터 이벤트에 응답합니다(예: 클릭 가능한 요소는 클릭이 가능하고, 텍스트는 선택 가능합니다).
none 해당 요소는 포인터 이벤트의 대상이 되지 않습니다. 그러나, 이 요소의 자식 요소 중 pointer-events 속성이 다른 값으로 설정된 요소가 있다면, 포인터 이벤트는 해당 자식 요소를 대상으로 할 수 있습니다. 이러한 상황에서 포인터 이벤트는 이 부모 요소의 이벤트 캡처/버블 단계 동안에 해당 자식 요소를 통과하는 동안 적절한 이벤트 리스너를 활성화시킬 수 있습니다.

예제를 통해 pointer-events 값에 대해 살펴보겠습니다. 다음은 pointer-events: none;으로 <a> 요소를 클릭에 대한 포인터 이벤트 대상에서 제외해 보겠습니다.

HTML 
<a href="https://www.naver.com/">클릭해서 Naver로 이동하기</a>
CSS 
a {
    pointer-events: none;
}
실제 적용된 모습 pointer-events: none;이 적용된 모습니다. 클릭해보세요! 클릭이 적용되지 않습니다.

예제를 통해 pointer-events: none;으로 <a> 요소를 클릭에 대한 포인터 이벤트 대상에서 제외하면 <a> 요소는 클릭이 적용되지 않습니다.

pointer-events 속성에 대한 브라우저 호환성

pointer-events 속성에 대한 브라우저 호환성
속성
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
pointer-events 2.0 12.0 3.6 4.0

caniuse.com에서 더 자세한 정보를 확인해 보세요.

pointer-events 속성에 대한 명세서

pointer-events 속성에 대한 명세서
명세서 사양
pointer-events CSS Basic User Interface Module Level 4
#pointer-events-control

pointer-events 속성 사용 시 주의사항

pointer-events 속성을 사용할 때는 접근성 문제를 고려해야 합니다. pointer-events: none;을 사용하면 해당 요소에 포인터 이벤트가 전달되지 않으므로, 마우스나 터치로 요소를 클릭하거나 클릭할 수 없습니다. 이로 인해 시각 장애인이나 손이 불편한 사용자는 해당 요소를 사용할 수 없게 될 수 있습니다. 접근성 지침을 준수하고 포인터 이벤트 제어를 사용하는 것이 중요합니다.

참고문헌