[HTML] 링크 태그 - A 태그

 이번에는 링크를 걸어주는 태그를 알아보겠습니다. Anchor 태그라고 하는 A 태그입니다. 문서나 파일을 연결할 때 사용합니다. 흔히 링크를 건다고 하지만 하이퍼링크가 정확한 이름입니다.

 HTML문서의 가장 큰 특징이기도 한데요, 하이퍼링크를 통해 다른 웹사이트로 이동할 수 있으며 자신의 웹사이트 내에서 다른 문서나 문서의 특정 부분으로 이동할 수도 있습니다.

1. 기본구조

<a href="fruit.html"> 신나는 과일가게 </a>

  href 속성으로 이동할 웹페이지를 지정하게 됩니다. 시작 태그와 닫는 태그 사이에 링크를 걸어놓을 텍스트를 입력합니다. 링크가 설정된 텍스트에는 일반적으로 밑줄이 그어진 형태로 나타납니다. 일반 텍스트인지 링크가 걸려있는지를 쉽게 알아볼 수 있게 하기 위해서입니다. 보통은 웹페이지에 CSS로 처리된 경우가 많이 다양한 디지인으로 나타납니다.

<a href="fruit.html"> <img src="fruit.jpg"> </a>

 위와 같이 걸어주면 텍스트가 아니라 이미지에 링크를 걸 수 있게 됩니다.

2. Target 속성

<a href="fruit.html" target="_blank"> 맛있는 과일가게 </a>

 Target 속성은 이동할 페이지를 브라우저에 어떻게 표시해주는지를 결정합니다. _blank로 지정하면 새창에서 페이지를 열게 되고 _top으로 지정하면 현재 페이지에 열게 됩니다.

 예전에 프레임 개념이 있을 때에는 프레임네임을 지정해서 해당 프레임에서 문서가 열리게 지정하기도 했습니다. 주로 메뉴과 메인페이지를 구분하는 형식이었습니다. 메뉴에서 클릭하면 메인페이지에 나타나는 형태로 말이죠. 프레임 개념은 요즘에 잘 사용하지 않기 때문에 그냥 넘어가도 무방할 듯 합니다.

3. 이메일주소 링크

<a href="mailto:manager@fruit.com"> 메일쓰기 </a>

 href 속성에 "mailto:이메일주소"를 입력하게 되면 이메일을 보낼 수 있는 프로그램이 실행됩니다. PC에 지정된 이메일 보내기 기본 프로그램이 뜨게 됩니다.

4. 문서 내 특정 부분으로 이동

<a href="#main"> 메인으로 이동 </a>
.
.
.
<p> 제목 위치 </p>
.
.
.
<a name="main"> <p> 메인 위치 </p>
.
.
.
<p> 웹사이트정보 위치 </p>

 동일 문서의 특정 위치로 이동하려면 href 속성에서 "#링크명"을 입력해 주고 이동할 위치에는 a 태그의 name 속성을 이용하여 링크명을 입력하면 됩니다. 위의 예제에서 링크를 클릭하면 가운데 있는 main으로 이동하게 됩니다.

 가장 흔히 사용되는 예로는 화면 맨 하단에 제일 위로 올라갈 수 있는 링크를 만들어주는 것입니다. 페이지 상단에 top 이라는 링크명을 주고 맨 아래에는 ↑ 이런 화살표 이미지에 링크를 하나 걸어두면 되겠죠.