CSS pointer-events
속성이란 무엇인가?
CSS의 pointer-events
속성은 요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다. 포인터 이벤트는 마우스 클릭, 호버 효과, 텍스트 선택 등이 있습니다. 이는 개발에서 상호작용을 제어하는 데에 중요한 역할을 합니다. 클릭, 호버 등 포인터 이벤트에 대한 세밀한 제어를 가능하게 하여 사용자 경험을 향상시킬 수 있고, 웹 개발자들은 이 속성을 활용하여 인터랙티브한 웹 페이지를 구축하고 다양한 상호작용 시나리오를 다룰 수 있습니다.
pointer-events
속성
pointer-events
속성은 요소의 박스가 클릭, 호버, 드래그 등 포인터 이벤트의 대상이 될 수 있는지를 정의합니다.
포인터 이벤트 개념 알아보기
마우스, 터치, 펜 등과 같은 포인팅 장치를 통해 발생하는(이벤트가 발생한다고 합니다.) 사용자의 상호작용을 말합니다. 이러한 포인터 이벤트는 사용자가 웹 페이지나 애플리케이션과 상호작용할 때 발생하며, 클릭, 호버, 드래그 등 다양한 동작이 있습니다. 포인터 이벤트는 사용자 인터페이스의 동작 및 상호작용을 제어하고 사용자 경험을 향상시키는 데에 중요한 역할을 합니다.
예를 들어, 마우스로 요소를 클릭하면 클릭이라는 행위에 대한 포인터 이벤트가 발생합니다. 모바일에서 요소에 터치하면 터치하는 행위에 대한 포인터 이벤트가 발생합니다. 마우스로 요소를 호버하거나 드래그할 때에도 마찬가지로 포인터 이벤트가 발생합니다.
pointer-events
속성의 정의와 구문
초기 값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
/* 키워드 값 */
pointer-events: none;
pointer-events: auto;
/* 전역 값 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events
값
auto |
기본 값입니다. 요소는 일반적으로 동작하며 기존 속성에 따라 포인터 이벤트에 응답합니다(예: 클릭 가능한 요소는 클릭이 가능하고, 텍스트는 선택 가능합니다). |
---|---|
none |
해당 요소는 포인터 이벤트의 대상이 되지 않습니다. 그러나, 이 요소의 자식 요소 중 pointer-events 속성이 다른 값으로 설정된 요소가 있다면, 포인터 이벤트는 해당 자식 요소를 대상으로 할 수 있습니다. 이러한 상황에서 포인터 이벤트는 이 부모 요소의 이벤트 캡처/버블 단계 동안에 해당 자식 요소를 통과하는 동안 적절한 이벤트 리스너를 활성화시킬 수 있습니다. |
예제를 통해 pointer-events
값에 대해 살펴보겠습니다. 다음은 pointer-events: none;
으로 <a>
요소를 클릭에 대한 포인터 이벤트 대상에서 제외해 보겠습니다.
<a href="https://www.naver.com/">클릭해서 Naver로 이동하기</a>
a {
pointer-events: none;
}
pointer-events: none;
이 적용된 모습니다. 클릭해보세요! 클릭이 적용되지 않습니다.
예제를 통해 pointer-events: none;
으로 <a>
요소를 클릭에 대한 포인터 이벤트 대상에서 제외하면 <a>
요소는 클릭이 적용되지 않습니다.
pointer-events
속성에 대한 브라우저 호환성
속성 |
Chrome
|
Edge
|
Firefox
|
Safari
|
---|---|---|---|---|
pointer-events
|
2.0 | 12.0 | 3.6 | 4.0 |
pointer-events
속성에 대한 명세서
명세서 사양 | |
---|---|
pointer-events
|
CSS Basic User Interface Module Level 4 #pointer-events-control |
pointer-events
속성 사용 시 주의사항
pointer-events
속성을 사용할 때는 접근성 문제를 고려해야 합니다. pointer-events: none;
을 사용하면 해당 요소에 포인터 이벤트가 전달되지 않으므로, 마우스나 터치로 요소를 클릭하거나 클릭할 수 없습니다. 이로 인해 시각 장애인이나 손이 불편한 사용자는 해당 요소를 사용할 수 없게 될 수 있습니다. 접근성 지침을 준수하고 포인터 이벤트 제어를 사용하는 것이 중요합니다.