HTML 이미지에 링크 걸기: 초보자를 위한 쉬운 방법

HTML 이미지에 링크 걸기: 초보자를 위한 쉬운 방법

 

웹 페이지에 이미지를 삽입하는 것은 기본적인 작업이지만, 이미지에 링크를 걸어 사용자를 다른 페이지로 이동하도록 하는 것은 한 단계 더 나아가는 중요한 기능입니다. 이 글에서는 HTML 이미지에 링크를 걸 수 있는 두 가지 쉬운 방법을 소개합니다.

목차

1. 기본적인 방법: <a> 태그 사용
2. 이미지 영역별 링크: map 태그 사용
3. 마무리

1. 기본적인 방법: <a> 태그 사용

가장 간단한 방법은 이미지 자체를 하이퍼링크로 만들기 위해 <a> 태그를 사용하는 것입니다.

<a href="[링크 주소]">
  <img src="[이미지 파일 경로]" alt="[이미지 대체 텍스트]">
</a>

위 코드에서 [링크 주소]는 사용자가 클릭했을 때 이동할 페이지의 URL 주소를, [이미지 파일 경로]는 삽입할 이미지 파일의 위치를, [이미지 대체 텍스트]는 이미지가 로딩되지 않을 경우 표시될 대체 텍스트를 의미합니다.

예를 들어, "고양이.jpg"라는 이미지 파일을 가지고 있고, 사용자가 클릭하면 "https://www.naver.com/"로 이동하도록 하려면 다음과 같이 코드를 작성합니다.

<a href="https://www.naver.com/">
  <img src="고양이.jpg" alt="고양이 이미지">
</a>

이렇게 작성하면 사용자가 이미지를 클릭하면 마치 텍스트 링크를 클릭했을 때처럼 "https://www.naver.com/" 페이지로 이동하게 됩니다.

2. 이미지 영역별 링크: map 태그 사용

한 가지 이미지에 여러 개의 링크를 걸거나, 이미지의 특정 영역만 클릭할 때 링크가 작동하도록 하고 싶은 경우 map 태그와 area 태그를 사용할 수 있습니다.

먼저, 이미지에 usemap 속성을 추가하여 이미지 맵을 연결하고, map 태그에 name 속성으로 이미지 맵의 이름을 지정합니다.

<img src="[이미지 파일 경로]" alt="[이미지 대체 텍스트]" usemap="#[이미지 맵 이름]">

<map name="[이미지 맵 이름]">
  ...
</map>

다음으로, area 태그를 사용하여 이미지 맵에서 링크할 영역을 정의합니다. area 태그에는 shape, coords, href 등의 속성을 지정해야 합니다.

• shape: 링크할 영역의 모양을 정의합니다. rect, circle, poly 등 다양한 값을 사용할 수 있습니다.
• coords: 링크할 영역의 좌표를 정의합니다. 모양에 따라 좌표 값의 형식이 다릅니다.
• href: 사용자가 클릭했을 때 이동할 페이지의 URL 주소를 지정합니다.

예를 들어, 위에서 사용한 "고양이.jpg" 이미지에 다음과 같은 이미지 맵을 만들고 싶다고 가정해 봅시다. 이미지의 왼쪽 영역을 클릭하면 "https://www.google.com/", 오른쪽 영역을 클릭하면 "https://www.youtube.com/"로 이동하도록 합니다.

<img src="고양이.jpg" alt="고양이 이미지" usemap="#고양이_맵">

<map name="고양이_맵">
  <area shape="rect" coords="0,0,100,50" href="https://www.google.com/">
  <area shape="rect" coords="100,0,200,50" href="https://www.youtube.com/">
</map>

이렇게 작성하면 사용자가 이미지의 왼쪽 영역을 클릭하면 "https://www.google.com/", 오른쪽 영역을 클릭하면 "https://www.youtube.com/" 페이지로 이동하게 됩니다.

3. 마무리

HTML 이미지에 링크를 걸는 것은 웹 페이지를 더욱 풍부하고 유용하게 만드는 좋은 방법입니다. 위에서 소개한 두 가지 방법을 활용하여 상황에 맞는 방식으로

 

더 자세한 내용은 아래를 참고하세요.

 

더 자세한 자료 보기