[html 응용] 하이퍼 링크 거는 방법 (택스트, 이미지, 새창)

링크란?

하이퍼링크(HyperLink)라고 불리는 이 기능은 인터넷에서 가장 중요한 기능 중의하나로써 실제로 이 기능 덕분에 인터넷이 탄생했다고 해도 과언이 아닐 정도로 중요한 기능이다.

 

보통 인터넷을 서핑 할때 이미지나 택스트에 걸어둔링크들을 클릭함으로 인하여 페이지를 이동한다거나 다른 사이트로 이동한다 하는 기능을 우리는 차이점을 느끼지 못하고 있지만 원하는 정보를 찾아 가는데 가장 빠르고 쉽게 접근할 수 있는 방법이라는 점에서 매우 중요한 의미를 갖고 있다.

 

링크의 대상은 여러 가지가 될 수 있다.

링크를 적용시킬 때 '링크를 건다'는 표현을 하는데 이 링크를 걸게 되는 대상은 크게 2가지 종류가 있다.

 

하나는 텍스트에 링크를 거는 것과 다른 하나는 이미지에 링크를 거는 것이다.

둘 다 HTML은 모두 <A 태그를 사용하지만 대상에 따라 눈에 보이는 차이가 크다.

 

1. 텍스트에 링크 걸기

말 그대로 HTML 웹 페이지에 나타난 글자에 링크를 거는 것으로써 링크의 기본이자 가장 많이 사용되는 기능이다.

HTML : 안녕하세요. <A HREF=http://adme.tistory.com>애드포스팅</A>입니다.

 

위의 HTML을 보면 애드포스팅입니다.라는 단어 부분에만 링크를 걸어놓은 것을 볼 수 있다.

링크를 걸기 위해서는 <A HREF= 형식으로 링크가 시작된다는 것을 알려줘야 하며 링크가 끝나는 부분에 이르러

</A> 라고 닫아줘야 한다.

 

텍스트 링크는 보통 파란색에 밑줄이 그어진 상태로 나타나는데 이를 좀 더 바꿔줄 수도 있습니다.

HTML : 안녕하세요. <A HREF=http://adme.tistory.com><B>애드포스팅</B><FONT COLOR=RED><I>블로그</I>

입니다</FONT></A>

 

여기서 <I>태그는 이탤릭으로 글씨를 약간 오른쪽으로 기울게 만들어줍니다.

 

2. 이미지에 링크 걸기

웹 페이지에 작은 사진이나 베너를 올려놓고 링크를 거는방법이다.

텍스트 링크는 <A HREF 태그 사이에 글자를 두었지만 이미지는 <A HREF 태그 사이에 이미지를 두면 된다.

중요한것은 이미지의 주소를 정확하게 넣으야 되고 이미지 주소가 정확하지 않으면 맥박(X) 으로 나오게 된다.

HTML : <A HREF=http://adme.tistory.com>

<IMG SRC=https://img1.daumcdn.net/thumb/C428x244/?fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fmanage%2Fimages%2Fr3%2Fdefaultimg_02LNB.png></A>

 

 

 

3. 새 창으로 링크 열기

링크를 어느 항목에 거는 것 외에도 링크를 어떻게 열 것인가에 대한 해결책도 있어야 한다.

예를 들어서 한 사이트에서 열심히 내용을 보다가 링크를 클릭했는데 다른 사이트로 넘어가버리면

다시 예전 정보를 보기 위해서 '뒤로'를 눌러야 하는 불편함이 있다.

이를 해결하기 위해서 링크를 클릭하면 새 창으로 해당 링크가 열리게 하여 두 사이트를 번갈아 가며 볼 수 있게 할 수 있다.

 

HTML : <A HREF=http://adme.tistory.com TARGET="_BLANK">

<IMG SRC=https://img1.daumcdn.net/thumb/C428x244/?fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fmanage%2Fimages%2Fr3%2Fdefaultimg_02LNB.png" BORDER="0"></A>

 

위의 HTML 부분을 보면 <A HREF 태그 부분에 위의 처음(택스트,이미지링크)과는 다르게 TARGET 옵션이

들어간 것을 확인할 수 있다.

 

이 옵션은 링크가 어떻게 열릴 것인지를 지정하게 되는데 TARGET 옵션 자체가 없다면 현재 웹 브라우저

창에서 그대로 열리게 되며 위와 같이 _BLANK 옵션을 주게 되면 새 창으로 열리게 된다.