CSS pointer-events 속성 완벽 정리 – 마우스·터치 이벤트 허용 여부 제어하기

CSS pointer-events 속성이란?

CSS의 pointer-events 속성을 사용하면 특정 요소에서 마우스 클릭이나 터치 같은 포인터 이벤트를 허용할지 여부를 손쉽게 제어할 수 있습니다. 예를 들어, 콘텐츠 위에 겹쳐진 투명 레이어가 클릭을 가로채지 않도록 하거나, 일시적으로 비활성화해야 하는 UI 요소에 사용자 입력이 전달되지 않게 만들 때 매우 유용합니다.

문법(Syntax)

pointer-events: auto | none;

auto — 기본값입니다. 요소가 마우스 클릭, 호버, 터치 등 포인터 이벤트에 정상적으로 반응합니다.
none — 요소가 포인터 이벤트에 반응하지 않습니다. 클릭이나 터치가 해당 요소를 '통과'하여 그 아래에 있는 요소로 전달됩니다.

예제 1: 링크(a) 요소에 pointer-events 적용하기

다음 예제는 첫 번째 링크에는 pointer-events: none을, 마지막 링크에는 pointer-events: auto를 적용한 모습입니다.

<!DOCTYPE html>
<html>
<head>
<style>
a {
   margin: 10vh;
   pointer-events: none;
}
a:last-of-type {
   pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>No pointer event here</a>
<a href=#>Automatic pointer event here</a>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS pointer-events 속성 완벽 정리 – 마우스·터치 이벤트 허용 여부 제어하기

첫 번째 링크는 pointer-events: none이 설정되어 있어 클릭해도 아무런 반응이 없고, 두 번째 링크만 정상적으로 클릭 이벤트를 받습니다.

예제 2: select(드롭다운) 요소 비활성화하기

select 요소에 pointer-events: none을 적용하면 사용자가 드롭다운 목록을 열거나 항목을 선택할 수 없게 됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
select {
   margin: 10vh;
   pointer-events: none;
   background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>No event here </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS pointer-events 속성 완벽 정리 – 마우스·터치 이벤트 허용 여부 제어하기

마무리

pointer-events 속성은 단 하나의 값만으로 요소의 상호작용 여부를 제어할 수 있는 강력한 도구입니다. 오버레이 레이어 처리, 로딩 중인 UI 잠금, 장식용 요소가 클릭을 방해하지 않도록 만드는 등 다양한 상황에서 활용할 수 있으니 꼭 기억해 두세요.