pointer-events

요소가 마우스/터치 이벤트에 반응할지 여부를 제어합니다. pen을 적용하면 요소가 마우스에 "투명"해져 클릭이 아래 요소로 통과합니다.

클래스 목록

클래스	CSS	설명
`pen`	pointer-events: none	마우스/터치 이벤트 차단. 클릭이 아래 요소로 통과
`pea`	pointer-events: auto	마우스/터치 이벤트 활성화. 부모의 pen을 자식에서 해제

시각적 비교

각 버튼을 클릭해 보세요. pen이 적용된 버튼은 클릭에 반응하지 않습니다.

pointer-events: auto — pea

마우스 이벤트가 정상 작동합니다

pointer-events: none — pen

마우스 이벤트가 차단됩니다. 커서도 변경되지 않음

클릭 통과 (Click-through)

pen의 핵심 기능은 클릭이 아래 요소로 통과하는 것입니다. 오버레이, 장식 요소, 워터마크 등에 활용합니다.

<!-- 클릭 통과 오버레이 -->
<div class="pr">
  <button class="cp py12px px2rem bg6366F1 cFFFFFF br8px bn">
    아래에 있는 버튼
  </button>
  <!-- 오버레이: pen으로 클릭이 아래 버튼으로 통과 -->
  <div class="pa t0 l0 w100p h100p pen bg0-0-0-30">
    <span class="cFFFFFF o50">OVERLAY</span>
  </div>
</div>

<!-- 그라데이션 커버 -->
<div class="pr">
  <div class="p2rem">스크롤 가능한 콘텐츠</div>
  <div class="pa b0 l0 w100p h5rem pen"></div>
</div>

클릭 통과 데모

OVERLAY

반투명 오버레이에 pen이 적용되어 아래 버튼을 클릭할 수 있습니다

클래스별 상세

`pen`pointer-events: none

요소를 마우스/터치 이벤트에 "투명"하게 만듭니다. 클릭, 호버, 커서 변경이 모두 무시되며 이벤트가 아래 요소로 통과합니다. 비활성 상태, 로딩 중 상태, 클릭 통과가 필요한 오버레이에 사용합니다.

<!-- 비활성 버튼 -->
<button class="pen o50 py12px px2rem bg6366F1 cFFFFFF br8px bn">
  클릭 불가
</button>

<!-- 로딩 중 폼 비활성화 -->
<form class="pen o50 df fdc gap12px">
  <input type="text" placeholder="이름" />
  <input type="email" placeholder="이메일" />
  <button>제출 중...</button>
</form>

<!-- 조건부 비활성화 (Vue) -->
<button :class="isLoading ? 'pen o50' : 'cp'" class="py12px px2rem bg6366F1 cFFFFFF br8px bn">
  {{ isLoading ? '처리 중...' : '제출' }}
</button>

자주 쓰는 조합

`pen o50`	이벤트 차단 + 반투명 (비활성 상태)
`pen usn`	이벤트 차단 + 선택 차단 (완전 비활성)
`pen pa t0 l0 w100p h100p`	클릭 통과 오버레이

주의

pen은 시각적 비활성이 아닌 이벤트 비활성입니다. 스타일은 그대로 유지되므로 비활성 상태를 나타내려면 o50 등으로 시각적 피드백을 함께 제공하세요.

`pea`pointer-events: auto

마우스/터치 이벤트를 다시 활성화합니다. 부모에 pen이 설정된 경우, 특정 자식 요소에서 이벤트를 다시 받을 수 있도록 할 때 사용합니다.

<!-- 부모는 이벤트 차단, 특정 자식만 활성화 -->
<div class="pen o50 p2rem bg18181B br8px">
  <p class="cFAFAFA mb12px">이 영역은 클릭 불가</p>
  <button class="pea o100 cp py8px px16px bg6366F1 cFFFFFF br4px bn">
    이 버튼만 클릭 가능
  </button>
</div>

pen vs disabled 비교

pen과 HTML disabled 속성은 모두 클릭을 차단하지만 동작이 다릅니다.

	pen	disabled
적용 대상	모든 HTML 요소	폼 요소 (button, input 등)
마우스 이벤트	차단 (클릭 통과)	차단
키보드 접근	가능 (Tab 포커스)	차단 (Tab 건너뜀)
폼 제출	값이 전송됨	값이 전송되지 않음
:hover 스타일	적용 안 됨	적용 안 됨
접근성	스크린리더에서 읽힘	스크린리더에서 비활성 상태로 읽힘

팁 & 주의사항

오버레이 클릭 통과

장식용 오버레이, 워터마크, 그라데이션 커버 등에 pen을 적용하면 아래 요소의 클릭이 정상 작동합니다.

로딩/비활성 상태에 활용

폼 제출 중이나 데이터 로딩 중에 pen o50 조합으로 시각적+기능적 비활성 상태를 만들 수 있습니다.

키보드 접근은 차단하지 않음

pen은 마우스/터치만 차단합니다. 키보드 Tab 키로 포커스가 여전히 가능하므로, 완전한 비활성화가 필요하면 HTML disabled 속성을 사용하세요.

user-select cursor opacity