링크 만들기
제자신이 공부 하는 의미 에서 지난 기억을 살려 Link (링크)를 만드는 Html 웹문서를 작성 해 보기로 합니다.
링크는 Html웹 문서에서 가장 널리 많이 애용되고 있는 기술이기 때문에 무조건 알 필요가 있습니다.
그럼 링크 란?
웹문서의 일정한 공간에 다른 문서를 끼워넣는 기술로 문서의 내용을 끼워 넣는 것이 아니라 웹문서가 위치하는 주소만을 끼워 넣어 이주소를 클릭해 내용을 확인 하는 기술을 의미 합니다.
링크에 사용되는 태그는 앵커 태그인 a태그를 사용 합니다.
그리고 속성태그인 href(하이퍼 리퍼런스 프로토콜)태그가 있어야 합니다.
그리고 문서의 주소(URL)가 있어야 하겠죠
그럼 여기서 바로 링크를 만들어 보도록 하겠습니다.
우리에게 링크를 걸수 있도록 웹문서를 만들어준 팀버너스리를 소개한 페이지로 링크를 걸도록 만들어 보겠습니다.
<a href="http://eproo.tistory.com/63#4">팀 버너스리</a>
브라우져 상에는위의 링크를 풀이 해 보면
문서가 위치해 있는 주소는 eproo.tistory.com이라는 이름을 가진 웹페이지 라는걸 알수 있습니다.
그런데 이 홈페이지는 많은 페이지로 이루어져 있고 팀버너스리에 대해 소개한 부분은 한 페이 중 에서도 중간에 위치해 있어 정확히 걸어 주기 위해서는 이 주소에서도 위치한 페이지를 알아야 하겠죠
/63 이렇게 슬러쉬뒤에 오는 숫자가 홈페이 속의 페이지 라는걸 알수 있습니다.
이렇게 페이지 까지 걸어 주는데는 성공 했습니다.
그러나 여기서 이 페이지가 워낙 방대해 원하는 내용을 찾기가 힘들게 됩니다.
이때 사용 하는 것이 네임 태그이며 링크만들기에는 페이지 숫자 다음에 샵 # 기호와 네임을 표시 해주면 됩니다.
위에서는 4라는 이름을 가지고 있으니 #4 라고 표시를 해 주게 되면 그곳으로 정확히 타켓팅 되는 것을 알수 있을 것입니다.
이렇게 페이지의 어느 부분까지 정확히 찾아 가도록 해주는 태그를 앵커 네임 태그라 합니다.
a태그의 앵커 네임태그를 사용하면 용이 하게 타겟팅을 할수가 있는 것 입니다.
링크 하고자 하는 문서 단락의 상단 부분에 <a name="4"></a> 이렇게
표시를 해주면 되겠죠
그리고 거의 모든 태그가 그렇듯 닫힘 태그로 닫는 것을 잊어서는 안됩니다.
저기"4" 표시한 부분에 들어 있는 4자리에 다른 이름을 대치 해 줘도 됩니다.
링크 만들기
예를 들어 <a name="bbq"></a>
이런식으로 자기가 알수 있는 이름으로 바꿔줘도 된다는 이야기죠
만약 이렇게 네임 태그를 만들었다면 이제 타겟팅을 할수 있도록 한번 완성 시켜 보도록 하겠습니다.
<a href="http://eproo.tistory.com/269#bbq">링크 만들기</a>
위 링크 만들기 라는 링크를 클릭 하면 이 페이지 중간쯤에 위치한 링크 만들기 라는 위치로 타켓팅 되는 것을 알수 있습니다.
그리고 웹페이지 주소는 브라우져 상단의 네임 바에서 실시간으로 띄워주니 복사해서 문서의 원하는 링크부분에 붙혀넣기 하면 되겠지요
감사 합니다.
도움이 되셨다면 공감 한번 꾸욱...^^