a 링크 "#" , void(0) 의미

 

 

일반적으로 알고 있는 a태그는 링크를 이동시켜주는 앵커태그

 

 

페이지 이동

<a href="https://www.naver.com/">네이버로 이동</a>

특정 url 값으로 해당 페이지가 이동한다.

 

 

스크롤 이동

<div id="box">box</div>

<a href="#box">아이디 box로 가기</a>

다른 태그에 작성된 아이디 값을 추가하여 특정 위치로 스크롤을 이동시킬 수 있다.

페이지 전환이 아닌 현재 페이지에서의 위치 이동이다.

 

 

"#"

<a href="#"></a>

a태그에 #만 있을 경우 브라우저가 페이지의 맨 위로 이동한다. 

 

그렇다고 href=""를 비워둘 순 없다. 

유효성 오류 문제가 있기 때문이다.

 

 

javascript:void(0)

<a href="javascript:void(0);">클릭</a>

void(0) 은 자바스크립트 함수이다.

javscript: 뒤는 오는 것을 자바스크립트의 코드로 해석한다.

void 안에는 영문, 숫자도 사용이 가능하지만 일반적으로 0 을 사용한다

 

a 태그의 이동기능을 무력화 시키며 undefined 를 리턴하는 연산자이다.

void(0)을 사용하는 이유는 undefined 을 얻기 위함이라고 한다. 

해당링크가 정상적으로 동작하지 않게 만들기 위해 이처럼 undefined 을 사용한다고 보면 된다.

 

태그를 그대로 유지하면서도 클릭 이벤트를 막기 위함

 

ES5부터 undefinded는 쓰기가 불가능한 읽기 전용으로 개선되어 더이상 void 연산자가 필요 없게 되었다.

 

 

 

javascript:;

<a href="javascript:;">클릭</a>

스크롤 이동도 undefined 도 없다.

반응형

 

빈 href 속성 사용하기

<a href="#" onclick="return false;"></a>

또다른 방법으로 onclick 요소에 return false 로 링크동작을 방지하는 효과를 나타낼 수 있다.

 

 

 

 

 

---

 

 

 

 

a 태그의 기본 링크 동작을 방지하기 위해 void(0); 속성을 이용하는 것 보다 다른 알맞는 태그를 사용하거나 마우스 포인트 커서가 필요하다면 css를 적용하는 등 의미있는 태그쓰임을 권장한다.

 

 

 

 

 

---

https://minimal-dev.tistory.com/28

https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean/1291950#1291950