링크를 비활성화하는 CSS 트릭

문제:

CSS를 사용하여 링크를 비활성화할 수 있습니까? 예를 들어, "현재 페이지"라는 클래스가 있는 경우 클릭 시 해당 클래스의 링크가 활성화되지 않도록 할 수 있습니다.

해결책:

다음 CSS 코드 조각은 간단한 솔루션을 제공합니다.

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

이 코드는 "aria-current='page'" 속성이 있는 요소를 대상으로 하며 "pointer-events"를 "none"으로 설정하여 상호작용을 비활성화합니다. 또한 "커서"를 "기본값"으로 설정하고, 텍스트 장식을 제거하고, 텍스트 색상을 검은색으로 재설정하여 일반적인 링크 스타일을 제거합니다.

이 솔루션을 HTML에 적용하려면 다음과 같이 링크를 수정하면 됩니다.

Link

이렇게 하면 링크가 비활성화되고 '현재- 페이지" 클래스 적용됩니다.