[html/css]문서를 연결하는 a 태그 (href, title, target 속성)
인터넷을 사용할 때 가장 많이 보는 것 중 하나가 이 링크인데요.
링크를 통해 다른 웹페이지로 이동하거나, 문서 내에서도 이동할 수가 있습니다.
이렇게 문서를 링크시키기 위해 사용하는 태그가 바로 <a>태그 입니다.
<a>태그 |
anchor '정박지' 또는 '닻 '의 약자입니다
<a>태그는 혼자만 사용하지 않고 아래와 같은 속성과 함께 사용합니다.
herf 속성
hypertext reference 약자로, 연결할 주소를 지정하는 속성입니다.
사용 예 :
<a href="http://aboooks.tistory.com">지구별 안내서 바로가기</a>
따옴표(" ")를 빠트리지 않도록 주의해 주세요. 링크가 정상적으로 나오지 않을 수도 있습니다~
주소는 아래처럼 다양하게 넣을 수 있습니다
절대 URL (Uniform Resource Locator의 약자로 '웹페이지 주소'라는 뜻)
<a href="http://aboooks.tistory.com">지구별 안내서</a>
상대 URL(주로 같은 문서 안에서 링크를 만들 때) <a href="right.htm">오른쪽 페이지로 이동</a>
<a href="../right.htm">오른쪽 페이지로 이동</a> ../ 는 상위 레벨의 폴더를 말함.
<a href="home/right.htm">오른쪽 페이지로 이동</a> [home]폴더 안에 있는 right.htm문서를 가리킴
다른 형식의 URL
ftp:// mailto: file:
예 : <a href="mailto:abooks@daum.net">Contact me</a>
id를 이용한 URL (특히 같은 문서 내에서 가리키는 id)
예: <div id="top">ID를 이용한 URL</div> 라고 ID를 미리 지정한 후 아래처럼 연결시킴.
<a herf="#top">맨 위로 이동</a>
또는 <a href="http://aboooks.tistory.com/87#top">맨 위로 이동</a>
[HTML, CSS 기초] class, id 선택자 참조
스크립트 <a href="javascript:alert('Hello');"> |
title 속성
해당 링크에 마우스를 갖다 대면 link에 대한 설명이 나옵니다.
사용 예: <a href="http://aboooks.tistory.com/" title="my homepage">지구별 안내서</a>
target 속성
링크를 클릭 할 때 창을 어떻게 열지 결정합니다
_self 연결 문서를 클릭한 창에서 엶(기본값)
_blank 연결 문서를 새 창에서 엶
_parent 부모(상위 레벨) 창에서 엶(부모가 없으면 _self처럼 표시함)
_top 가장 상위 창에서 엶(즉 프레임을 무시하며, 전체 브라우저 창에서)(부모가 없으면 _self처럼 표시됨)
frame name 지정된 프레임 안에 염.
사용 예 : <a href=http://aboooks.tistory.com" target="_blank">지구별 안내서 바로가기</a>
<a>태그는 문자뿐 아니라, 이미지, <div> 등도 링크를 걸 수 있습니다.
사용 예 :
<a href="http://aboooks.tistory.com"><img src="main.png" /></a>
<a href="http://aboooks.tistory.com"><div id="a">애국가</div></a>
[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기
'html' 카테고리의 다른 글
[HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션 (1) | 2014.06.22 |
---|---|
크로스브라우징, 웹표준과 핵(hack) (9) | 2014.04.29 |
[html 기초] b, strong, em, i, cite, small 태그 (0) | 2014.03.18 |
[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6 (0) | 2014.03.18 |
[html기초] , br, pre, p 태그 (3) | 2014.03.12 |
댓글