하이퍼링크 삽입하기

하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능이다.

 

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

- 웹 사이트의 링크의 기능은 가장 많이 사용된다.

- 링크는 <a> 태그로 만드는데, 이 때 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.

- <a> 태그의 기본형은 href 속성을 이용해 연결할 파일이나 링크할 주소를 쓴다.

 

 

# 텍스트 링크 만들기

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

<a href="../05/order.html">주문서 작성하기</a>

 

 

# 이미지 링크 만들기

- 텍스트 링크를 만드는 것과 같은 방법으로 <a> 태그를 사용해 이미지에 링크를 추가할 수 있다.

- 링크가 추가된 이미지 위로 마우스 포인터를 가져갔을 때 마우스 포인터가 손 모양으로 바뀌므로 링크가 없는 이미지와 구별할 수 있다.

<a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>

 

 

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

위에서 만든 텍스트나 이미지 링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서가 나타난다.

taget 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.

<a href="../05/order.html" target="_blank"><img src="images/tangerines.jpg" alt="레드향"></a>

 

---

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]