웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?
# CSS Property pointer-events
css를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다.
.prevent-click { pointer-events: none; }
이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.
- none // 클릭 이벤트를 적용하지 않음
- auto // 브라우저 자동으로 선택함
- inherit // 상속 되어짐
참고로 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 클릭과 관련된 효과 역시 동작하지 않습니다. 예를들어 :hover를 사용하는 경우에도 적용되지 않으니 참고하세요.
그럼 아래에서는 예제를 사용해 더 자세히 알아보도록 하겠습니다.
# CSS pointer-events 예제보기
아래의 두 개의 엘리먼트 중 오렌지색인 하나는 클릭 이벤트를 가지고 있고 그 위의 초록색은 클릭 이벤트의 일부를 가리고 있습니다.
만약 초록색이 가리는 부분을 클릭하지 동작하지 않을 것입니다. 이 때 pointer-events 사용하여 클릭이 정상 동작하도록 만드는 예제입니다. 먼저 html 파일입니다.
@ pointerEvents.html
<div class="ani">Animation</div>
<div class="click" onclick="alert('Hi!');">Click</div>
<div class="click" onclick="alert('Hi!');">Click</div>
다음은 css 스타일입니다.
@ pointerEvents.css
.ani {
width: 100px;
height: 100px;
position: relative;
top: 30px;
left: 30px;
background: green;
}
.click {
width: 100px;
height: 100px;
background: orange;
}
width: 100px;
height: 100px;
position: relative;
top: 30px;
left: 30px;
background: green;
}
.click {
width: 100px;
height: 100px;
background: orange;
}
위 코드를 실행하면 아래와 같이 브라우저에 나타납니다.
Animation
Click
만약 위의 Animation 겹치는 부분을 클릭하면 어떻게 동작할까요? 당연히 클릭 이벤트가 동작하지 않게됩니다. 이 경우 Animation이 있는 녹색 엘리먼트에 아래와 같이 pointer-events: none을 추가해보겠습니다.
.ani {
width: 100px;
height: 100px;
position: relative;
top: 30px;
left: 30px;
background: green;
pointer-events: none; // 제일 하단에 추가함
}
width: 100px;
height: 100px;
position: relative;
top: 30px;
left: 30px;
background: green;
pointer-events: none; // 제일 하단에 추가함
}
이제 새로운 프로퍼티 pointer-events가 추가되었습니다. 이제 다시 중복된 영역을 클릭해보면 어떻게 동작하는지 확인할 수 있습니다.
Animation
Click
이번에는 아까와 다르게 클릭이벤트가 동작하여 Hi라고 출력하게 됩니다. 이처럼 마우스가 해당 영역에는 동작하지 않고 그 아래에 겹쳐있는 다른 엘리먼트의 클릭 이벤트를 호출하게됩니다.
! css 클릭 이벤트 제어가 사용되고 필요한 경우는?
애니매이션이나 복잡한 인터렉션 구현시 각각의 엘리먼트 요소가 중첩될 수 있습니다. 이 경우 클릭 영역이 가려져 동작하지 않을 수 있는데 이를 방지하기 위해서도 필요합니다.
브라우저 호환성의 경우 IE 11 이상의 대부분의 브라우저에서 동작합니다.
아래의 글도 찾고 계시지 않나요?
