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>
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제 (1) | 2019.08.14 |
|---|---|
| [HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset (4) | 2019.08.12 |
| [HTML, CSS] div 요소를 동그랗게 만드는 방법 - border radius (0) | 2019.08.10 |
| [HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover (11) | 2019.08.10 |
| [HTML, CSS] div 태그에 배경화면 지정하는 방법 (0) | 2019.08.09 |
