[HTML5] <a> 태그
<a> 태그
1. 요약(Summary)
문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.
2. 문법(Syntax)
<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
- href : 링크이름과 연결되어 있는 리소스(resource)의 주소
- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.
- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.
_self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐
_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드
프래임의 이름
3. 설명(Description)
하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.
- 문서에서 문서로 이동하는 수단
- 태그명 a(anchor)을 사용함
- href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능
- target을 지정해서 문서가 로드될 위치를 지정할 수 있다.
4. 예제(Example)
example1. 아래 예제는 여러가지 형태의 링크를 보여준다.
<!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>
해당 문서 안의 a 태그중 name의 속성 값에 reference가 있는 지점으로 스크롤을 자동으로 이동시켜준다.--> 북마크 기능
example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다.--> 하나의 문서안에 다른 문서를 로드할 수 있는 기법을 프래임이라고 한다.
<!DOCTYPE html>
<html>
<body>
<iframe id="sample" src="http://w3c.org/" width="100%" height="300"></iframe>
<a href="http://opentutorials.org/" target="sample">아이프래임</a>
</body>
</html>
--> target의 대상을 <iframe>의 id 속성이다.
5. 빈 링크
a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 하이퍼링크 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야 한다.
따라서 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.
그리고 이를 빈 링크라고 부른다.
6. 페이지 내부 이동
a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이때는 원하는 장소에 id 속성을 부여해야 한다.
이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 # 아이디 형태의 문자열을 입력한다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<a href="#alpha">Move to Alpha</a>
<a href="#beta">Move to Beta</a>
<a href="#gamma">Move to Gamma</a>
<hr />
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="beta">Beta</h1>
<p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>
<h1 id="gamma">Gamma</h1>
<p>Nullam porta, felis sit amet porttitor vestibulum.</p>
</body>
</html>
a 태그를 클릭하면 지정한 id 속성이 있는 위치로 스크롤바가 자동으로 이동한다.
cf.) id 속성이 중복될 경우 먼저 나오는 태그로 이동한다.
출처: https://devbox.tistory.com/entry/ㄴㅇ?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Web Programing > HTML5' 카테고리의 다른 글
| [HTML5[ <table> 태그 (0) | 2020.07.06 |
|---|---|
| [HTML5] <input> 태그 (0) | 2020.07.06 |
| [HTML5] <form> 태그_GET과 POST (0) | 2020.07.06 |
| [HTML5] <form> 태그 2 (0) | 2020.07.06 |
| [HTML5] <form> 태그 1 (0) | 2020.07.06 |
| [HTML5] 아이프레임과 프레임 (0) | 2020.07.06 |
| [HTML5] <meta> 태그 (0) | 2020.07.06 |
| [HTML5] 이스케이핑 (0) | 2020.07.06 |