preventDefault()

📖 preventDefault();

: a 태그나 submit 태그를 누르면 href를 통해 이동하거나 창이 새로고침된다.

이 때 preventDefault는

① a태그를 눌렀을때 href로 이동되지 않게 만들 경우나
② submit 역할을 하는 버튼을 눌러도 이벤트와 함께 창까지 새로 실행되는 것을 방지하고 싶은 경우에 사용한다.

href

웹브라우저에게 a 태그 클릭시 이동하여야할 페이지

href="#" 속성을 넣는 이유

a 태그의 click 이벤트만 실행하고 웹브라우저는 이동하지 않게 하기위해 설정한 값이다.

🔔 하지만 이때 스크롤이 있는 경우 페이지 최상단으로 이동하게 된다.
href="#"은 웹브라우저의 최상단을 가리키는 앵커이기 때문이다.

🔔 이처럼 글을 작성할때나 회원가입시 버튼을 한번 클릭할때마다 페이지가 쭉 위로 올라가는 것을 방지하기위해서 사용하는 것이 preventDefault이다.

href="# 와 href="#;" (세미콜론)의 차이

세미콜론이 붙으면 화면 최상단으로 이동하지 않는다.

• href="#" : 이벤트가 발생하기전 화면 최상단으로 이동 후 이벤트 실행
• href="#;" : 화면의 이동없이 이벤트 실행

링크(link)의 URL

1. 절대 주소(absolute URL)

href=“http://www.tcpschool.com/index.php”

ex) <a href="https://www.naver.com">네이버 사이트로 이동!</a>

2. 상대 주소(relative URL)

href=“/lecture/logo.png”

3. 같은 페이지 내에서 명시된 id를 가지고 있는 요소로 연결

href=“#bottom”

ex) <p id="top">모든 국민은 행위시의 법률에 의하여...
받지 아니한다.</p>

<a href="#top">Top으로 이동</a>

4. 스크립트

href=“javascript:alert(‘반갑습니다!’)”

ex) <a href="javascript:alert('자바스크립트 실행');">자바스크립트 실행!</a>

출처 : http://www.tcpschool.com/html-tag-attrs/a-href