Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 이미지 링크 만드는 방법: 앵커 태그와 img 태그 완벽 가이드

이미지는 웹 페이지에서 가장 흔하게 사용되는 요소 중 하나입니다. 동시에 다른 페이지로 연결되는 링크를 만드는 훌륭한 수단이기도 합니다. 앵커 태그(<a>)의 href 속성과 이미지 태그(<img>)를 조합하면, 클릭 한 번으로 두 페이지 사이를 연결해 주는 이미지 링크를 쉽게 만들 수 있습니다.

이미지 링크 만드는 4단계

  1. <div> 요소 생성하기: 먼저 <div> 요소를 만듭니다. 이 div는 이미지 요소와 앵커 태그, 그리고 링크를 설명하는 기타 요소들을 담는 컨테이너 역할을 합니다.
  2. 앵커 태그(<a>) 작성하기: 다음으로 <a> 태그를 생성합니다. <a> 태그는 하이퍼텍스트 참조(href) 속성을 통해 링크가 이동할 대상을 지정합니다. href 속성에 원하는 사이트 주소나 파일 경로를 설정하세요.
  3. <a> 태그 안에 <img> 태그 넣기: 여는 <a> 태그와 닫는 </a> 태그 사이에 <img> 태그를 작성합니다. 이미지 태그는 스스로 닫히는(self-closing) 태그라는 점을 기억하세요. src 속성을 추가해 링크에 사용할 이미지의 URL 또는 파일 경로를 지정하고, 스크린 리더 사용자와 검색 엔진을 위해 alt 속성으로 대체 텍스트도 함께 넣어주는 것이 좋습니다.
  4. 설명 텍스트 추가하기: 이미지가 클릭 가능한 링크임을 사용자에게 알려주는 설명을 작성합니다. <caption>, <div>, <h2>, <p> 등 어떤 요소든 자유롭게 활용할 수 있습니다.

동작하는 예제 코드

아래 코드 편집기에서 실제로 동작하는 샘플을 확인할 수 있습니다. 코드를 직접 수정해 보면서 다양하게 실험해 보세요!

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Link</title>
   <style>
       div {
           width: 500px;
           display: flex;
           flex-flow: column wrap;
       }
       img {
           width: 100%;
       }
       caption {
           width: 100%;
           height: 50px;
       }
   </style>
</head>
<body>
   <div>
       <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer">
           <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2100&amp;q=80" alt="Golden Gate Bridge">
       </a>
       <caption>
           샌프란시스코 스카이라인의 상징, 골든게이트 브리지가 황혼녘 하늘 아래 빛나고 있습니다. 이미지를 클릭하면 골든게이트 브리지에 대한 더 많은 정보를 볼 수 있습니다.
       </caption>
   </div>
</body>
</html>

마무리 팁: 링크 범위는 어디까지?

링크가 결국 캡션(설명 텍스트)을 가리키고 있으니, <a> 태그를 캡션 부분에만 감싸고 싶은 유혹이 들 수 있습니다. 하지만 사용자들은 일반적으로 그림을 클릭하면 새 탭에서 링크 대상 페이지가 열릴 것이라고 기대합니다. 예제 코드의 target="_blank" 구문이 바로 새 탭에서 열리도록 하는 역할을 합니다.

따라서 <a> 태그는 이미지 전체를 감싸도록 유지하고, 텍스트는 이미지를 설명하는 용도로 따로 두거나, 텍스트와 <img> 모두를 하나의 <a> 태그로 감싸는 방식을 권장합니다. 두 가지 방법 모두 유효한 선택이며, 어떤 방식을 택하든 사용자 경험을 해치지 않습니다.