[HTML] HTML의 링크를 만드는 태그

728x90

링크를 만드는 태그 <a>

<a> 태그란 무엇인가?
<a> 태그에서 사용할 수 있는 속성
예시

<a> 태그란 무엇인가?

흔히 하이퍼링크, 링크 연결 등 특정한 곳을 눌렀을 때 지정된 주소로 연결시켜주는 기능을 <a>를 이용하여 주소를 연결합니다.

예시로는 <a href="https://www.naver.com/"> 네이버로 가기 </a> 이처럼 작성한다면 네이버로 가는 링크를 만듭니다.

<a> 태그만 사용한다고 되는 것이 아니라 href 속성을 이용해주어야 완벽히 주소를 연결할 수 있지만 속성에 대해서는 아래에서 설명드리겠습니다.

<a> 태그에서 사용할 수 있는 속성

<a> 태그는 href, target, download, rel 등이 있습니다.

href는 <a> 태그에서 어떠한 주소로 이동을 할 것인지 값을 주는 속성입니다. < a href="http://www.naver.com"> 네이버로 이동 </a>로 작성을 한다면 "네이버로 이동"에 링크로 네이버 주소를 주었습니다. href의 값으로 주소 말고 선택 자라는 것을 줄 수 있는데 HTML내에서 태그에 id로 지정한 선택자를 찾아서 그 위치로 이동해줍니다.

선택자를 이용하여 만든 링크입니다.

<a> 태그의 네이버로 가는 링크 예시 보러 가기

(여기를 누르면 href에 저장된 선택자 show를 찾아 "네이버로 이동" 예시를 보여줍니다.)

<a> 태그의 target속성 보러 가기

(여기를 누르면 href에 저장된 선택자 test 1을 찾아 target속성 설명으로 이동합니다.)

<a> 태그의 download속성 보러 가기

(여기를 누르면 href에 저장된 선택자인 test2를 찾아 download속성 설명으로 이동합니다.)

<a> 태그의 rel속성 보러 가기

(여기를 누르면 href에 저장된 선택자인 test 3을 찾아 rel속성 설명으로 이동합니다.)

네이버로 이동 예시

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

target이란?

target은 <a> 태그로 연결된 주소를 어떻게 띄울 것인가를 설정하는 속성입니다. target의 값으로는 _blank, _self, _parent, _top가 있으며 각각 순서대로 새 창에서 띄우기, 현재 창에 띄우기, 프레임을 기준으로 이전 프레임에 띄우기, 프레임을 기준으로 가장 위의 프레임에 띄우기입니다.

download란?

<a> 태그에서 href의 값을 사이트의 주소나 선택자가 아닌 파일의 주소로 줄 수 있습니다. 이러한 경우 파일을 다운로드할 수 있는데 download는 파일을 다운할 때 파일의 이름을 지정해줍니다.

rel이란?

<a> 태그에 연결된 문서에 와 현재 문서의 관계 설명을 작성하는 속성입니다.

예시