[HTML] Javascript Void:(0) 를 사용하는 이유 : a태그 Href 속성 | <a href="#">랑 다른점

 

 

[HTML] 
a태그 Href 속성 안에
Javascript Void:(0) 를 사용하는 이유

<a href="#"></a>이랑 다른점

 

🟣 코드 사용 예시

<!-- href 속성 -->
<ul>
	<li>
    	<a href="javascript:void(0);">Tistory zoo-land</a>
    </li>
</ul>

✅ 상황
→ 보통 내부나 외부링크를 걸고 싶을 때, a태그의 href로 링크를 걸어주는데
아직 링크가 정해지지 않은 경우 href="#"을 사용해야할지 Javascript Void:(0)을 걸어야할지 고민이 된다면?

✅ Javascript Void:(0) 를 사용하는 이유는?
→ undefined 의 결과를 얻기 위해서!!
"링크가 작동하지 않게 하기 위해 사용하는데, 즉 클릭을 해도 실제 클릭 이벤트가 작동되지 않기 위해 사용 하는 것"

✅ <a href="#"></a>이랑 다른점은?
→ href="#"으로 작성하면 실제로는 링크가 없으니 이동하지 않은 것처럼 보여 Javascript Void:(0) 와 차이가 없는 것 같지만,
실제로는 클릭 이벤트가 발생되지만 #뒤에 id 값이 없어 이동하지 않은 것처럼 보일 뿐입니다.

 

🔵 사용예시

 

 

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

→ 해당 아이디 값으로 내부 이동시키는 클릭이벤트 방법

 

<ul class="aboutlink">
  <li><a href="#concept">BRAND STORY</a></li>
  <li><a href="#showroom">SHOW ROOM</a></li>
  <li><a href="#channel">BRAND CHANNEL</a></li>
</ul>