[컴퓨터언어] 링크(하이퍼링크) 만드는 태그, 소스, 코드 및 속성 (10)

어느 사이트를 들어가더라도 있을 만큼 인터넷 세상에서 링크는 굉장히 흔한 기능입니다. 하이퍼링크라고 많이 알려져 있는 이 기능은 적절하게 사용할 시 방문자의 편의성을 높여줄 수 있기 때문에 알아두면 굉장히 좋습니다. 오늘은 이런 링크를 웹 브라우저에서 구현하는 태그와 속성에 대해 알아가는 시간을 가져보도록 하겠습니다. 단순히 텍스트에만 링크를 씌우는 것이 아니라, 이미지에도 씌울 수 있고, 이미지에서도 2개 이상 씌울 수도 있습니다. 전부 알아보도록 하겠습니다.

 

하이퍼링크 만드는 태그, 소스, 코드 및 속성

1. 일반적인 링크 : <a> 태그, href 속성

2. 앵커기능 : 한 페이지 내에서 이동하는 링크 작성(목차 링크에 주로 이용, 내부링크)

3. 한 이미지에 2가지 링크 넣기 : <map> 태그, usemap속성

 

링크와 관해서는 이렇게 크게 3가지에 대해 아시면 좋습니다. 더 자세하게 설명해드리겠습니다.

---

[1] 일반적인 링크 (<a> 태그, href 속성)

 

웹상에서 널리 사용되고 있는 굉장히 진부한 링크를 만드는 태그와 속성입니다.

기본 링크는 평소에는 파란색 글자로 표시되어있고, 한 번 클릭한 후에는 보라색, 링크에 마우스를 가져다 대고 있으면 빨간색으로 표시됩니다. 물론 이 디자인은 CSS로 바꿀 수 있지만 이 포스팅에서는 다루지 않을 예정입니다.

<a> 태그를 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지링크가 됩니다. 즉, 텍스트 링크와 이미지링크를 작성하는 방식은 크게 다르지 않다는 의미입니다. href속성은 링크를 달 때 기본으로 사용하는 속성으로 뒤에서 더 자세히 설명드리겠습니다. 기본형은 다음과 같습니다.

 

<!-- 텍스트 링크-->
<a href="http://www.readingcompany.tistory.com"> 텍스트 </a>

<!-- 이미지 링크-->
<a href="http://www.readingcompany.tistory.com">
<img src="경로">
</a>

 

기본형을 알아보았으니 다음으로는 <a> 태그 안에 사용할 속성에 대해 알아보겠습니다. 위에서 살짝 언급했던 href가 <a> 태그의 대표적인 속성 중 하나입니다. 사용성이 높은 4가지의 속성만 가지고 와보았습니다.

 

■ <a> 태그 안에서 사용할 수 있는 속성

 ○ href : 링크를 통해 이동시킬 문서나 사이트의 주소를 입력합니다.

 ○ target : 링크한 내용이 표시될 위치를 지정합니다. (아래의 속성으로 지정할 수 있습니다.)

    (1) _self : 링크가 있는 화면에서 열립니다. (기본값)

    (2) _blank : 새 창이나 새 탭에서 엽니다.

 ○ download : 링크한 내용을 다운로드합니다. (내용을 보여주지는 않습니다.)

 ○ type : 링크한 문서의 파일 유형을 알려주는 역할입니다.

 

 

 

 

[2] 앵커기능 (링크 참조)

 

한 페이지 내에서 이동하는 링크를 앵커기능이라고 말합니다. 간혹 목차를 누르면 해당 내용으로 이동하는 링크를 보신 적이 있으실 겁니다.(나무 위키가 대표적입니다.) 내부링크라고도 하는데 이와 관련된 내용은 이미 전에 포스팅한 적이 있으므로 링크를 걸어드리겠습니다. 궁금하신 분은 한 번 읽어보시기 바랍니다.

티스토리 글 내에서 이동하기 / 페이지 내 원하는 위치로 스크롤 이동 방법 (앵커기능)

티스토리 글 내에서 이동하기 / 페이지 내 원하는 위치로 스크롤 이동 방법 (내부 링크, 하이퍼링

 

[3] 이미지맵 지정하는 링크 (<map> 태그, <area> 태그, usemap 속성)

 

웹 디자인을 할 때 하나의 이미지에 여러 개의 구획을 설정하여 각 구획에 링크를 걸 수 있습니다. 이때 이 구획들을 이미지맵이라고 합니다. 잘 활용할 경우 홈페이지형 블로그를 구축할 수 있습니다. 이미지맵을 지정하는 과정은 다음과 같습니다.

 

■ 이미지맵 작성 과정

1. <map> 태그를 이용해 이미지맵을 만들고

2. <img> 태그에서 usemap속성으로 이미지 맵을 지정한 후

3. <area> 태그로 영역을 지정

 

실제로 소스를 작성해 보면 "1 → 3 → 2"와 같은 순서로 작성되어 있지만, 실제로는 제가 제시한 순서대로 작성하는 것이 헷갈리지 않고 훨씬 편리합니다. 기본형은 다음과 같습니다.

 

<map name="이미지맵이름">
	<area="속성값">
	<area="속성값">
</map>

<img src="경로" usemap="#이미지맵이름">

 

다음은 <area> 태그가 가지고 있는 속성들에 대해서 알아보겠습니다. 새로운 태그이지만 속성들은 반복되기 때문에 그렇게 낯설지는 않을 겁니다. 특히 alt, href, download 속성은 굉장히 반갑죠?

 

■ area 태그의 속성값

 ○ alt : 대체 텍스트 지정 (이미지 태그 포스팅)

 ○ href : 링크 경로 지정

 ○ download : 링크 클릭 시 해당 문서를 다운

 ○ coords : 링크로 사용할 구획의 시작과 끝 좌표를 지정합니다.

 ○ shape : 이미지맵의 형태를 지정합니다. (default, rect, circle, poly과 같은 도형입니다)

 

<area> 태그의 속성 값까지 사용해서 기본형을 작성해보면 아래와 같습니다.

coords="0,0,100,100" 에서 이 숫자들은 px단위로 그림판에서 왼쪽 하단을 보셔서 커서의 px위치를 확인할 수 있습니다.

 

<map name="이미지맵이름">
	<area shape="rect" coords="0,0,100,100" href="링크1">
	<area shape="rect" coords="110,0,210,100" href="링크2">
</map>

<img scr="경로" usemap="#이미지맵이름">

 

 

---

지금까지 링크를 만드는 태그와 속성에 대해서 알아보았습니다. 특히 앵커기능과 이미지맵 기능은 티스토리 에디터에 없는 기능이기 때문에 잘만 활용하실 경우 굉장히 독특한 블로그를 만드시는데 도움이 될 거라 생각합니다.