[html] a 태그(tag) 속성 (href, target, title) 사용하는 방법

[html] a 태그(Tag) 속성 (href, target, title) 사용하는 방법

우리가 인터넷의 웹페이지에서 링크를 통해 다른 웹페이지로 이동하거나, 문서 내에서 이동을 하는 경우가 많다.

a 태그(Tag)는 문서를 링크 시키기 위해 사용하는 태그(Tag)이다.

<a> 태그(Tag)의 속성 사용법

href : 연결할 주소를 지정 한다.

target : 링크를 클릭 할 때 창을 어떻게 열지 설정 한다.

title : 해당 링크에 마우스 커서를 올릴때 도움말 설명을 설정 한다.

1. href 속성

href 속성은 <a> 태그(Tag)를 통해 연결할 주소를 지정 한다.

기본 사용법은 아래와 같다.

<a href="http://electronic-moongchi.tistory.com">전자뭉치 블로그로 이동하기</a>

실행 결과는 다음과 같다.

<a> 태그(Tag) 의 주소는 다양한 방식으로 지정 할 수 있다.

절대 경로 url : 링크의 전체경로

 - <a href="http://electronic-moongchi.tistory.com">전자뭉치 블로그로 이동하기</a>

상대 경로 url : 같은 프로젝트 폴더 내의 경로

 - <a href="main.html">메인으로 바로가기</a>

 - <a href="/user/detail.html">사용자 정보 상세보기</a>

엘리먼트 ID 를 이용한 url : 같은 문서 내의 엘리먼트 ID

 - <div id="copyright">copyright </div> 로 div 엘리먼트 ID 를 지정

   <a href="#copyright">copyright로 이동하기</a>

자바스크립트 함수 호출

 - <a href="javascript:alert('알림');">알림</a>

기타

 - <a href="ftp://ftp.test.com">ftp 접속</a>

 - <a href="mailto:test.daum.net">메일 보내기</a>

2. target 속성

target 속성은 링크를 클릭 할 때 창을 어떻게 열지 설정 한다.

<a href="http://electronic-moongchi.tistory.com" target="_blank">전자뭉치 블로그로 이동하기</a>

target 속성은 다양한 방식으로 지정 할 수 있다.

_self : 링크를 클릭한 해당 창에서 연다.

_blank : 링크를 새창으로 연다.

_parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)

_top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)

3. title 속성

title 속성은 해당 링크에 마우스 커서를 올릴때 도움말 설명을 설정 한다.

기본 사용법은 아래와 같다.

<a href="http://electronic-moongchi.tistory.com" title="전자뭉치 블로그">전자뭉치 블로그로 이동하기</a>

실행 결과는 다음과 같다.