<a>태그와 #

<a> 태그는 anchor의 첫글자 'a'를 의미하며 , 다른 콘텐츠와 연결하는 하이퍼링크를 정의하는 태그이다. 다른 문서로의 이동 / 또는 같은 문서내의 이동이 가능하다.

웹 페이지에서 <a href="#"></a> 의 모습을 볼 수 있는데 각 경우를 정의해 보았다.

 

1. 클릭 이벤트 발생 시 페이지 전환을 하지 않도록 하기 위하여 쓰인다.

# + id를 사용해서 같은 문서내의 해당 element로 이동하도록 하는것인데, #으로 의미없는 링크를 주어 페이징이 안되도록 하는 것이다.

#로 명시를 하는 것은 여러 블로그에서 '관례'라고 나와있지만 클릭시 화면 최상단으로 이동하게 되므로

<a href="javascript:;" onclick="func()"></a> 와 같은 방법을 추천하기도 한다.

 

2. 만약 화면 최상단으로 이동을 목적으로 #를 쓴다면, 다음 코드와 같이 window.scrollTo()를 쓰는게 더 좋은 방식이다.

<input id-"btnTop" type="button" onclick="window.scrollTo(0,0);" value="TOP">

 

3. href="#" 와 href="#;" 의 차이는 세미콜론이 붙으면 화면 최상단으로 이동하지 않는다는 점이다.

href="#" 으로 하면 이벤트가 발생하기 전 화면 최상단으로 이동한 후 이벤트가 수행되지만,

href="#;" 으로 하면 최상단으로의 이동 없이 이벤트가 수행된다.

 

또한 #; 와 javascript:;의 차이는 URL뒤에 #이 붙고 안붙고의 차이이다.