본문 바로가기
프론트엔드 HTML CSS JAVASCRIPT

[HTML] 이미지에 링크거는 방법 - <a>, href, <img>

by jaewooojung 2019. 8. 10.

HTML


HTML 이미지에 링크

 

HTML에서 img태그에 링크를 다는 방법입니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <style>
      .img-concert {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <img class="img-concert" src="images/concert.jpg" />
  </body>
</html>

이미지

 

<a> 태그로 <img> 태그를 감싸주면 됩니다. href 속성에는 이동할 주소를 적습니다.

<body>
  <a href="https://google.com">
      <img class="img-concert" src="images/concert.jpg"/>
  </a>
</body>

 

이미지를 클릭하면 해당 주소(https://google.com)로 이동합니다.

google.com으로 이동

 

a태그의 target 프로퍼티를 '_blank'로 설정하면 웹페이지가 새 창에서 뜹니다.

<body>
  <a href="https://google.com" target="_blank">
    <img class="img-concert" src="images/concert.jpg"/>
  </a>
</body>

target _blank로 새창에서 열기

 



        
답변을 생성하고 있어요.