하이퍼링크 만들기

Posted on Edited on In , Word count in article: 293 Reading time ≈ 1 mins.

WEB 의 가장 큰 특징은 연결 입니다.
하이퍼링크는 WEB 을 WEB (web, 거미줄, 연결을 의미) 답게 만들어 줍니다.

하이퍼링크 란?

모든 웹내 컨텐츠를 연결시켜주는 역할을 합니다.

링크의 구조

<a> anchor 의 약자로 다른 컨텐츠로의 연결을 만들어줍니다.

링크는 <a> 태그와 href (hypertext reference) 속성으로 만들어 줍니다.

1
2
3
4
5
6
7
skyksit.com Study 바로가기
<!-- a 태그로 컨텐츠를 감싸주고 -->
<a>skyksit.com Study 바로가기</a>
<!-- href 속성을 추가합니다 -->
<a href="">skyksit.com Study 바로가기</a>
<!-- href 속성에 웹 주소를 넣어줍니다 -->
<a href="https://skyksit.com/study/">skyksit.com Study 바로가기</a>

title 속성 추가하기

title 속성은 마우스를 오버했을때에 툴팁에 대한 기능도 제공합니다.

1
<a href="https://skyksit.com/study/" title="skyTechBlog">skyksit.com Study 바로가기</a>

이미지 링크

<a> 태그 안에 <img> 태그를 넣어서 이미지에 링크를 걸 수 있다

1
2
3
<a href="https://skyksit.com">
<img src="https://skyksit.com/images/logo.png" alt="skyTechBlog" style="width:122px;height:122px;">
</a>

절대경로 상대경로

링크를 거는 방법은 도메인부터 시작하는 절대경로와
해당 페이지를 기준으로 하는 상대경로가 있다

1
2
3
4
5
<!--절대경로-->
<a href="https://skyksit.com/categories/Programming/Html/" target="_blank">Visit skyksit.com</a>

<!--상대경로-->
<a href="../Programming/" target="_blank">Visit skyksit.com</a>

문서 조각 Document fragments

id 속성 값을 활용하여 페이지의 해당 위치로 이동 시킬 수 있다.
일반적으로 heading 으로 이동시킨다.

  • 이동할 곳이 id 속성으로 정의 되어 있을 것
  • URL 끝에 # 기호를 이용한다

이메일 링크

링크에 이메일 주소를 넣을 수 있다.
PC 에 설치되어있는 이메일 어플리케이션이 실행되면서 받는 사람에 해당 이메일 주소가 자동 입력된다

1
<a href="mailto:[email protected]">메일보내기</a>

target 속성으로 이동을 새창으로 할 건지 바로 이동할 건지를 정할 수 있다

  • _self - default, 같은 창에서 Links 로 이동
  • _blank - 현재 창과 다른 새 창을 띄워서 이동
  • _parent - 현재의 부모 frame 에서 이동
  • _top - 창의 전체 본문에서 이동
1
<a href="https://skyksit.com/" target="_blank">Visit skyksit.com</a>

연관문서