[html] 링크(link), 하이퍼링크(Hyperlink) 걸기

HTML에서 링크(link) 걸기

인터넷에서 텍스트나 이미지를 클릭했을 때

다른 페이지로 이동하는 기능을 구현하는 방법을 알아보도록 하겠다.

See the Pen 하이퍼링크 by anna (@hianna) on CodePen.

이 하이퍼링크 기능을 구현하기 위해서는

위와 같이 <a> 태그와 그 안의 속성들을 사용한다.

<a>

<a>는 'anchor', 즉, '닻'이라는 뜻이다.

우리는 보통 인터넷 서핑, 웹서핑 이라는 말을 많이 쓴다.

인터넷, 정보의 바다를 항해한다고도 표현한다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어진다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용한다.

항해를 하기 위한 닻.

href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현한다.

href는 'Hypertext Reference'의 약자이다.

target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 준다.

위의 예에서는 'target'을 '_blank'로 지정하였다.

target을 '_blank'로 지정하면 새로운 창 또는 탭에 링크된 페이지를 보여준다.

그래서 위의 예를 클릭하면 새로운 브라우저 탭 또는 창이 뜨고,

그 곳에 링크된 페이지가 뜨게 된다.

아무것도 지정하지 않으면 디폴트로 현재 창에 클릭한 페이지가 보여지게 된다.

그렇다면 target 속성에 써 줄 수 있는 항목은 어떤 것들이 있을까?

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

'_parent', '_top', '페이지를 띄울 프레임 이름' 항목은

프레임에 대해서 알아야 하므로,

일단 모르더라도 패스!

텍스트

마지막으로 <a>태그와 </a>태그 사이에 화면에 보여질 텍스트를 적어주면 된다.

이미지를 클릭했을 때 해당 페이지로 이동하고 싶다면

위의 예에서 텍스트가 들어간 <a>와 </a>태그 사이에 이미지를 삽입하면 된다.