[HTML5] 하이퍼링크 태그 <a>

HTML은 하이퍼 텍스트 마크업 랭귀지 입니다.

하이퍼 텍스트란 사용자의 선택에 따라서 특정 정보로 이동할 수 있도록 조직된 문서를 칭합니다.

웹 페이지에서 다른 웹 페이지로 이동하는 기능은 자주 사용하게 될 기능이니까 꼭 알아둬야 합니다.

a태그는 Anchor를 의미하며 다른 웹페이지나 웹 페이지 내부의 특정 위치로 이동하는 것에 쓰입니다.

기본적인 사용법은

<a href="http://www.naver.com">네이버로 이동하기</a>

이런식으로 작성하게 되면 네이버로 이동하는 링크를 a태그 내부에 있는 범위를 클릭 할 시 이동하게 됩니다.

네이버로 이동하기

만약 로컬 폴더에 둔 홈페이지의 경우 링크를 두면 되겠습니다.

예를 들어서 같은 폴더의 page2.html 이라는 문서로 이동하고 싶으면

<a href="page2.html>두 번째 페이지로 이동</a>

이런식으로 작성하면 되겠습니다.

만약 문서 내부에서 특정한 위치로 이동하고 싶다면, id 속성을 이용하여야 합니다.

만약 문서의 최 상단으로 이동하고 싶다면 body태그 내에 가장 맨 윗줄에 있는 태그에다가 id속성을 추가하거나 아니면 아무 내용도 없는 태그를 만들고 나서 거기다가 id속성을 넣은 다음에 시작하여야 합니다.

여기서 id 요쇼는 문서 전체에서 같은 이름을 가진 것이 단 1개여야 합니다.

HTML문서 내에서만 활용 시에 별 문제를 못느끼지만, 나중에 자바스크립트를 이용하게 되면 문제가 생기기 때문에 안됩니다.

저 같은 경우에는 이 포스트의 맨 윗줄에다가

<span id="in_post_style__top"></span>

이라는 태그를 작성하였습니다.

span 태그는 별 기능은 하지 않습니다만, 자세한 설명은 생략하고 저는 이 태그를 사용하겠습니다.

여러분들은 아무 태그에다가 id속성을 추가해도 됩니다.

id이름은 영어로 그냥 자유롭게 작성하시면 되며, 저 같은 경우에는 포스트 외에도 티스토리 자체에 많은 태그가 있기 때문에 최대한 단어가 중복되지 않도록 길고 복잡하게 작성하였습니다.

해당 위치로 이동하는 방법은

<a href="#in_post_style__top">최 상단으로 이동</a>

이런식으로 작성하면 됩니다. #은 id를 지정하는 것으로 이용이 됩니다. 나중에 CSS나 JQuery에도 #으로 id를 지정하니까 참고해두시면 좋을 것 같습니다.

결과물은 하단과 같습니다.

최 상단으로 이동

Target 속성

Target 속성으로 그 링크를 어떻게 띄울 것인지를 결정한다.

target 속성의 값에서는 4가지가 있는데

_blank : 새 창으로 연다.

_self : 현재 창에서 이동한다. (target속성을 지정하지 않을 시 기본 값)

_top : 현재의 창이 프레임에 띄워져 있을때. 프레임이 사라지고 한 화면에 링크된 내용을 보여준다.

_parent : 링크 부분이 있는 프레임에 새 프레임을 만들어 링크된 내용을 보여준다.

예시

<a href="http://www.naver.com" target="_blank">새 창으로 네이버 열기</a>

출력

새 창으로 네이버 열기

현재 _top과 _parent는 제대로 확인을 못해봐서 나중에 수정하도록 할 것 이다.