HTML - 링크

현대 웹 페이지에서는 다른 페이지나 사이트로 연결되는 하이퍼링크(Hyperlink)가 필수 요소로 자리 잡고 있습니다. 하이퍼링크는 보통 "링크(link)"라고 간단히 부르며, HTML에서는 <a> 태그를 사용해 표현합니다. 이 글에서는 HTML 링크의 문법과 속성, 그리고 다양한 활용법을 살펴보겠습니다.

1. 기본 문법

HTML 링크를 만들기 위해 사용하는 기본 구조는 다음과 같습니다.

<a href="링크주소">링크 텍스트</a>

• href 속성: 링크를 클릭했을 때 연결될 페이지나 사이트의 URL 주소를 지정합니다.
• 링크 텍스트: 사용자에게 보이는 링크의 내용을 정의합니다.

2. 예제: 텍스트에 링크 추가

아래는 간단한 링크 예제입니다. 클릭하면 /html/intro 페이지로 이동합니다.

<a href="/html/intro">
    <h2>이 링크를 클릭해 보세요!</h2>
</a>

 

<a> 태그는 텍스트뿐 아니라 제목(<h1>~<h6>), 단락(<p>), 이미지(<img>) 등 HTML의 다양한 요소에 사용할 수 있습니다.

3. target 속성으로 링크 열기 위치 지정

링크가 열리는 위치는 <a> 태그의 target 속성으로 제어할 수 있습니다.

target 값	설명
_blank	새 창 또는 새 탭에서 링크를 엽니다.
_self	현재 창이나 프레임에서 링크를 엽니다 (기본값)
_parent	부모 프레임에서 링크를 엽니다.
_top	가장 상위 프레임에서 링크를 엽니다.
프레임 이름	특정 프레임에서 링크를 엽니다.

 

예제: 다양한 target 속성 사용

<h2><a href="/html/intro" target="_blank">새 탭에서 열기</a></h2>
<h2><a href="/html/intro" target="_self">현재 창에서 열기</a></h2>
<h2><a href="/html/intro" target="_parent">부모 프레임에서 열기</a></h2>
<h2><a href="/html/intro" target="_top">가장 상위 창에서 열기</a></h2>
<h2><a href="/html/intro" target="myframe">특정 프레임에서 열기</a></h2>

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

4. 링크의 상태와 스타일링

HTML 링크는 네 가지 상태를 가질 수 있으며, 상태에 따라 스타일링을 다르게 지정할 수 있습니다.

상태	설명
link	방문하지 않은 상태 (기본값)
visited	사용자가 한 번 방문한 링크
hover	마우스를 링크 위에 올려놓은 상태
active	링크를 클릭하는 순간의 상태

 

링크 스타일 설정 예제

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

 

• 기본 링크: 청록색(teal)과 밑줄 표시
• 방문한 링크: 밤색(maroon)으로 변경되고 밑줄 제거
• 호버 상태: 마우스를 올리면 노란색으로 변경
• 클릭 중: 빨간색으로 표시

5. 페이지 내부 이동(책갈피)

HTML에서는 페이지 내 특정 위치로 이동하는 책갈피(bookmark)를 만들 수 있습니다. 이를 위해 <a> 태그의 name 속성을 사용합니다.

예제: 책갈피로 이동

<!-- 책갈피로 이동할 링크 -->
<a href="#bookmark"><p>책갈피로 이동</p></a>

<!-- 책갈피 위치 지정 -->
<h2><a name="bookmark"></a>이곳이 책갈피입니다!</h2>

 

• 위 코드에서 href="#bookmark"는 name="bookmark" 속성을 가진 태그로 이동하도록 지정합니다.

하이퍼링크는 단순한 페이지 이동 이상의 다양한 활용법을 제공합니다. 적절한 속성과 상태를 활용해 사용자 경험을 개선하고 페이지 내비게이션을 쉽게 구현할 수 있습니다. 오늘 소개한 내용을 바탕으로, 더 나은 링크 디자인을 시도해 보세요!