HTML-Links(링크태그)

---

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다.

---

안녕하세요 Gon입니다.

 

이번 글에서는 우리가 작성하는 HTML 문서에서 다른 웹페이지 또는 어딘가로 이동을 할수 있게 해주는 하이퍼링크를 알아보도록 하겠습니다.

 

HTML Links - Hyperlinks

 

하이퍼링크를 만들어 주고 그 하이퍼링크를 클릭하면 다른 문서로 이동할수 있게 해주는 기능입니다.

 

Syntax(문법)

 

HTML에서는 하이퍼링크를 정의하는 태그는 <a> 입니다.

 

a 태그 안에는 크게 3가지 속성 값이 있습니다.

 

• href : 이 속성값은 다른 문서로 이동할 경로를 지정해 주는 속성입니다.
• target : 이 속성값은 다른 문서를 어떤 형식으로 이동할 것인가에 대한 속성입니다.
• title : 이 속성값은 이 요소에 마우스를 올리면 해당 다른 문서에 대한 간략한 설명을 보여주는 속성입니다.

href

<a>태그 안에 href 속성을 이용하여 다음과 같이 이동 문서에 경로를 지정해 줄수 있습니다.

 

이 href속성을 이용하는 방법은 2가지 방법이 있습니다. 

• absolute URL - 모든 경로를 다 포함 하여 하는 방법 - 주로 다른 웹사이트를 불러올 때 사용 됩니다.
• relative URL - 해당  웹사이트의 다른 웹페이지를 불러올 때 사용되는 방법 - https://www.제외 하고 사용 됩니다.

 

absolute 방법

relative 방법

 

<a href="https://www.daum.net"> absolute 방법 </a>
<a href="blog-of-gon.tistory.com"> relative 방법 </a>

target

target속성은 어떤 방식으로 다른 문서로 이동할지에 대한 속성으로 크게 2가지 값으로 사용합니다.

 

• _self - 현제 웹페이지에서 이동합니다 ( 기본값으로 target 설정 안할시 적용 됩니다)
• _blank - 새 창에서 해당 문서를 열어 줍니다.

<a href="bolg-of-gon.tistory.com target="_blank">새창에서 열기</a>
<a href="bolg-of-gon.tistory.com target="_self">현재 창에서 열기</a>​

 

title

 

title속성으로 해당 하이퍼링크에  마우스를 올리면 tooltip을 보여줍니다.

<a href="bolg-of-gon.tistory.com title="Gon의 블로그 입니다">Gon의 블로그 Main</a>

 

Button 태그를 이용하여 이동하기

 

button을 이용하여 특정 버튼을 만들고 버튼을 클릭할시 해당 경로로 이동하게 만들 수 있습니다.

button태그와 onclick 속성을 이용해서 구현 가능합니다.

<button onclick="blog-of-gon.tistory.com">Gon블로그 바로가기 버튼</button>

 

 

이번 글에서는 위와 같이 HTML 문서에서 다른 문서로 이동할수 있게 해주는 Link를 하는 방법에 대하여 다뤄보았습니다.

 

감사합니다.

 

Gon.