하이퍼링크 태그

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1) 링크 만들기
2) 앵커(anchor) 만들기
3) 이미지 맵 지정하기

링크

링크는 웹 문서와 다른 문서가 구별되는 가장 큰 특징이다.
텍스트를 클릭해 해당 페이지로 넘어갈 수 있고 이미지에 링크를 걸 수도 있으며 열고 있는 브라우저에서 해당 페이지로 이동하지 않고 새 창을 띄워 보여 줄 수도 있습니다.

1) 링크 만들기

//텍스트 링크
<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>

//이미지 링크
<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"></a>

- <a>태그와 사용하는 속성들

속성	설명
href	링크한 문서나 사이트의 주소를 입력한다.
target	링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다. 속성 값 _self : 기본값. 링크가 있는 화면에서 열린다. _blank : 링크 내용이 새 창이나 새 탭에서 열린다. _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다. _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.
download	링크한 내용을 다운로드한다.
rel	현재 문서와 링크한 문서의 관계를 알려준다.
hreflang	링크한 문서의 언어를 지정한다.
type	링크한 문서의 파일 유형을 알려준다.

2) 앵커(anchor) 만들기

앵커란 한 페이지 내에 링크를 만드는 것으로, 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와주는 기능이다.
앵커를 사용하려면 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다른 이름을 지정한다. 이렇게 붙여 놓은 앵커 이름들을 링크를 만들 때처럼 <a>태그의 href속성을 사용해 링크하면된다.

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>

3) 이미지 맵 지정하기

이미지 맵이란 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리도록 설정하는 것을 말한다.
이미지 맵은 <map>,<area>태그를 이용해 이미지에 영역(맵)을 만든 후 링크로 이미지를 지정하면 사용할 수 있다.

<map name="맵이름">
  <area>
  <area>
  ....
<map>

<img src-"이미지 파일" usemap="#맵이름">

- <area>태그와 사용하는 속성들

속성	설명
alt	대체 텍스트를 지정한다.
coords	링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
download	링크를 클릭했을 때 클릭 문서를 다운로드한다.
href	링크 문서(사이트) 경로를 지정한다.
media	링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정한다.
rel	형재 문서와 링크 문서 사이의 관계를 지정한다. 속성 값 alterate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev,search, tag
shape	링크로 사용할 영역의 형태를 지정한다. 속성 값 default, rect, circle, poly
target	링크를 표시할 대상을 지정한다. 속성 값 _blank, _parenet, _self, _top, 프레임이름
type	링크 문서의 미디어 유형을 지정한다.

- ex) 이미지맵

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지맵</title>
	<style>
		a {
			text-decoration:none
		}
	</style>
</head>

<body>
<img src="images/kids.jpg"  alt="" usemap="#favorites">
<map name="favorites">
  <area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com/doithtml5" target="_blank" alt="do it html5 네이버 카페로 가기">
  <area shape="rect" coords="220,10,380,200" href="http://www.facebook.com/do.it.html5" target="_blank" alt="do it html5 페이스북 페이지로 가기">
</map>
</body>
</html>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

다양한 폼 요소들 (0)	2020.07.07
폼, 드롭다운 목록 (0)	2020.07.07
이미지 태그 (0)	2020.07.06
텍스트, 목록, 표 관련 태그 (0)	2020.07.05
웹 호스팅 (0)	2020.07.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

winnih_B

LINKS

CATEGORY

하이퍼링크 태그

링크

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

하이퍼링크 태그

링크

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

'💻WEB FrontEnd/HTML5' Related Articles

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역