HTML <area> 태그의 href 속성이란?
<area> 요소의 href 속성은 이미지 맵(image map) 내에서 클릭 가능한 영역의 하이퍼링크 대상을 지정하는 속성입니다. 사용자가 해당 영역을 클릭하면 href에 설정된 URL로 페이지가 이동합니다.
기본 구문
<area href="URL">
위 구문에서 URL은 해당 영역에 연결할 하이퍼링크 주소를 의미합니다. 상대 링크, 절대 링크, 스크립트, 프로토콜 등 다양한 형식으로 지정할 수 있습니다.
예제: 이미지 맵에 href 속성 적용하기
다음은 <area> 요소의 href 속성을 실제로 구현한 예제입니다. 하나의 이미지 위에 여러 개의 클릭 영역(다각형, 사각형, 원)을 만들고, 각 영역을 서로 다른 튜토리얼 페이지에 연결합니다.
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
실행 결과
코드 분석
위 예제에서는 먼저 다음과 같이 이미지에 usemap 속성을 사용하여 맵을 연결했습니다.
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
그다음 <map> 요소 안에서 각 모양(shape)별로 클릭 영역을 정의했습니다.
<map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map>
각 영역의 하이퍼링크는 href 속성을 통해 설정됩니다. 예를 들어 PHP 튜토리얼 영역의 링크는 다음과 같습니다.
href = "/php/index.htm"
정리
<area> 태그의 href 속성은 이미지 맵의 각 영역을 클릭했을 때 이동할 대상 URL을 지정하는 핵심 속성입니다. shape와 coords 속성으로 영역의 형태와 좌표를 정의하고, href로 연결할 링크를 지정하면 하나의 이미지 안에서도 여러 개의 링크를 손쉽게 제공할 수 있습니다.