[CSS3] pointer-events

---

알고있으면 좋은 CSS3 Tip✨

---

pointer-events란 무엇인가?

• CSS를 사용하여 클릭 이벤트를 제어할 수 있는 방법 중 하나는 pointer-events 프로퍼티이며, 특정 요소에서 클릭 이벤트가 동작하지 않도록 제어할 수 있다.

 

(1) auto (브라우저 자동으로 선택)

• pointer-events: auto;는 기본값으로, 요소가 클릭 이벤트를 자동으로 처리하도록한다.
• 이 설정은 특별한 제어가 필요 없을 때 사용되며, 요소가 클릭 이벤트를 처리하는 정상적인 동작을 그대로 유지한다.

 

(2) none (클릭 이벤트를 적용 X)

• pointer-events: none; 값은 해당 요소에 대해 모든 클릭 이벤트(마우스 클릭, 터치 등)가 동작하지 않는다.
• 이 값을 설정하면 요소는 마치 화면에서 존재하지 않는 것처럼 동작하며, 사용자는 해당 요소를 클릭할 수 없다.

 

(3) inherit (상속)

• pointer-events: inherit; 값은 부모 요소의 pointer-events 값을 자식 요소가 상속받도록 설정한다.
• 즉, 부모 요소에 pointer-events가 none으로 설정되어 있으면, 자식 요소 또한 클릭 이벤트를 받지 않게 된다.