html - a 태그 링크 동작 꺼버리기(a href)

들어가기

html a 태그(앵커)는 html 문서에서 링크를 지정하는 태그이다. 그 표시로 마우스 커서를 a 태그에 가져가면 커서가 손 모양으로 변한다.

개발하다보면, 이 a 태그의 링크 동작이 필요 없는 경우가 있다. (javascript 라이브러리로 동적으로 a 태그를 수정하는 경우...)

인터넷을 찾아본 결과 한 4가지 정도의 방법을 찾았다.

방법

아래 html 페이지가 그 예제이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head><title>a herf 링크 동작 꺼버리기</title></head>
<style>
a {cursor:pointer;}
</style>
<body>

<a href="#">링크 테스트 #</a><br> <!-- #을 쓰면 해당 페이지의 최상단으로 화면이 움직인다. -->

<!-- 아래 3가지 방법은 #을 쓰는 방식과 달리 링크를 클릭해도 해당 페이지의 최 상단으로 이동하지 않는다. href 태그에 undefined가 전달되면 링크는 동작하지 않게 된다.-->
<a href="javascript:void(0);">링크 테스트 javascript:void(0);</a><br>
<a href="javascript:;">링크 테스트 javascript:;</a><br>

<!-- 이런식으로 href 어트리뷰트를 아예 안쓸수도 있다. 다만 이 경우 마우스커서가 손가락 모양으로 변하지 않는데, 위 style태그에서 마우서커서를 pointer로 처리해서 사용한다.-->
<a onclick="">링크 테스트 onclick</a><br>

</body>
</head

a 태그 테스트 화면

위 예제의 주석을 보면 대충 어떻게 쓰는지 알수 있을 것이다.

인터넷을 찾아보니 위 방법중 어떤것은 좋고 나쁘고 왈가왈부가 많은데(웹표준 등등) 솔직히 난 뭐가 나쁘고 좋은지 잘 모르겠다. 그냥 쓰기에는 맨 마지막 방법인 href대신 onClick 이벤트를 쓰는 것이 편해보인다.

참고자료

https://blog.outsider.ne.kr/223