[html] a href="#" , javascript: void(0), javascript: ; 차이점, 무엇을 써야할까요?

a href 속성값들

 

 

 

 

 

1. a href 의 값 종류들

---

<a href="{값}">...</a>

 

(a target속성 관련 >> https://joyhong-91.tistory.com/entry/html-a-%ED%83%9C%EA%B7%B8-targetblank-%EC%99%80-targetblank-%EC%B0%A8%EC%9D%B4)

[html] a 태그 target="blank" 와 target="_blank" 차이

 

위의 {값}에 들어갈 수 있는 종류들은 아래 와 같습니다.

 

 

1-1. url

<!-- 새창에서 열리게 하는 속성은 target="blank" 혹은 target="_blank"를 사용하면 됩니다. -->
<a href="https://joyhong-91.tistory.com" >...</a>

 

1-2. #id selector

<!-- 누르면 해당 selector로 스크롤 된다. -->
<a href="#target">...</a>
...
<div id="target">...</div>

 

1-3. #, # + return false, #none

<!-- 누르면 창의 이동이나 새로고침은 없지만 스크롤 어디에 있던 최상단으로 이동합니다. -->
<!-- 기획과 디자인에 따라서 필요한 경우도 있겠지요..? (굳이 필요할수도 ) -->
<a href="#">...</a>


<!-- 창이동 X, 상단으로 스크롤 X -->
<!-- return false로 클릭했을때 상단 스크롤을 방지해 줍니다. -->
<a href="#" onclick="return false">...</a>


<!-- 창이동 X, 상단으로 스크롤 X -->
<!-- 주의!  해당페이지에 none이라는 id selector를 가진 요소가 있으면 안됩니다! -->
<a href="#none">...</a>

 

1-4.  javascript: ; javascript: void(0)

<!-- 창 이동 X, 스크롤 이동 X -->
<!-- void(0 | 'x') 안에는 영문,숫자 아무거나 상관없습니다 -->

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

 

void는 리턴(return)되는 타입이 없음을 의미합니다. javascript는 return 값이 없는 함수를 찍어보면 "undefined"가 나오는 것을 볼 수 있습니다.

 

javascript: 다음에 오는 구문은 스크립트로 평가되어 실행됩니다.

 

 

*javascript: void(0)

일반적으로 사용하는데 큰 문제는 없지만 CSP(content security policy)의 설정에 따라서는 inline event handler가 블럭 될 수있습니다.  그리고 XSS(Cross site script) 취약점으로 외부의 스크립트가 주입되어 실행되는 것을 차단하기 위해서 프로젝트에 inline script (태그안에 스크립트를 작성하는 것)를 되도록 안쓰는 것을 추천합니다.

 

 

 

a 태그에 href="#"나 "# + return false"나  "javascript:;"등을 쓰는 경우,

즉, 링크 이동이 아닌 클릭 이벤트의 트리거로 사용된다면 <button>태그를 사용하는게 제일 낫지 않나 생각 됩니다!

 

 

 

출처: https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean/1291950#1291950, https://reiphiel.tistory.com/entry/href-javascript-void-or-hash

 

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡