a링크를 비활성화 하는 방법은
javascript나 jQuery 로 비활성 하는 방법이 있지만
css 속성을 통하여 비활성화 할 수 있습니다.
css 를 이용하는것을 권하는 이유는 가볍게 무거움을 덜 뿐 아니라
특정 상태였을때 링크를 활성화하고 비활성화 하는것에 class 추가 또는 제거를 통해
가능하기 때문이죠.
방법은 매우 간단합니다. 아래와 같이 적용해 주세요.
<style>
.box{
pointer-events: none; (a링크를 비활성화 해준다.)
cursor: default; (마우스 커서를 가져갔을때의 모양을 지정하는 것으로 굳이 작성하지 않아도 된다.)
}
</style>
<a href="https://www.naver.com/" class="box">네이버 바로가기</a>
href 에 네이버로 연결할 수 있게 링크를 걸어 주었지만
실제 웹으로 화면을 확인하고 눌렀을때 네이버로 링크를 가지 않는것을 확인할 수 있습니다.
pointer-events 의 속성으로 none 말고 다른속성값을 개발자모드로 확인해 보았습니다.
생각보다 여러가지 속성을 가지고 있네요~
속성값의 내용은 여기서 다루진 않고 한번 궁금하신 속성값을 적용해 보시거나
찾아보며 공부해보는 것이 좋을것 같습니다.
감사합니다. :)