[HTML 입문] 링크 관련 태그

1. <a> 태그 - 링크 만들기

 

텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다.

 

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

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

<a> 태그 안에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
href	링크한 문서나 사이트의 주소를 입력한다.
target	링크한 내용이 표시될 위치(현재 탭 또는 새 탭)를 지정한다.
download	링크한 문서를 다운로드한다.
rel	현재 문서와 링크한 문서의 관계를 알려준다.
hreflang	링크한 문서의 언어를 지정한다.
type	링크한 문서의 파일 유형을 알려준다.

<a> 태그의 주요 속성 중 target 속성을 사용하면 현재 화면 뿐만 아니라 새로운 화면에서도 링크를 열 수 있는데 target 속성에서 사용할 수 있는 값은 다음과 같습니다.

속성 값	설명
_blank	링크 내용이 새 탭에서 열린다.
_self	target 속성의 기본 값으로 현재 탭에서 열린다.
_parent	프레임을 사용 했을 때 링크 내용을 부모 프레임에 표시한다.
_top	프레임을 사용 했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.

2. 앵커 기능

웹 문섯가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 '앵커(anchor)'라고 합니다.

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

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

앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 사용해 앵커를 만들고 각각 다른 이름을 지정합니다. 그리고 <a> 태그의 href 속성을 사용해 링크합니다. 단, 앵커 이름 앞에 #을 붙여 앵커를 표시합니다.

<ul id="menu">

        <li><a href="#content1">메뉴1</a></li>

        <li><a href="#content2">메뉴2</a></li>

        <li><a href="#content3">메뉴3</a></li>

    </ul>

    <h2 id="content1">내용1</h2>

    <p>웹 문서가 너무 길 경우 … 합니다. </p>

    <p><a href="#menu">[메뉴로]</a></p>

    <h2 id="content2">내용2</h2>

    <p>웹 문서가 너무 길 경우 … 합니다. </p>

    <p><a href="#menu">[메뉴로]</a></p>

    <h2 id="content3">내용3</h2>

    <p>웹 문서가 너무 길 경우 … 합니다. </p>

    <p><a href="#menu">[메뉴로]</a></p>

3. <map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정

하나의 이미지에 여러 개의 링크를 만드는 것을 '이미지 맵'이라고 합니다.

<map name="맵 이름">

     <area>

     <area>

     … …

</map>

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

이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area> 태그를 사용하는 데 <area> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

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

<출처> Do it! HTML5+CSS3 웹 표준의 정석