이미지 클릭 되지 않게 하는 방법 - pointer-events

이 방법은 CSS 속성을 활용하는 방법으로 이미지를 포함한 그래픽 요소가 포인트 이벤트의 대상이 될 수 있는 상황에 따라 설정할 수 있다. 사용 방법은 간단하며, 아래에 예제가 준비되어 있다.

Pointer-events

pointer-events: auto;
pointer-events: none;
pointer-events: stroke; /* SVG-only */
pointer-events: fill; /* SVG-only */

위와 같이 일반적으로 사용되는 속성 값으로 만약, 이미지에 대해 어떤 이벤트도 발생하지 않게 하려면 pointer-events: none;를 적용해주면 된다.

Syntax

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: unset;

이 속성이 지정되는 경우, 어떤 값을 적용하는지에 따라서 일반 이미지에는 적용되지 않고, SVG에만 적용되는 값이 있다. 또 이와 같이, 이미지를 감싸고 있는 부모 태그에 적용해도 같은 효과를 볼 수 있다. 각각 애니메이션이나 이미지는 별개로 적용할 수 있으며, 아래의 예제를 적용하면 모든 이미지에서 포인트 이벤트를 사용하지 않을 수 있다.

img {
  pointer-events: none;
}

단일 링크에서도 포인트 이벤트를 사용하지 않을 수 있는데 예를 들어, 이미지를 감싸고 있는 링크도 클릭 액션을 취했을 때, 포인트 이벤트를 사용하지 않을 수 있다.

HTML

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

a[href="http://example.com"] {
  pointer-events: none;
}

위의 방법을 사용한다면 이미지를 텍스트처럼 배치하거나 등 자유롭게 활용할 수 있게 된다. 이 방법의 예제는 MDN Web Docs의 원문을 인용하였다.