CSS: HTML에서 앵커를 클릭할 수 없게 만드는 방법

웹 페이지를 만들다 보면 앵커 링크(<a>)는 보이되 동작하지 않기를 바랄 때가 있습니다. 해당 영역이 아직 준비 중이거나, 링크가 장식용일 수 있습니다. 이유가 무엇이든, CSS 규칙 몇 줄이면 앵커를 클릭할 수 없게 만들 수 있습니다.

코드 조각

앵커 태그를 클릭할 수 없게 만드는 짧은 코드부터 보겠습니다:

<a href="#" class="inactive-link">Unclickable Link</a>

그런 다음 CSS에 아래 스타일을 추가하세요:

.inactive-link {
    pointer-events: none;
    cursor: default;
}

이런 경우에 씁니다

내비게이션 메뉴가 있는데 페이지 하나가 아직 공사 중이라고 해 봅시다. 디자인 균형을 위해 링크는 보이게 두고 싶지만, 사용자가 누르지는 못하게 하고 싶습니다. 예시는 다음과 같습니다:

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
  </ul>
</nav>

정리

CSS 두어 줄이면 어떤 앵커 태그든 클릭할 수 없게 만들 수 있습니다. 비활성 링크나 자리 표시용 링크를 다루는 빠르고 효과적인 방법입니다. 링크는 보이되 동작하면 안 될 때 이 기법을 써 보세요.