요약(Summary)
문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.
문법(Syntax)
<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
- href : 링크이름과 연결되어 있는 리소스(resource)의 주소
- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.
- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.
- _self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐
- _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
- _parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드
- 프래임의 이름
설명(Description)
하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.
- 문서에서 문서로 이동하는 수단
- 태그명 a(anchor)을 사용함
- href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능
- target을 지정해서 문서가 로드될 위치를 지정할 수 있다.
예제(Example)
example1. 아래 예제는 여러가지 형태의 링크를 보여준다. (fiddle, github, ?)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <p> <a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다. </p> <p> <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다. </p> <p> <a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다. </p> <p> <a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다. </p> <p> <a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다 </p> </body> </html>
example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다. (jsfiddle, github ,?)
<!DOCTYPE html>
<html>
<body>
<iframe name="sample" src="http://w3c.org/" width="100%" height="300"></iframe>
<a href="http://opentutorials.org/" target="sample">아이프래임</a>
</body>
</html>
참고
