728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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)문서가 다른 문서와 구분될 수 있는 핵심적인 기능
텍스트 또는 이미지를 클릭해서 페이지 이동
+ 페이지 내에서 이동도 가능
</pre>
<hr>
<h2>a태그를 이용한 하이퍼링크 구현하기</h2>
<ul>
<li>
<a href="01_글자관련태그.html">01_글자관련태그</a>
</li>
<!-- target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
기본값 : 같은 탭
_black : 새 탭 == 비어있는 탭
-->
<li>
<a href="05_표 연습문제.html" target="_blank">05_표 연습문제 </a>
</li>
<li>
</li>
</ul>
<hr>
<h2>이미지 클릭 시 페이지 이동</h2>
</a>
<h2>한 페이지 내에서 점프하기</h2>
<ul id="list">
<li><a href="#cat1">고양이1</a></li>
<li><a href="#cat2">고양이2</a></li>
<li><a href="#cat3">고양이3</a></li>
</ul>
<h3 id="cat1">고양이 1</h3>
<img src="../images/cats/cat1.jpg"><br>
<a href ="#list">목록으로 이동</a>
<h3 id="cat2">고양이 2</h3>
<img src="../images/cats/cat2.jpg"><br>
<a href ="#list">목록으로 이동</a>
<h3 id="cat3">고양이 3</h3>
<img src="../images/cats/cat3.jpg"><br>
<a href ="#list">목록으로 이동</a>
</body>
</html>
728x90
반응형
'괴발개발 > web' 카테고리의 다른 글
| CSS 개요, 선택자 (0) | 2024.06.12 |
|---|---|
| 입력 관련 태그 (0) | 2024.05.31 |
| CSS 개요, 선택자 (0) | 2024.05.30 |
| 이미지 관련 태그 (0) | 2024.05.30 |
| 영역 관련 태그 (0) | 2024.05.30 |