📌 <a> 태그의 href 속성
정의 및 특징
<a> 태그의 href 속성은 링크된 페이지의 URL을 명시한다.
문법
<a href=“URL”>🧐 a href=""가 뭔지는 알았는데 과제하다 javascript:;, javascript:(0); 등 다르게 쓰일 때가 있어 각각의 차이점을 정리하고자 이 글을 작성하였다.
📌 href="javascript:" / href="javascript:0 / href="javascript:void(0)" / href="#" 의 차이점
1. a href="javascript:;"
- 빈 문장(;) 반환한다.
- 현재 페이지에서 JavaScript 코드를 실행한다.
- 클릭시에는 아무 동작도 하지 않고, 다른 어떤 이벤트도 발생하지 않는다. 즉, JavaScript 코드만 실행된다.
2. a href="javascript:0;
- javascript:; 대신 javascript:(0);를 사용한다
- 단순히 0을 반환한다. 그렇기 때문에 새로운 페이지나 링크로 이동하지 않게 된다.
- a href="javascript:;"와 비슷하지만 클릭시에는 빈 페이지로 이동한다.
- 이 방식을 사용하면, 페이지가 새로고침되지 않고, 다른 이벤트도 발생하지 않는다.
💡 예전에는 자주 사용되었지만, 현재는 보안 이슈와 접근성 문제로 인해 권장되지 않는다. 대신에, 이벤트 리스너를 이용하여 클릭 이벤트를 감지하고 JavaScript 코드를 실행하는 방식이 권장된다.
👉 두 링크 모두 JavaScript 코드를 실행하기 위한 용도로 사용되지만, a href="javascript:;"은 페이지 이동 없이 JavaScript 코드를 실행하는 데 사용되고, a href="javascript:(0);"은 빈 페이지로 이동하는 것과 같은 효과를 가지면서도 아무런 동작을 하지 않는 JavaScript 코드를 실행하는 데 사용된다.
3. a href="javascript:void(0)"
- void는 JavaScript에서 아무 값도 반환하지 않도록 하는 키워드이다.
- 링크를 클릭했을 때 아무 동작도 수행하지 않는 빈 링크를 생성할 수 있다.
💡 href="javascript:void(0)"과 href="javascript:0;"은 동작상의 차이점
- javascript:void(0) 아무 값도 반환하지 않음(빈 링크 생성)
- javascript:0; '0' 반환하는 JS코드 실행('0'반환하는 JS코드 실행 링크 생성)
4. a href="#"
- #은 현재 페이지의 맨 위로 이동하는 빈 링크를 나타낸다. 즉, 클릭하면 아무 일도 일어나지 않고 현재 페이지의 맨 위로 스크롤된다.
- 이 방식은 일반적으로 이벤트를 방지하고자 할 때 사용된다.
예를 들어, 클릭 이벤트를 가진 버튼을 만들 때 href="#"을 사용하면, 링크 클릭시에 페이지가 새로고침되는 것을 방지할 수 있다.
📚 따라서, 각 방식은 클릭시에 어떤 이벤트가 발생하고, 어떤 동작을 하는지에 따라 다르게 사용된다.
