<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hyperlink.html</title>
</head>
<body>
<h1 id="hyperlink">하이퍼 링크</h1>
<!-- 1. 텍스트 링크 -->
<!-- 새로고침 기능 -->
<a href="#">텍스트 링크</a>
<a href="https://www.google.com">구글 바로가기</a>
<!-- 2. 이미지 링크 -->
<a href="https://www.naver.com">
<img src="https://cdn.pixabay.com/photo/2023/09/19/12/34/dog-8262506_640.jpg" alt="강아지 이미지" />
</a>
<!-- a태그 target 속성 -->
<hr />
<a href="https://www.naver.com" target="_self">
_self 속성값 사용
</a>
<br />
<a href="https://www.naver.com" target="_blank">
_blank 속성값 사용
</a>
<!-- 절대 경로 & 상대 경로 -->
<!-- 1. 절대 경로 -->
<h2 id="absolute">절대 경로</h2>
<p>
<a href="https://www.w3.org">W3C</a>
<a href="https://www.google.org">google</a>
</p>
<img src="현재.jpg" alt="현재 디렉토리 강아지" />
<!--
2. 상대경로
디렉토리(폴더)
- 같은 디렉토리 내에 있는 경우
./파일명
- 상위 디렉토리에 있는 경우
../파일명
- 하위 디렉토리에 있는 경우
./하위디렉토리명/파일명
-->
<h2 id="relative">상대 경로</h2>
<p>
<a href="./현재.jpg">현재 폴더 이미지</a>
</p>
<p>
<a href="./inner/하위.jpg">하위 폴더 이미지</a>
</p>
<p>
<a href="../상위.jpg">상위 폴더 이미지</a>
</p>
<img src="./현재.jpg" alt="현재 폴더의 이미지">
<hr />
<!-- 현재 문서 내에서의 위치 이동 링크 -->
<a href="#hyperlink">h1 태그로 이동(문서의 맨 위)</a>
<span> | </span>
<a href="#absolute">절대 경로로 이동</a>
<span> | </span>
<a href="#relative">상대 경로로 이동</a>
</body>
</html>