06. 하이퍼링크 관련 태그
1) target 속성
1
2
3
✔ 연결된 문서를 어디에서 열 것인지 지정하는 속성
✔ 기본값 : 같은 탭
✔ _black : 새 탭 == 비어있는 탭
2) a 태그를 이용한 하이퍼링크 구현
1
2
3
4
5
6
7
✔ a 태그는 현재 HTML문서와 다른 HTML문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공
→ 이 때, a태그로 감싸진 문자열 == 하이퍼링크
✔ 하이퍼링크는 웹(HTML) 문서가 다른 문서와 구분될 수 있는 핵심적인 기능이다.
텍스트 또는 이미지를 클릭해서 페이지 이동 또는 페이지 내에서 이동도 가능
✔ inline 형식
1
2
3
<a href="01_글자관련태그.html">01_글자 관련 태그</a> <br>
<a href="02_목록관련태그.html" target="_blank">02_목록관련태그</a> <br>
<a href="https://www.naver.com" target="_blank">네이버로 이동</a> <br>
3) 이미지 클릭 시 페이지 이동
1
2
3
<a href="https://www.naver.com">
<img src="./image/sample.jpg" width = "10%">
</a>
4) 한 페이지 내에서 이동하기(점프)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
✔ 단어 또는 이미지 클릭시 같은 페이지에 지정된 위치로 이동
<ul id="list">
<li>
<a href="#post1">포스터1</a>
</li>
<li>
<a href="#post2">포스터2</a>
</li>
<li>
<a href="#post3">포스터3</a>
</li>
</ul>
<h3 id="post1">포스터1</h3>
<img src="./image/s1.jpg" width = "30%"> <br>
<a href="#list">목록으로 이동</a>
<h3 id="post2">포스터2</h3>
<img src="./image/s2.jpg" width = "30%"> <br>
<a href="#list">목록으로 이동</a>
<h3 id="post3">포스터3</h3>
<img src="./image/s3.jpg" width = "30%"> <br>
<a href="#list">목록으로 이동</a>
