이미지 태그에 링크 태그를 연결하면 사용자로 하여금 다른 페이지로 유도하는 흥미를 일으킬 수 있다. 이미지 태그에 링크 태그를 감싸주는 것만으로도 이미지에 다른 웹페이지로 이동할 수 있도록 연결할 수 있다. 이미지를 이용하여 웹페이지를 연결하는 것은 텍스트가 차지하는 공간을 줄여주는 효과도 볼 수 있다.
html 이미지에 링크 연결
how to link image to link in html
웹페이지에는 많은 요소가 있고 다른 페이지로 이동할 링크들도 많이 있다.
일반적인 텍스트도 있고, 이미지도 있고, 아이콘으로 연결된 것들도 있다.
텍스트들은 a 링크로 감싸주면 된다. 이미지도 마찬가지로 링크 태그인 a 태그로 감싸주면 된다.
사용법은 같으며 텍스트 대신 img 태그를 이용해 이미지를 지정해 주면 된다.
링크 태그에 대한 내용은 이전 내용을 참고해 본다.
이미지에 링크 연결 하기
이미지에 링크를 연결하는 방법은 텍스트에 링크 태그를 연결하는 방법과 같다.
텍스트 대신 img 태그를 넣어주고 이미지만 지정해 주면 된다.
이미지 태그에 대한 내용은 이전글을 참고해 본다.
아래는 이미지에 링크 태그를 연결하는 방법을 보여준다.
이미지 태그를 링크 태그로 감싸주면 이미지에 링크를 연결할 수 있다.
<a href="연결할 링크 주소" target="_blank">
<img src="이미지 주소" alt="대체 텍스트" />
</a>샘플코드
이미지 태그에 링크를 연결하는 html 예제를 만들어 본다.
이미지에 링크를 연결하는 방법은 img 태그로 이미지를 화면에 표시하도록 한 후 링크 태그인 a 태그로 감싸주면 된다.
코드를 보자.
아래의 코드를 보면 알 수 있겠지만 이미지 태그를 링크 태그로 연결해 주었다.
이미지가 화면에 잘 나오도록 이미지 경로를 정확히 지정해주고 이미지를 클릭했을 때 이동할 웹사이트 URL 만 정확히 지정해 주면 된다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
img {
width:100px;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<a href="https://www.naver.com" target="_blank">
<img src="images/naver.jpg" alt="네이버 바로가기" />
</a>
<a href="https://www.daum.net" target="_blank">
<img src="images/daum.jpg" alt="다음 바로가기" />
</a>
<a href="https://www.google.com" target="_blank">
<img src="images/google.png" alt="구글 바로가기" />
</a>
</div>
</body>
<!-- // -->
</html>
<!-- // -->네이버, 다음, 구글 이미지를 화면에 표시해 주고 각각을 클릭하면 웹사이트로 이동하도록 하였다.
이미지 또한 정확히 나오고 있고 이미지 위에 마우스를 올리면 링크 태그에서 볼 수 있는 손가락 커서가 보이게 된다.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| html 배경 이미지 사용하기 using html background image (0) | 2022.06.07 |
|---|---|
| html 이미지 맵 사용 using html image map (0) | 2022.06.03 |
| html img 태그 이미지 경로 지정 방법 Specifies img src path (0) | 2022.05.30 |
| html 이미지 크기 조절 하기 changing image size in html (0) | 2022.05.27 |
| html img 태그 사용 화면에 이미지 표시 using html image tag (0) | 2022.05.23 |
댓글