HTML tag <a>

 

 

 

href

<a> 태그는 블로그를 운영하시는 분이시라면, 아주 익숙한 태그입니다. 특정 페이지에서 다른 페이지로의 또는 같은 페이지내에서의 하이퍼링크를 정의합니다. href 요소를 통해서 연결되는 페이지의 주소를 지정합니다.

 

<a href=" "> 텍스트 </a>

텍스트에 특정 페이지에서 다른 페이지로의 하이퍼링크를 만들때 사용합니다. href의 "" 안의 주소가 목적지가 되는 것이지요.

ex) <a href="http://www.~~~.com"> ~~~ 홈페이지로 이동 </a> 

 

<a href=" "> <img src=""> </a>

서핑을 하다보면 특정 이미지를 클릭했을때, 화면이 이동하는 것을 많이 보셨을텐데요. 이때는 <a> 태그 사이에 <img src=""> 를 삽입합니다. ""안에는 당연히 이미지의 주소가 들어가야 겠지요. 이미지링크는 주소 이미지 호스팅 혹은 ftp를 사용합니다. 블로그를 꾸미기 위한 용도에는 비공개 포스팅에 이미지를 업로드해놓고 링크를 걸어 사용하기도 합니다.

ex) <a href="http://www.~~~.com"> <img src="www.~~~.com/logo.jpg" alt=" "> </a> 

 

 

target

하이퍼링크를 클릭하면, 새로운 웹페이지에서 열리는 경우도 있고 때로는 현재 보고있는 창에서 바로 화면전환이 생기기도 합니다. 이는 하이퍼링크에 target 속성때문인데요. blank, self, parent, top 등이 있으며, 기본 설정은 self 입니다. 자주 사용하는 blank와 self 에 대해 설명드립니다.

 

blank

하이퍼링크를 클릭했을때, 새로운 창에서 열리게 할때 사용합니다. 네이버블로그의 경우 사이드바에 사용자가 직접 배너를 만들수가 있는데요. 여기서는 하이퍼링크를 설정해도 target="_blank" 속성이 작동하질 않더군요. 설치형 블로그가 아닌건 알고 있지만, 몇가지 않되는 사용자 기능임에도 불구하고 정상적으로 작동하질 않아서요.

ex) <a href="http://www.~~~.com" target="_blank"> ~~~ 홈페이지로 이동 </a> 

ex) <a href="http://www.~~~.com" target="_blank"> <img src="www.~~~.com/logo.jpg" alt=" "> </a> 

 

self

하이퍼링크를 클릭했을때, 현재창에서 바로 타겟사이트로 전환되게 할때 사용합니다. 블로그 혹은 개인홈페이지의 경우 방문자가 조금이라도 머물길 원하는게 인지상정인데, 현재창에서 전환이 되버리면 방문자가 돌아오지 않을 확률이 높겠지요??ㅎ

그래서 전 잘 사용하질 않습니다.

ex) <a href="http://www.~~~.com" target="_self"> ~~~ 홈페이지로 이동 </a> 

ex) <a href="http://www.~~~.com" target="_self"> <img src="www.~~~.com/logo.jpg" alt=" "> </a> 

  

 

name

동일한 페이지 내에서의 하이퍼링크를 만들때 사용하는데, html5에서는 지원을 하지 않습니다.

 

단, id 속성을 이용하면 동일한 페이지 내에서의 하이퍼링크를 사용가능합니다.

 

 * 참고할만한 사이트

 

이상입니다.