링크 만들기(HTML)

링크는 클릭하면 다른 화면으로 이동하게 해준다. 이러한 기능을 할수있는 HTML 태그를 공부해보자

 

<a>태그 

- <a>태그에 href 속성으로 이동하려는 홈페이지 경로를 넣어주면 해당 태그를 클릭 시 href에 있는 페이지로 이동한다.

- <a>태그 안에 텍스트나 이미지 같은것을 넣으면 텍스트나 이미지를 클릭시 href 페이지로 이동한다.

- target 속성은 링크한 내용을 현재 창에 표시할지 새 창을 띄워서 표시할지 정한다.

  > _blank : 링크 내용이 새 창이나 새 탭에서 열린다.

  > _self : target 속성의 기본값으로 링크가 있는 화면에서 열린다.

  > _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.

  > _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.

- rel 속성은 현재 문서와 링크한 문서의 관계를 알려준다.

- hreflang 속성은 링크한 문서의 언어를 지정한다.

- type 속성은 링크한 문서의 파일 유형을 알려준다.

<a href="https://www.naver.com/"> 네이버 이동 </a>
<br>
<a href="https://www.naver.com/"> 
	<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPTguhV2D25pM3yUQrsa_kDKt6U8llBLWLGg&usqp=CAU"> 
</a>
<br>
<a href="https://www.naver.com/" target="_blank"> _blank </a>
<br>
<a href="https://www.naver.com/" target="_self"> _self </a>
<br>
<a href="https://www.naver.com/" target="_parent"> _parent </a>
<br>
<a href="https://www.naver.com/" target=" _top"> _top </a>

네이버 이동

_blank
_self
_parent
_top

- a 태그로 한페이지에서 다른 페이지로 이동하는 방법 말고 한 페이지 내에서도 이동할 수 있는 방법이 있다. href속성에 '#이동할태그ID'를 넣으면 해당 요소로 이동이된다.

<a href="#anchorName"> 이동 </a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="anchorName">wow</div>

이동

wow

 

<map>, <area> 태그

- 위에서 하나의 이미지를 클릭하면 naver로 이동했다. 근데 이미지의 클릭하는 위치에 따라 다른 링크로 갈 수 도있다.

- <map> 태그 안에 사진내에서의 링크를 걸을 지역과 이동할 홈페이지를 area태그로 지정한다.

- area의 shape 속성은 사진 내에서 링클를 걸을 지역을 직사각형으로 할지 원형으로 할지 모양을 지정해주는거다. rect가 직사각형이고 circle이 원형이다.

- area의 coords 속성은 링크로 사용할 영영의 시작 좌표와 끝 좌표를 지정한다. 좌표는 픽셀단위로 한다. 예를들어 가로 200픽셀 세로300 픽셀인 그림이 있다. 사진을 절반으로 나눠서 오른쪽 지역만 링크를 걸고싶으면 (100, 0)에서 (200,300)으로 지정해주면 된다. 왼쪽을 걸고 싶으면 (0,0)에서 (100,300)이 된다. 이 좌표정보를 한번에 coords에 넣어주면 된다. 미텡 예시 소스 보면 이해됨

<map name="goMap">
	<area shape="rect" coords="0,0,136,183" href="https://www.naver.com/">
    <area shape="rect" coords="137,0,273,183" href="https://just-do-it-man.tistory.com/">
</map>


<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPTguhV2D25pM3yUQrsa_kDKt6U8llBLWLGg&usqp=CAU" 
usemap="#goMap">