자바스크립트 a href="#" 무엇을 의미?

HTML a href 의미

<a href = " "> 태그와 속성은 다른 웹사이트로 링크를 하는 기능. a는 <a> 태그 입니다. 외부 문서나 내부 문서를 링크할 때 사용하는 태그.

href는 hypertext reference의 약자로 실제로 이동할 웹페이지의 주소를 뒤에 적는 속성입니다.

<a> 태그와 href 속성은 서로 같이 쓰여야 링크를 만들 수 있습니다.

<a> 태그

<a> 태그는 여는 태그와 닫는 태그로 구성됩니다. 아래 그림 처럼 위키백과라는 단어에 <a> 태그로 양 옆을 감싸면 됩니다.

HTML href ex 1 - JSFiddle - Code Playground

jsfiddle.net

링크할 주소를 href 뒤에 아래 예시처럼 작성하면 링크가 완성됩니다. 위키백과 글씨를 클릭하면 해당 주소로 이동하게 됩니다.

<a href="https://ko.wikipedia.org/wiki">위키백과</a>

HTML href ex 1 - JSFiddle - Code Playground

jsfiddle.net

글씨를 클릭했을 때 새창에서 열고 싶다면, 주소 뒤에 target="_blank"라는 속성을 입력하면 됩니다. blank 앞의 언더바(_)를 빼먹지 않도록 합니다.

<a href="https://ko.wikipedia.org/wiki" target="_blank">위키백과</a>

HTML href ex 3 - JSFiddle - Code Playground

jsfiddle.net

a 태그는

anchor 의 첫글자로서 '정박지', '닻' 이란 의미이다.

다른 문서로의 이동, 또는 같은 문서내의 이동을 위해 사용한다.

href="#"을 쓰는 경우들:

웹페이지에서 'href="#" ' 모습을 볼 수 있는데 각 경우 별로 정리해보았다.

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뒤에 #이 붙고 안붙고의 차이이다.

Reference

<a href="#" ...> 의 의미 (http://blog.naver.com/PostView.nhn?blogId=moonv11&logNo=60158966996)
a태그-href-속성-none-및-링크-옵션 (a태그-href-속성-none-및-링크-옵션)