프론트엔드 HTML CSS JAVASCRIPT
[HTML] 이미지에 링크거는 방법 - <a>, href, <img>
jaewooojung
2019. 8. 10. 14:02
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)로 이동합니다.
a태그의 target 프로퍼티를 '_blank'로 설정하면 웹페이지가 새 창에서 뜹니다.
<body>
<a href="https://google.com" target="_blank">
<img class="img-concert" src="images/concert.jpg"/>
</a>
</body>