HTML에서 이미지에 대한 링크를 추가하는 방법

이미 링크를 추가하는 방법이 궁금하신가요?
HTML 이미지 태그 ??

굉장합니다 🔥

다음 예는 <img> 태그에 이미지를 표시하기 위해 수행하는 일반적인 작업입니다.

<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" 
     alt="cannot sleep">

위의 이미지를 클릭하면 이미지 링크가 열리지 않고 확대됩니다. 예상한 결과입니다 😂 .

하지만 이미지에 링크를 추가하는 방법 ??

이지 피쉬 😉

이 예제는 이전 예제를 기반으로 하여 이미지를 링크로 변환하는 방법을 보여줍니다. 이렇게 하려면 <img> 내부에 <a> 태그를 중첩합니다.
대신 텍스트 링크를 사용하는 것처럼 대체 텍스트가 링크가 가리키는 리소스를 설명하도록 해야 합니다.

<a href="https://www.thecoderpedia.com/blog/programming-memes/">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
       alt="Visit Meme site">
</a>

위 이미지를 클릭하시면 원본링크로 이동합니다.

끝 ;p


자원;
MDN