CSS의 pointer-events 속성은 요소 위에서 포인터 이벤트가 발생했을 때, 해당 요소가 이벤트에 반응하여 어떤 동작을 수행할지 여부를 지정합니다.
포인터 이벤트는 마우스 클릭뿐만 아니라 터치, 스타일러스 펜 등 다양한 입력 장치에 의해 트리거될 수 있습니다.
pointer-events 속성의 주요 값
- auto – 기본값으로, 요소가 포인터 이벤트에 정상적으로 반응합니다.
- none – 요소가 포인터 이벤트의 대상이 되지 않으며, 클릭·호버 등의 상호작용이 비활성화됩니다.
예제 코드
다음 코드는 CSS에서 pointer-events 속성을 활용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.pointer1 {
font-size: 20px;
padding: 10px;
pointer-events: none;
}
.pointer2 {
font-size: 20px;
padding: 10px;
pointer-events: auto;
}
</style>
</head>
<body>
<h1>Pointer-events 속성 예제</h1>
<div class="pointer1">
wikipedia.org로 이동 <a href="https://www.wikipedia.org">바로가기</a>
</div>
<div class="pointer2">
google.com으로 이동 <a href="https://www.google.com/">바로가기</a>
</div>
<h2>위 링크에 마우스를 올려 포인터 이벤트를 확인해 보세요</h2>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
두 번째 링크에는 pointer-events: auto가 적용되어 있어 마우스 커서를 올리면 포인터가 나타나고 링크 클릭이 가능합니다. 반면 첫 번째 링크에는 pointer-events: none이 설정되어 있어 마우스를 올려도 아무런 반응이 없습니다.
활용 팁
pointer-events: none은 오버레이 레이어, 장식용 요소, 또는 특정 조건에서 클릭을 차단하고 싶을 때 유용하게 사용됩니다. 다만 접근성 측면에서 중요한 인터랙션 요소에는 신중하게 적용해야 합니다.