뉴비 개발자의 학습일기

[HTML5]-<a> 태그 사용 시 새 창에서 페이지가 열리도록 하는 법 본문

프론트엔드 과거의 흔적

[HTML5]-<a> 태그 사용 시 새 창에서 페이지가 열리도록 하는 법

뉴비킴 2023. 2. 15. 21:52

<a> 태그는 anchor의 약자로 하이퍼링크를 넣고 싶을 때 사용하는 태그이다.

이 태그를 href 속성과 함께 사용하여 아래 이미지처럼 하이퍼링크를 삽입할 수 있는데, 2번 째 줄의 "./login.html" 링크처럼 작성된 경우에는 사용자가 현재 보고 있는 페이지에서 해당 링크로 이동하게 된다.

이 때, 이동하는 것이 아니라 새 창에서 페이지가 열리도록 하고 싶다면 target="_blank"를 써주면 된다.

 

a 태그를 사용하여 작성한 하이퍼링크

처음 이미지의 HTML 코드를 브라우저를 통해 보면 이런 페이지가 출력된다. 여기서 로그인 페이지를 누를 경우

 

이렇게 보고 있던 페이지 자체가 해당 페이지로 이동한다. 해당 링크는 작성만 해놓았을 뿐 실제로는 아무것도 존재하지 않는 더미 링크이기 때문에 이렇게 오류가 발생한다.

 

 

반면에 target="_blank"를 사용해 작성한 코드스테이츠 홈페이지 링크를 클릭할 경우 위 이미지처럼 원래 페이지는 그대로 유지되고, 새 창에서 해당 링크가 열리는 것을 볼 수 있다.