관리 메뉴

web sprit

[CSS3] css로 a링크 비활성화 하기. 본문

웹5/CSS3

[CSS3] css로 a링크 비활성화 하기.

커드만 커드만 2019. 6. 29. 23:49

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 말고 다른속성값을 개발자모드로 확인해 보았습니다.

생각보다 여러가지 속성을 가지고 있네요~
속성값의 내용은 여기서 다루진 않고 한번 궁금하신 속성값을 적용해 보시거나 
찾아보며 공부해보는 것이 좋을것 같습니다.

감사합니다. :)

2 Comments
댓글쓰기 폼