a href="#" 무엇을 의미?

정은경·2020년 7월 7일
9

👸 Front-End Queen

목록 보기
8/278
post-custom-banner

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

profile
#의식의흐름 #순간순간 #생각의스냅샷
post-custom-banner

0개의 댓글