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는 제대로 확인을 못해봐서 나중에 수정하도록 할 것 이다.

'프로그래밍 > HTML5' 카테고리의 다른 글

[HTML5] 목록 태그  (0) 2016.07.20
[HTML5] 글자 모양 태그  (0) 2016.07.18
[HTML5] 하이퍼링크 태그 <a>  (0) 2016.07.15
[HTML5] 특수 문자 표기  (0) 2016.07.15
[HTML5] HTML의 간단한 소개와 사이트  (0) 2016.07.13
[HTML5] 이미지 삽입 태그 (img)  (0) 2016.07.13

댓글 작성