CSS pointer-events 속성 – 포인터 이벤트 제어자

`pointer-events` 속성

CSS의 pointer-events 속성은
요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다.

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

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

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

pointer-events 속성은 이러한 포인테 이벤트 대상이 될 수 있는지 여부를 지정합니다.

정의와 구문

pointer-events 속성 정의
초깃값	`auto`
적용 요소	모든 요소
상속	예

값

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

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: none;으로 <a> 요소를 클릭에 대한 포인터 이벤트 대상에서 제외해 보겠습니다.

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

주의할 점

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