HTML에서 앵커 태그(<a>)가 아무것도 참조하지 않도록 만들려면 href 속성에 "javascript:void(0)"를 사용하면 됩니다.
void(0) 연산자는 JavaScript에서 표현식 "0"을 평가한 후 undefined를 반환하며, 그 결과가 현재 문서로 로드되지 않기 때문에 링크를 클릭해도 아무런 반응이 일어나지 않습니다. 즉, 페이지 이동 없이 클릭 이벤트만 처리하고 싶을 때 유용하게 활용할 수 있습니다.
예제 코드
아래 예제에서 링크를 클릭해도 페이지는 전혀 반응하지 않습니다.
<html> <head> <script> <!-- //--> </script> </head> <body> <p>아래 링크를 클릭해 보세요. 아무런 반응이 없습니다...</p> <a href="javascript:void(0)">클릭하세요!</a> </body> </html>
동작 원리
javascript: 접두사는 URL 스킴처럼 작동하여 브라우저가 해당 코드를 실행하도록 합니다. 이때 void(0)는 항상 undefined를 반환하므로, 브라우저가 새로운 문서를 로드하거나 화면을 갱신하는 일이 발생하지 않습니다.
참고: 최신 웹 개발에서의 대안
javascript:void(0)는 오랫동안 널리 사용되어 왔지만, 최근에는 코드 가독성과 유지보수성, 보안 측면(콘텐츠 보안 정책(CSP) 위반 가능성)의 이유로 권장되지 않습니다. 대신 다음과 같은 방법을 고려하는 것이 좋습니다.
- <button> 요소 사용: 클릭 동작만 필요하다면 앵커 태그 대신 버튼 요소를 사용하는 것이 의미론적으로 더 적절합니다.
- event.preventDefault() 활용:
<a href="#">와 함께 JavaScript에서preventDefault()를 호출하면 기본 동작을 막을 수 있습니다.
다만 기존 코드베이스나 간단한 데모 환경에서는 javascript:void(0) 방식이 여전히 빠르고 간편한 해결책으로 사용됩니다.