WORKS/Html CSS
[HTML] 이미지 하이퍼링크 / a 태그
Jelly 젤리
2022. 2. 24. 01:00
글씨에 하이퍼링크
a 태그
<html>
<head>
<title> 태그 마스터하기 </title>
</head>
<body link="blue" vlink="red" alink="darkgreen">
<a href="http://www.netmarble.net"> 넷마블에서 게임을 즐깁니다!</a>
</body>
</html>클릭해보실 수 있습니다 ->
이미지에 하이퍼링크
img 태그를 a 태그로 감싸줍니다.
작업 폴더 하위에
home.html
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 aligh="center">이미지에 하이퍼링크 걸기</h2>
<p align="center">
<a href="https://namu.wiki/w/%EA%B3%A0%EC%96%91%EC%9D%B4"
<img src="https://www.shutterstock.com/ko/image-photo/funny-british-shorthair-cat-portrait-looking-2097266809">
</a>
</p>
</body>
</html>
고양이 이미지를 클릭하면 고양이의 나무위키 페이지가 뜨는 태그를 만들어보았습니다.
이런 식으로 웹 존재하는 사진 링크를 걸어주어도 되지만,
본인이 이미 가지고있는 이미지를 걸어주고 싶다면
home.html과 같은 폴더 안에 이미지 파일을 넣어주고 파일명.확장자 를 img의 src 속성에 넣어주면 됩니다.
아래 이미지를 클릭해보세요!
728x90