링크란 웹서핑을 하면서 글자나 그림을 클릭하면 다른 웹페이지나, 그림으로 연결되는 그 부분이 바로 하이퍼링크를 해놓은 부분입니다.

즉, 링크를 클릭하면 다른 장소로 이동할 수 있게 해주는 태그가 하이퍼 링크 태그라고 부릅니다. 링크 기본 구조는 다음과 같습니다.

<a href="링크 시킬 주소" target="_값" > 글자 </a>

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

속 성 설 명
href 링크한 사이트나 문서, 또는 이미지
target 링크한 내용을 새 창으로 보여줄지, 현재 창에 보여줄지를 설정.
  • _blank : 새 창으로 보여줌
  • _self : 현재 창에 보여줌(기본 값)
  • _parent : 프레임을 사용할 경우 한 단계 상위 프레임에 보여줌
  • _top : 프레임을 사용할 경우 가장 상위 프레임에 문서를 보여줌
download 링크한 내용을 다운로드하게 합니다.
rel 현재 문서와 링크한 문서의 관계
hreflang 링크한 문서의 언어를 지정.
type 링크한 문서의 파일 유형(mime-type)을 설정.

이미지에 링크 태그를 연결할 경우 다음과 같이 해주세요.

<a href="링크 시킬 주소"><img src="그림 주소"></a>

이메일 주소에 링크를 연결하고 싶다면 이렇게 하세요.

<a href="mailto:메일주소">운영자에게 메일보내기</a>

음악이나 영상에 링크를 연결하고 싶다면 이렇게 하세요.

<a href="음악주소">제목</a>

다운로드 링크를 만들고 싶을 때 이렇게 해주세요. download 속성이 설정되면 링크가 가리키는 파일을 다운로드합니다.

<a href="#" download="파일 이름(또는 URL)">download</a>


앵커 만들기

페이지가 긴 문서에서 특정한 요소를 클릭하면 그 위치로 이동시켜주는 기능을 앵커라고 부릅니다.

<h1 id="[앵커 이름]">제목</h1>

<a href="#[앵커 이름]">빠른 이동</a>

여기서 앵커 이름은 임의로 할 수 있으며 <a>태그와 연결한 태그의 앵커 이름은 동일해야 합니다.

<h1 id="anchor">제목</h1>

<a href="#anchor">빠른 이동</a>

0 댓글