javascript:void(0) 완벽 정리 – 자바스크립트 링크 막기 방법과 그 이유

정책

javascript:void(0) 완벽 정리 – 자바스크립트 링크 막기 방법과 그 이유

mindlab091908 2025. 7. 25. 15:35

📌 1. <a> 태그의 기본 개념

HTML에서 <a> 태그는 링크를 만들기 위한 태그입니다. 기본 문법은 다음과 같습니다:

구글로 이동

위 코드는 "구글로 이동"이라는 텍스트를 클릭했을 때 href 속성에 지정된 URL인 https://www.google.com/ 으로 이동하게 됩니다. 이것이 기본적인 <a> 태그의 기능입니다.

📌 2. 자바스크립트와 함께 쓰는 <a href="javascript:...">

<a> 태그의 href 속성에는 단순히 URL만 넣을 수 있는 게 아닙니다. 자바스크립트 코드도 삽입이 가능합니다.

<a href="javascript:alert('테스트입니다')">클릭</a>

이 코드를 클릭하면 경고창(alert)이 나타납니다. 브라우저가 href 속성의 값을 해석할 때 javascript:로 시작하면 이를 자바스크립트 코드로 인식하여 실행하게 되는 원리입니다.

❓ 그런데 왜 javascript:void(0)을 쓸까?

이제 본론으로 들어가 봅니다.

<a href="javascript:void(0)">링크 막기</a>

위 코드에서 사용된 void(0)는 **"아무것도 하지 마라"**는 의미입니다. 즉, 클릭해도 브라우저가 아무런 반응도 하지 않게 만드는 방법입니다.

📚 void() 함수란?

자바스크립트에서 void는 식(expression)을 평가한 후 아무런 결과도 반환하지 않도록 하는 연산자입니다. 간단히 말해, 어떤 표현식을 실행해도 undefined를 반환하게 만듭니다.

예를 들어,

void(0)         // undefined 반환
void("hello")   // undefined 반환

즉, javascript:void(0)은 특정 함수를 실행하거나 페이지를 이동하는 것이 아니라 그 어떤 효과도 일어나지 않도록 차단하는 목적으로 사용됩니다.

💡 왜 <a> 태그를 쓰면서 링크는 막으려 할까?

정말 좋은 질문입니다.

사실 대부분의 경우라면 <a> 태그 대신 <button> 또는 <span> 태그를 사용하는 것이 더 직관적일 수 있습니다. 하지만 다음과 같은 경우에는 <a> 태그를 써야 할 필요가 생깁니다:

✅ CSS 디자인 목적

많은 UI 프레임워크나 CSS 스타일에서는 <a> 태그에만 적용되는 전용 스타일이 존재합니다. 예를 들어 파란색 글씨에 밑줄이 들어가는 링크 스타일을 그대로 활용하고 싶을 때 <a> 태그를 쓰게 됩니다.

✅ JavaScript로 동작 제어

게시판, 캘린더 등에서 글 제목을 클릭했을 때 자바스크립트로 내부 콘텐츠를 펼치거나 처리할 때, 링크 이동은 막고 싶고 디자인은 <a> 스타일을 유지하고 싶은 경우 javascript:void(0)을 사용합니다.

✅ 접근성과 일관성

사용자 경험(UX) 측면에서, 링크처럼 보이는 요소는 <a> 태그로 유지하는 것이 시맨틱하게 맞을 수 있습니다.

⚠️ javascript:void(0)의 실제 활용 예시

🔸 예제 1 – 링크 동작 없이 이벤트만 발생시키기

<a href="javascript:void(0)" onclick="alert('내용이 없습니다');">제목 없음</a>

위 코드는 게시판에서 비어 있는 글 제목을 클릭했을 때, 페이지는 이동하지 않고 경고 메시지만 띄워주는 역할을 합니다.

⚠️ javascript:void(0) vs <a href="#">의 차이점

이 둘은 혼동되기 쉽지만, 작동 방식은 다릅니다.

✅ <a href="#">

<a href="#">임시링크</a>

클릭 시 페이지 맨 위로 이동합니다.
href="#"는 HTML 문서 내 id="..."를 가진 요소로 스크롤을 이동시키기 위한 용도입니다.
단순히 #만 적으면 문서 최상단으로 이동하는 현상이 발생합니다.
단점: 불필요한 스크롤 이동이나 URL 변경(# 추가) 등 부작용이 생길 수 있습니다.