CSS로 a 링크 비활성화 하기

a link를 비활성화하는 방법은 여러가지가 있습니다. 물론, js를 통해, a link DOM을 조작하는 방법도 있지만, 이번에는 아주 간단하게 CSS 몇줄로 비활성화 하는 방법을 알아보겠습니다.

css를 이용하여 이벤트를 차단하는 방법입니다.

.someClass
a {
    pointer-events: none;
}

위와 같이 지정하면, someClass 하위에 있는 a link를 클릭해도 반응하지 않습니다.

그런데, 상기와 같이 하면, a link만 클릭이 안되는 것이고, 색상등 스타일 정보가 그대로입니다.

따라서, 다른 plan text와 동일하게 하려면, color 나 밑줄 등을 바꾸는 것이 좋겠습니다.

그래서, 아래와 같이 적용합니다.

.someClass
a {
    pointer-events: none;
    color: #030303; /* 상황에 맞게 지정하세요 */
    text-decoration: none;
}

상기와 같이 지정하면, 밑줄도 사라지고, 폰트의 색상도 변경할 수 있습니다.

복잡하게 DOM 조작할 필요도 없고, 간단히 해결 했습니다.