#4-3. HTML 링크(link) 설정 방법(<a>)

# html 에서 링크(link)를 설정하는 방법과 <a> tag의 target 속성, 링크의 상태 등을 설명한다.



# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

1. HTML 링크(link)

 

---

 

1) 문법

<!-- a 태그 -->
<a href="/html/intro">
  <h2>이 링크를 클릭하세요</h2>
</a>

 

---

 

2) target 속성

<a>태그의 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>

 

---

 

3) 링크의 상태

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

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

**text-decoration 속성을 none으로 설정시 밑줄이 없는 상태로 나타납니다.

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

 

---

 

4) 페이지 책갈피(bookmark)

<a>태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있습니다.
우선 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성합니다.
그 다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됩니다.

<a href="#bookmark"><p>제목 3으로 이동</p></a>
...
<h2><a name="bookmark"></a>제목 3</h2>

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.