웹페이지를 만들다 보면 텍스트뿐만 아니라 이미지 자체를 클릭해서 이동하도록 만드는 경우가 많습니다.
예를 들어 배너를 클릭하면 이벤트 페이지로 이동하거나, 상품 이미지를 클릭하면 상세 페이지로 이동하는 기능이 대표적인 예입니다.
이러한 기능을 구현하는 방법이 바로 이미지 링크입니다.
HTML에서는 a 태그와 img 태그를 함께 사용하여 쉽게 만들 수 있습니다.
이번 글에서는 HTML에서 이미지 링크 만드는 방법, 기본 구조, 그리고 실무에서 자주 사용하는 팁까지 자세히 정리해보겠습니다.
이미지 링크란 무엇인가?
이미지 링크는 말 그대로 이미지를 클릭했을 때 특정 페이지나 URL로 이동하는 기능입니다.
일반적인 텍스트 링크와 동일하지만, 텍스트 대신 이미지를 사용한다는 점이 차이입니다.
이미지 링크 기본 구조
이미지 링크는 다음과 같이 a 태그 안에 img 태그를 넣는 구조로 작성합니다.
<a href="https://example.com">
<img src="image.jpg" alt="이미지 설명">
</a>
이 구조에서 핵심은 다음과 같습니다.
- a 태그 : 이동할 링크 지정
- img 태그 : 표시할 이미지
이렇게 작성하면 이미지를 클릭했을 때 해당 URL로 이동합니다.
이미지 클릭 시 새 탭으로 열기
이미지 링크를 클릭했을 때 새 탭에서 열리도록 설정할 수도 있습니다.
<a href="https://example.com" target="_blank">
<img src="image.jpg" alt="이미지">
</a>
보안을 위해 다음과 같이 rel 속성을 함께 사용하는 것이 좋습니다.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
<img src="image.jpg" alt="이미지">
</a>
이미지 크기와 스타일 적용하기
이미지 링크에도 CSS를 적용할 수 있습니다.
<a href="#">
<img src="image.jpg" alt="이미지" class="banner">
</a>.banner {
width: 100%;
height: auto;
}
이렇게 하면 반응형 이미지 링크를 만들 수 있습니다.
이미지 링크 사용 시 주의할 점
alt 속성 반드시 작성하기
이미지 링크에서도 alt 속성은 매우 중요합니다.
이미지가 로딩되지 않을 때 대체 텍스트를 제공하며, SEO와 접근성에도 영향을 줍니다.
링크 목적 명확하게 하기
이미지를 클릭했을 때 어디로 이동하는지 사용자가 쉽게 알 수 있어야 합니다.
이미지 용량 최적화
이미지 파일이 크면 페이지 로딩 속도가 느려질 수 있습니다.
최적화된 이미지를 사용하는 것이 좋습니다.
이미지 링크 활용 예시
배너 링크
<a href="/event">
<img src="banner.jpg" alt="이벤트 배너">
</a>
상품 이미지 링크
<a href="/product/1">
<img src="product.jpg" alt="상품 이미지">
</a>
프로필 링크
<a href="/profile">
<img src="profile.jpg" alt="프로필 사진">
</a>
이미지 링크와 SEO의 관계
이미지 링크는 SEO에도 영향을 줄 수 있습니다.
- alt 텍스트 > 검색엔진이 이미지 이해
- 링크 구조 > 페이지 연결 강화
- 사용자 경험 > 체류 시간 증가
특히 alt 속성을 잘 작성하면 이미지 검색에도 도움이 됩니다.
이미지 링크와 접근성
스크린리더 사용자는 이미지를 직접 볼 수 없기 때문에 alt 속성이 중요합니다.
또한 이미지 링크가 단순한 장식이 아니라 기능을 수행하는 경우라면 더욱 명확한 설명이 필요합니다.
마무리
HTML에서 이미지 링크를 만드는 방법은 간단하지만, 웹사이트에서 매우 중요한 기능입니다.
정리하면 다음과 같습니다.
- a 태그 안에 img 태그를 넣으면 이미지 링크가 된다.
- target 속성으로 새 탭 설정 가능
- alt 속성은 반드시 작성해야 한다.
이미지 링크를 적절히 활용하면 사용자 경험과 SEO 모두를 개선할 수 있습니다.
웹페이지를 제작할 때 꼭 활용해보시기 바랍니다.