URL이 없는 하이퍼링크(<a>)에 "#"과 "void(0)"을 사용하는 이유와 차이점

HTML&CSS

apost 2021. 10. 12. 09:00

아무것도 입력하지 않은 하이퍼링크를 클릭하면 현재 페이지의 갱신이 일어납니다.

아무것도 입력하지 않은 하이퍼링크는 현재 페이지 URL이 있는 것과 같은 것으로 처리가 됩니다.

웹페이지 제작을 할 때 하이퍼링크는 다른 페이지로 이동하는 페이지 링크 용도 외에도 여러 가지로 사용됩니다.

페이지 갱신이 일어나지 않도록 하려면 하이퍼링크 URL에 뭔가를 입력해서 페이지 페이지 이동을 막아야 합니다.

하이퍼링크에서 페이지 이동을 막는 막는 방법은 다음 2가지가 있습니다.

<a href="#">하이퍼링크</a>

<a href="void(0)">하이퍼링크</a>

두 가지 모두 하이퍼링크를 클릭해도 페이지 갱신이 일어나지 않도록 합니다.

하지만 둘은 실제로는 많은 차이가 있으므로 경우에 따라 선택적으로 사용해야 합니다.

"#"

"#"의 정확한 용도는 페이지 안에 있는 ID가 있는 요소로 위치로 이동하는 기능입니다.

"#footer"는 "footer" ID를 가진 요소로 위치를 이동합니다.

정확하게는 "현재 페이지 URL#footer"와 같습니다.

"#ID" 사용 방법의 가장 중요한 특징은 페이지 URL이 같으면 전체 페이지 갱신 없이 ID가 있는 요소로 위치를 이동한다는 점입니다.

그리고, "#" 뒤에 ID를 따로 정하지 않으면 웹 페이지 맨 위(문서 최 상위)를 가리키게 됩니다. 중요합니다!

뷰포트 높이보다 긴 페이지를 스크롤해서 페이지 맨 위가 보이지 않는 상태에서 <a href="#">을 클릭하면 페이지 최상단으로 이동합니다. 그래서 "#"을 하이퍼링크에 사용할 때는 스크롤에 특별히 주의해야 합니다.

스크롤이 있는 페이지를 작성할 때 스크롤 이동까지 막고 싶으면 "#" 뒤에 존재하지 않는 ID를 붙여주면 됩니다.

id="none"과 같은 ID 사용이 페이지 안에 없으면 "#none"과 같이 하이퍼링크를 사용해 최상단으로 스크롤하는 동작을 막을 수 있습니다.

또는 다음에 설명하는 "javascript:void(0);"를 사용해야 합니다.

함수 호출에서 알 수 있듯이 "void(0)"은 자바스크립트 함수입니다.

자바스크립트 코딩을 할 줄 몰라도 됩니다.

다만 이 함수가 왜 하이퍼링크에서 특별히 유효한지는 이해를 하고 써야 합니다.

하이퍼링크에는 페이지 URL 표기 외에 자바스크립트 함수를 표기해서 자바스크립트 함수가 실행되도록 할 수 있습니다.

하이퍼링크를 클릭하면 URL에 해당하는 페이지 이동을 하는 대신 자바스크립트 함수가 실행됩니다.

void(0) 함수는 아무런 기능을 하지 않고 함수를 종료합니다.

아무런 동작 없이 함수를 종료를 하는 것은 일반 함수로도 구현이 가능하지만, void(0) 함수는 별도로 함수를 작성하지 않아도 동작하는 내장 함수입니다.

아무 기능을 하지 않는 함수를 다음처럼 정의해서 하이퍼링크에 넣으면 페이지 갱신이 일어나지 않는 것을 확인할 수 있습니다.

function noaction(){}

앞서의 예처럼 하이퍼링크에 "#"을 그대로 유지하고 싶으면 다음과 같이 onclick 이벤트 처리 방법을 사용할 수 있습니다.

<a href="#" onclick="noaction()">하이퍼링크</a>

이벤트 순서상 onclick 이벤트 함수 호출이 먼저 되고 그 뒤에 <a> 태그의 하이퍼링크 클릭이 실행됩니다.

중요한 것은 onclick 이벤트 처리 함수입니다. 함수를 정의할 때 끝 부분에 다음과 같이 이벤트 버블링을 차단하는 코드를 넣어주면 하이퍼링크 태그의 클릭 이벤트가 차단됩니다.

function noaction(){
    event.preventDefault(); // 이벤트 버블링 차단
    return false;
}

이벤트 버블링을 차단하면 클릭 이벤트가 noaction() 함수 실행 후 더 이상 전파되지 않기 때문에 <a> 태그의 클릭 이벤트가 실행되지 않고 종료됩니다.

이벤트 버블링이 차단되지 않으면 자바스크립트 함수 종료 후 하이퍼링크 클릭 이벤트가 실행되어 하이퍼링크의 "#" 위치 이동("#")이 동작해 페이지 최상단으로 이동하게 됩니다.

자바스크립트 코딩을 할 줄 모르거나 코딩에 약하면 그냥 외워서 쓰는 것을 추천합니다.

표준 사용방법이고, 하이퍼링크의 페이지 이동과 스크롤을 막는 가장 효과적인 사용 방법들입니다.