웹페이지를 개발하다 보면 특정 요소에 마우스 클릭이나 터치 이벤트를 막거나, 반대로 이벤트를 다시 활성화하고 싶을 때가 있습니다. 이럴 때 CSS의 pointer-events 속성을 사용하면 아주 간단하게 해결할 수 있어요.
pointer-events란?
pointer-events 속성은 HTML 요소에 마우스나 터치 같은 포인터 이벤트의 적용 여부를 설정할 수 있는 CSS 속성입니다. 이 속성을 통해 클릭, 호버 등 이벤트를 받을지 말지를 정할 수 있어요.
주요 속성 값
- auto: 기본값으로, 요소가 이벤트를 정상적으로 받음
- none: 요소가 이벤트를 받지 않음. 마치 그 요소가 없는 것처럼 이벤트가 하위 요소로 전달됨
간단한 예제
클릭 막기
.no-click {
pointer-events: none;
}
위와 같이 클래스에 pointer-events: none;을 주면 해당 영역은 클릭, 터치 이벤트를 받지 않게 됩니다.
실제 HTML 적용
<button class="no-click">이 버튼은 클릭이 안 돼요</button>자주 사용하는 상황
- 팝업 배경을 클릭해도 닫히지 않게 처리할 때
- 이미지 슬라이드에서 버튼 클릭 막기
- 레이어 위쪽에 요소를 띄우면서 아래 클릭 유지
💡 추가 팁: 하위 요소에 이벤트 전달
pointer-events: none;을 설정하면 해당 요소는 이벤트를 받지 않지만, 아래에 위치한 요소에는 이벤트가 전달돼요.
이를 활용해 투명 오버레이 UI를 만들거나 이미지 위에 설명 텍스트만 띄우고 클릭은 이미지에 전달하는 방식으로도 활용할 수 있습니다.
📌 실습용 코드펜
아래 링크에서 직접 실습해보세요!
마무리
간단하지만 웹 인터페이스 제작 시 매우 유용하게 쓸 수 있는 pointer-events 속성! 오늘부터 실전 개발에서 꼭 활용해보세요.
추천 키워드: CSS pointer-events, 클릭 막기, 웹 이벤트 비활성화, 마우스 이벤트 제어