[HTML] 하이퍼링크 삽입하기

링크를 삽입하는 <a> 태그와 href 속성

 

웹 사이트에서 링크의 기능은 가장 많이 사용되며, 그만큼 중요하다. 링크는 <a> 태그로 만드는데, 이때 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 된다. <a> 태그의 기본형은 다음과 같이 href 속성을 이용해 연결할 파일이나 링크할 주소를 쓴다.

 

기본형 <a href ="링크할 주소">텍스트 또는 이미지</a>

 

텍스트 링크 만들기

 

텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다.

 

다음 예제와 같이 '주문서 작성하기'를 클릭하면 order.html 문서로 연결된다.

 

(...생략하기...)
<div>
    <p><a href="order.html">주문서 작성하기</a></p>
</div>
(...생략하기...)

 

 

이미지 링크 만들기

 

텍스트 링크를 만드는 것과 같은 방법으로 <a> 태그를 사용해 이미지에 링크를 추가할 수 있다. 링크가 추가된 이미지 위로 마우스 포인터를 가져갔을 때 손 모양으로 바뀌므로 링크가 없는 이미지와 구별할 수 있다. 

 

(...생략하기...)
<a href="order.html"><img src="images/아보카도.jpg" alt="아보카도"></a>
(...생략하기...)

 

링크를 새탭에서 열어주는 target 속성

 

앞에서 만든 예제의 텍스트나 이미지 링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서가 나타난다. 그래서 링크를 클릭하기 전 문서로 돌아가려면 브라우저 창에서 매번 [이전 페이지]를 눌러야 한다. 이러한 번거로움을 줄이기 위해 target 속성에 _blanck를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다. 다음과 같이 속성을 추가해보자.

 

(...생략하기...)
<div>
   <p><a href="order.html" target="_blank">주문서 작성하기</a></p>
</div>
(...생략하기...)