<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_하이퍼링크 관련 태그</title>
</head>
<body>
<h1>하이퍼링크 관련 태그 : a(anchor)</h1>
<pre>
a태그는 현재 HTML문서와 다른 HTML 문서를 연결해서
페이지 이동을 할 수 있게 하는 기능을 제공.
-> 이 때, a태그로 감싸진 문자열 == 하이퍼링크 역할
* 하이퍼링크는 웹(HTML) 문서가 다른 문서와 구분될 수 있는
핵심적인 기능
텍스트 or 이미지를 클릭해서 페이지 이동
* 페이지 내에서 이동 가능
</pre>
<hr>
<h2>a태그를 이용한 하이퍼링크 구현</h2>
<ul>
<li>
<a href="01_글자관련태그.html">01_글자 관련 태그</a>
</li>
<!-- target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
기본값 : 같은 탭
blank : 새 탭 == 비어있는 탭
-->
<li>
<a href = "02_목록관련태그.html" target="_blank">02_목록 관련 태그</a>
</li>
<li>
<a href = "https://www.naver.com" target="_blank">네이버 연결</a>
</li>
<hr>
<h2>이미지 클릭시 페이지 이동</h2>
<a href = "https://www.naver.com" target="_blank">
<img src = "이미지2/sample1.jpg"
</a>
</ul>
<hr>
<h2>한 페이지 내에서 이동하기(점프)</h2>
<ul id = "list">
<li><a href = "#ggul1">껄무새1</a></li>
<li><a href = "#ggul2">껄무새2</a></li>
<li><a href = "#ggul3">껄무새3</a></li>
</ul>
<h3 id="ggul1">껄무새1</h3>
<img src = "이미지2/sample1.jpg" width = "15%"><br>
<a href = "#list">목록으로 이동</a>
<h3 id="ggul2">껄무새2</h3>
<img src = "이미지2/sample1.jpg" width = "25%"><br>
<a href = "#list">목록으로 이동</a>
<h3 id="ggul3">껄무새3</h3>
<img src = "이미지2/sample1.jpg" width = "35%"><br>
<a href = "#list">목록으로 이동</a>
</body>
</html>
ha lee :)
0개의 댓글
