..

Search

15) 링크

HTML 링크


HTML 링크(Link)

오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다.

이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현합니다.

문법

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

 

<a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.

<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다.

 

예제

<a href="/html/intro">

    <h2>이 링크를 클릭해 보세요!</h2>

</a>

코딩연습 ▶


target 속성

<a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다.

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

 

예제

<h2><a href="/html/intro" target="_blank">blank</a></h2>

<h2><a href="/html/intro" target="_self">self</a></h2>

<h2><a href="/html/intro" target="_parent">parent</a></h2>

<h2><a href="/html/intro" target="_top">top</a></h2>

<h2><a href="/html/intro" target="myframe">myframe</a></h2>

 

<iframe name="myframe" style="width:50%; height: 330px"></iframe>

코딩연습 ▶

 

HTML 프레임(frame)에 대한 더 자세한 사항은 HTML iframe 요소 수업에서 확인할 수 있습니다.

 

HTML iframe 요소 수업 확인 =>


링크의 상태(state)

HTML 링크의 상태는 다음과 같이 네 가지로 구분할 수 있습니다.

링크의 상태 설명
link 아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited 한 번이라도 방문한 적이 있는 상태
hover 링크 위에 마우스를 올려놓은 상태
active 링크를 마우스로 누르고 있는 상태

 

웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같습니다.

 

- 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경됩니다.

- visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경됩니다.

- active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경됩니다.

 

예제

<style>

    a:link    { color: teal; }

    a:visited { color: maroon; text-decoration: none }

    a:hover   { color: yellow; text-decoration: none }

    a:active  { color: red; text-decoration: none }

</style>

코딩연습 ▶


페이지 책갈피

<a>태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있습니다.

우선 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성합니다.

그다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됩니다.

예제

<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>

...

<h2><a name="bookmark"></a>제목 3</h2>

코딩연습 ▶


연습문제