★하이퍼링크 태그
<a>태그 - 원하는 문서나 사이트로 연결하기
- 기본형 : <a href="경로">...</a>
└ 텍스트링크 : <a href="경로"><p>...</p></a>
└ 이미지링크 : <a href="경로"><img src="경로"></a>
- 새 창(탭)에서 열기 : <a href="경로" target="_blank">...</a>
- 맨 위로 올라가기 : <a href="#top">...</a>
- 앵커 : 한 페이지 안에서 이동하게 하는 기능
└ <a name="앵커이름">...</a>
:
<a href="#앵커이름">...</a>
※실습하기※
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li><a name="a"><img src="puppy.jpg"></a></li> <!--앵커 설정-->
<li><a name="b"><img src="cat.jpg"></a></li>
<li><a name="c"><img src="rabbit.jpg"></a></li>
</ul>
<a href="http://www.facebook.com" target="_blank"><img src="fb.png"></a>
<a href="http://www.naver.com" target="_blank"><p>네이버</p></a>
<a href="#a"><p>강아지</p></a>
<a href="#b"><p>고양이</p></a>
<a href="#c"><p>토끼</p></a>
<a href="#top"><p>up</p></a>
</body>
</html>
▲결과
'Programming > HTML5' 카테고리의 다른 글
| [8장]HTML5 태그(5) - 멀티미디어 태그 (0) | 2015.03.20 |
|---|---|
| [7장]HTML5 태그(4) - 멀티미디어 태그 (0) | 2015.01.28 |
| [5장]File Zilla 사용법 (0) | 2015.01.24 |
| [4장]HTML5 태그(2) (0) | 2015.01.24 |
| [3장]HTML5 구조와 태그(1) (2) | 2015.01.21 |