HTML 하이퍼 링크 사이트 연결 - a href

웹사이트에서 글자를 누르면 다른사이트로 이동하는 것을 볼수 있습니다.
이번시간에는 HTML의 중요한 기능중 하나인 하이퍼링크 기능에 대해서 알아보도록 하겠습니다.

 

1. 하이퍼 링크 기본문법

<a href="링크주소">HTML 링크</a>

네이버와 다음 웹사이트로 연결하는 구문입니다.

<a href="https://www.naver.com"><h2>네이버로 연결</h2> </a>
<a href="https://www.daum.net"><h2>다음으로 연결</h2> </a>

 

 

2. target 속성값

_blank : 링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
_self : 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정)
_parent : 링크로 연결된 문서를 부모 프레임(frame)에서 오픈.
_top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) 이름 : 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

<h2><a href="https://www.daum.net"_blank">blank</a></h2>

<h2><a href="https://www.daum.net" target="_self">self</a></h2>

<h2><a href="https://www.daum.net" target="_parent">parent</a></h2>

<h2><a href="https://www.daum.net target="_top">top</a></h2>

<h2><a href="https://www.daum.net" target="myframe">myframe</a></h2>

<iframe name="my_frame" style="width:60%; height: 500px"></iframe>

 

 

3. 링크의 상태(색상 변경가능)

link : 아직 한 번도 방문한 적이 없는 상태로 기록이 쿠키에 없어야 한다(기본설정값 : 밑줄, 파란색)
visited : 한 번이라도 방문한 적이 있는 상태 (밑줄, 보라색)
hover : 링크 위에 마우스를 올려놓은 상태
active : 링크를 마우스로 누르고 있는 상태 (밑줄, 빨간색)

<style>
    a:link    { color: green; }
    a:visited { color: yellow; text-decoration: none }
    a:hover   { color: red; text-decoration: none }
    a:active  { color: pink; text-decoration: none }
</style>

<hr>

<h1>링크의 상태를 표시합니다.</h1>
<h2><a href="https://www.yahoo.com">방문 전 초록색</a></h2>
<h2><a href="https://www.daum.net">방문 후 노란색</a></h2>
<h2><a href="https://www.daum.net">마우스 올려놓을시 빨간색</a></h2>
<h2><a href="https://www.daum.net">링크를 마우스로 누르고있는중 분홍색</a></h2>
<hr>

4. 책갈피 기능

이 기능은  해당 단어 클릭시
내가 설정해 놓은 <a> 태그 속성 값으로 이동하는 기능입니다.

<h1>페이지 책갈피 바로가기</h1>
<a href="#page_mark_10"><p>클릭시 제목 10으로 이동됩니다.</p></a>

<h2>제목 1</h2>

<h2>제목 2</h2>

<h2>제목 3</h2>

<h2>제목 4</h2>

<h2>제목 5</h2>

<h2>제목 6</h2>

<h2>제목 7</h2>

<h2>제목 8</h2>

<h2>제목 9</h2>

<h2><a name="page_mark_10"></a>제목 10</h2>

이상으로 HTML 하이퍼 링크 관련된
<a> 테그의 다양한 기능에 대해서 알아보았습니다.