웹 페이지에서 이미지를 클릭하면 특정 사이트로 이동하는 기능을 본 적이 있을 것입니다. HTML에서 이미지를 링크로 사용하려면 <img> 태그와 href 속성을 가진 <a> 태그를 함께 사용하면 됩니다.
각 태그의 역할은 다음과 같습니다.
- <a> 태그: 하이퍼링크를 생성하며,
href속성에 이동할 URL을 지정합니다. - <img> 태그: 웹 페이지에 이미지를 표시하며,
src속성에 이미지의 URL을 입력합니다.
즉, <a> 태그 안에 <img> 태그를 중첩시키면 이미지 전체가 하나의 링크로 동작하게 됩니다. 이때 <img> 태그에는 이미지 경로뿐만 아니라 width(너비)와 height(높이) 속성을 함께 지정하여 원하는 크기로 조절할 수 있습니다.
기본 문법
<a href="이동할-URL"> <img src="이미지-URL" alt="대체 텍스트" width="너비" height="높이"> </a>
예제 코드
아래 코드를 실행하면 이미지가 링크로 작동하는 것을 직접 확인할 수 있습니다. 이미지를 클릭하면 해당 웹사이트로 이동합니다.
<!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head> <body> 다음 이미지는 링크로 작동합니다:<br> <a href="https://www.qries.com/"> <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width="150" height="70"> </a> </body> </html>
활용 팁
alt 속성에 대체 텍스트를 반드시 추가하세요. 이미지가 로딩되지 않거나 시각 장애인용 스크린 리더를 사용할 때 유용하며, 검색 엔진 최적화(SEO)에도 도움이 됩니다. 또한 새 탭에서 링크를 열고 싶다면 <a> 태그에 target="_blank" 속성을 추가하면 됩니다.