Web Basic/HTML
<map>태그와 <area>태그
Hoplin
2019. 2. 17. 19:36
반응형
<a>태그를 통한 이미지 링크를 만들때는 하나의 링크만 이미지에 걸수있는게 아닌 여러개의 링크를 이미지에 걸 수 있다. 이말은 즉 사진에서 위치에 따라 서로 다른 링크가 열리게 한다는 것을 의미한다. 이러한 것을 이미지 맵이라고 하는데 주로 이메일에서 많이 쓰인다. 이미지 맵 생성을 위해서는 <map>태그와 <area>태그가 사용되는데, <map>태그는 '이미지 맵'을 만드는 역할을하고 <area>태그는 이미지 맵으로 사용할 이미지에 링크영역을 정해주기 위해 사용된다.<map>태그 안에는 이미지 맵의 이름을 설정해 주기 위한 속성인 name을 작성해 준다. name 속성은 일반적인 태그에서 id속성과 비슷한 역할을 한다.
<area>태그에는 다음과 같은 속성들이 존재한다.
alt : 대체 텍스트를 지정한다. <a>태그의 alt와 동일한 기능.
coords : 링크로 사용할 영역을 시작좌표와 끝좌표를 이용해 지정한다.
download : 링크를 클릭할때 링크 문서를 다운로드 한다.
href : 링크 문서 경로를 지정한다.
shape : 링크로 사용할 영역의 모양을 지정한다.
target : 링크를 표시할 대상을 지정한다. <a>태그의 target과 동일한 기능을 가진다.
type : 링크 문서의 미디어 유형을 지정한다.
이 속성들중 coords라는 속성을 한번 살펴보자. 시작 좌표와 끝좌표를 이용한다고 되어 있는데 이를 활용하는것을 보면 다음과 같다.
1 | <area shape="rect" coords="260,60,1000,1000",href= "https://github.com/" alt="github", target="_blank"> | cs |
해당 예제를 해석해 보면 다음과같다. (coords)(260,60)에서 (1000,1000)위치까지의 (shape)사각형태의 영역을 클릭했을때 (href) www.github.com이라는 링크로 (target)새로운 탭에서 열겠다 라고 해석할 수 있다. 그 다음 이미지와 이미지 맵을 연결하는 방식은 <img>태그에서 usemap이라는 속성을 작성해준 다음 속성값을 <map>태그 안에 작성한 name값 앞에 '#'기호를 붙여서 넣어준다. 필자가 작성한 코드는 다음과 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" name="Map & Area"> <title>Map & Area</title> </head> <body> <map name = "test"> <area shape="rect" coords="260,60,1000,1000",href= "https://github.com/" alt="github", target="_blank"> <area shape="rect" coords="10,10,50,50", href="https://www.youtube.com/" alt="youtube" target="_blank"> </map> <img src="1.jpg" alt="" usemap="#test"> </body> </html> | cs |
반응형