앵커 태그 anchor <a> 를 이용해 링크달기

<a> 앵커 태그는 anchor 첫 글자를 가져와 만든 태그입니다.

 

웹이라는 정보의 바다에 닻을 내리고 정박해 있는 모습을 연상할 수 있습니다. html 언어에서는 링크를 연결하는 역할을 하는 태그입니다. <a> 태그를 이용하여 링크를 걸기 위해서는, 우선 링크를 연결하고 싶은 곳을 <a> </a> 태그로 감싸줍니다. 그리고 <a> 코드에 속성을 추가해줍니다. <a href="링크를 연결할 url주소"와 같이 작성합니다.

 

href 속성으로 <a> 태그에 연결하는 주소 삽입하기

 

이때, href의 h는 hypertext를 의미합니다. hypertext는 인쇄된 일반 텍스트와는 다른 속성이 있습니다. 일반 텍스트는 순차적으로 내용을 읽어나가는 반면, hypertext는 연결된 네트워크만 있다면 비순차적으로 다른 내용으로 이동해 읽을 수 있습니다. 정보를 갖춘 문서를 노드(nodes)가 연결된(linked) 형태의 텍스트 구조인 것이지요. <a> 코드의 anchor 닻이 노드 문서에 내려가 박히면, 다른 곳에 있더라도 닻을 통해 연결된 노드 문서로 이동할 수 있습니다. ref는 reference를 의미합니다. 웹 브라우저에 reference가 알리는 값을 참조하라고 알려주는 것입니다.  

 

<p> HTML <a href="url주소"> LINK </a> TEST </p> 

링크가 연결되었습니다.

 

위에 예시에서는 LINK 부분에 링크가 연결되어 하이퍼링크가 만들어졌습니다. 링크를 마우스로 클릭하면 지정한 URL 페이지로 이동하게 됩니다. 만약 클릭 시 새 탭이 열리게 하고 싶다면 속성을 하나 더 추가해주어야 합니다.  target 속성은 링크를 클릭할 때 창을 어떻게 열어야 할지 결정하는 속성입니다.

 

traget="_self" 보고 있는 페이지에서 링크로 이동합니다. 굳이 속성을 작성하지 않아도 기본값으로 적용됩니다.

target="_blank" 문서를 새창에서 열게 합니다.

target="_top" 가장 상위 창에서 열게 합니다.

 

<p> HTML <a href="url주소" target="_blank="> LINK </a> TEST </p> 

 

앵커 태그 <a> 코드에 title 속성을 추가하여 링크로 연결하는 페이지의 제목을 나타낼 수 있습니다.

 

링크를 클릭하여 이동하기 전에, 링크에 커서를 가까이 가져갔을 때, 이동하는 페이지의 제목을 확인할 수 있게 하려면 다음 속성을 <a> 태그에 추가합니다. title 속성입니다.

 

<p> HTML <a href="url주소" target="_blank=" title="HTML LINK TITLE"> LINK </a> TEST </p>