HTML / a / 링크(link) 만들기

링크를 만드는 태그

링크(link)는 <a> 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다.

기본 문법

<a href="xxx">Label</a>

href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리합니다.

<a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어집니다.

주요 속성

a 태그에 추가할 수 있는 속성은 여러 가지가 있습니다. 자주 사용되는 주요 속성은 다음과 같습니다.

target

target 속성은 링크를 어디에서 열지 정합니다. 속성의 값으로는 target 속성값에는 _self, _blank, _parent, _top이 있습니다.

  • _self : 기본값으로 현재 페이지에서 링크를 처리합니다.
  • _blank : 새 창 또는 새 탭에서 링크를 처리합니다.
  • _parent, _top : 웹페이지를 frameset으로 구성했을 때 사용합니다.

download

download를 추가하면, 웹브라우저의 설정에 상관없이 링크 대상을 다운로드합니다. 예를 들어

<a href="image.jpg">Go</a>

는 image.jpg 파일을 웹브라우저에서 보여주지만

<a href="images/image.jpg" download>Go</a>

는 image.jpg 파일을 다운로드합니다.

문서 내 특정 위치로의 링크

href 속성의 값 앞에 #을 붙이면, 해당 id를 가진 요소로 이동합니다. 예를 들어

<a href="#result">Go to result.</a>

는 id 속성의 값으로 result를 갖는 요소로 이동합니다. 만약 현재 문서가 아니라 다른 문서라면, 예를 들어 a.html 문서 내에 있는 요소라면 다음과 같이 만듭니다.

<a href="a.html#result">Go to result.</a>

이메일주소로의 하이퍼링크

이메일 주소로의 하이퍼링크는 다음과 같이 만듭니다.

Contact <a href="mailto:admin@codingfactory.net">Admin</a>

링크를 클릭하면 메일 프로그램이 실행됩니다. 하지만, 스팸메일 등의 이유로 잘 사용하지는 않습니다.