01. 하이퍼링크란?
하이퍼텍스트 문서 내에서 페이지 간의 이동을 자유롭게 해주는 링크를 '하이퍼링크(hyperlink)'라고 부릅니다.
여기서 연결할 수 있는 링크는 텍스트 뿐만 아니라 이미지와 같이 각종 멀티미디어 요소도 모두 연결이 가능합니다.
웹 문서 내에서 나타나는 형태는 밑줄이 그어진 형태나 본문 글씨색과는 다른 색으로 표시되며, 마우스 포인터를 가져다 댈 경우 포인터의 모양이 바뀌게 됩니다.
일반적으로 브라우저에서 방문하지 않은 링크는 파란색, 방문한 링크는 자주색, 활성된 링크는 빨간색 으로 나타납니다.
(활성화된 링크란 마우스로 누르고 있는 상태를 뜻합니다.)
02. 하이퍼링크를 정의할 수 있는 <a>태그
속성
속성 |
값 |
설명 |
HTML5 지원 |
||
download |
filename | 링크 클릭 시 파일이 다운로드 되도록 지정 |
href |
URL |
링크가 연결될 페이지의 URL 지정 |
hreflang |
language_code |
링크된 문서의 언어 지정 |
media |
media_query |
링크된 문서가 최적화된 미디어/장치 지정 |
rel |
alternate/author/bookmark/help/license/next/ nofollow/noreferrer/prefetch/prev/search/tag |
현재 문서와 링크된 문서 간의 관계 정의 |
target |
_blank/_parent/_self/_top/framename |
링크된 문서를 열 위치 지정 |
type |
MIME type |
링크된 문서의 미디어 유형 지정 |
HTML5 미지원 |
||
charset |
char_encoding |
링크된 문서의 문자 셋 정의 |
coords |
coordinates |
링크의 좌표 지정 |
name |
section_name |
앵커의 이름 지정 |
rev |
text |
링크된 문서와 현재 문서 간의 관계 정의 |
shape |
default/rect/circle/poly |
링크 모양을 지정 |
<a>태그 기본 형식
<a href="URL"> link text </a>
* href 속성은 이동할 페이지(URL)를 지정하고, link text는 웹 브라우저에서 보이는 부분을 지정합니다. 이 link text 클릭 시 연결된 페이지(URL)로 이동합니다.
<a>태그 사용하기
1) 텍스트와 이미지를 이용해 구글로 연결하는 태그를 작성해 보겠습니다. 먼저 구글과 관련된 이미지를 아무거나 하나 다운받아, html편집기를 켜고 다음과 같이 작성합니다. 이미지를 통한 하이퍼링크 연결하는 법은 그냥 <a>태그 안에 <img>태그를 써주시면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>하이퍼링크</title> <meta charset="utf-8"> </head> <body> <a href="https://www.google.co.kr/">Google</a> <a href="https://www.google.co.kr/"><img src="다운받은 이미지" alt="대체 텍스트"></a> </body> </html> | cs |
2) 텍스트와 이미지 둘 다 클릭해보면 구글 홈페이지로 정상적으로 이동이 되는 것을 확인할 수 있습니다.
03. <a>태그 활용하기
좀 더 다양한 <a>태그의 속성들을 살펴보도록 하겠습니다.
name 속성
이 속성은 페이지 안에서 특정 위치로 이동하는 링크의 설정이 가능합니다. 한마디로 문서 내에 책갈피를 만듭니다.
* a태그의 name 속성은 HTML5에서부터 지원하지 않습니다. name 속성 대신 id 속성의 사용이 권장됩니다. id 속성 사용법은 name 이라는 부분만 id로 바꾸어 주면 됩니다.
1) 속성을 사용하기 위해 먼저 내용을 충분한 길이로 입력해 줍니다. (브라우저에서 스크롤바가 생길 정도로)
여기서 name 속성의 값은 마음대로 입력하되, 공백이 없고 대/소문자 구별 없이 입력합니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>하이퍼링크</title> <meta charset="utf-8"> </head> <body> <h2><a name="top">텍스트</a></h2> <pre>텍스트 내용</pre> <a href="#top">맨 위로 이동</a> </body> </html> | cs |
2) 웹 브라우저 실행 결과입니다.
3) 스크롤을 내리고, 가장 아래에 <a>태그로 입력했던 '맨 위로 이동' 텍스트가 있습니다. 이 링크를 클릭하게 되면
4) <a name="top"> 이라고 지정해주었던 이 위치로 이동하게 됩니다.
* 위 방법은 같은 문서 내의 특정 위치로 이동하는 방법이고, 만약 다른 문서의 특정 위치로 이동하고 싶다면 <a href="#이름"> 부분을 <a href="파일명#이름">과 같이 작성해주면 됩니다.
target 속성
이 속성은 링크된 문서가 열릴 위치를 지정합니다. (보일 내용이 새 창에서 나타날지, 현재 창에서 나타날지 등)
_blank |
새 창에서 링크된 문서를 열음 |
_parent |
현재 프레임의 부모 프레임에서 링크된 문서를 열음 |
_self |
현재 페이지와 동일한 창에 그대로 링크된 문서를 열음. (기본 값) |
_top |
최상위의 화면에 문서를 열음. 프레임 페이지 사라지고 전체 화면으로 표시 |
framename |
명명 된 프레임에 링크된 문서를 열음 |
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 10. 멀티미디어 삽입하기 (0) | 2017.01.20 |
|---|---|
| 9. 이미지맵 설정하기 <map>, <area> (0) | 2017.01.17 |
| 7. 이미지 삽입 태그 <img> (0) | 2017.01.13 |
| 6. 목록을 만드는 태그 <ul>, <ol>, <dl> (0) | 2017.01.11 |
| 5. 문단 정렬 태그 (0) | 2017.01.09 |
댓글,
