[HTML, CSS] - HTML 링크

 

---

---

 

<a></a>

하이퍼링크

 

href 속성

클릭시 연결할 페이지나 사이트의 URL 주소를 명시

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

 

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

• _self : 현재 프레임(frame)에서 오픈 (기본값)
• _blank : 새 창이나 새 탭에서 오픈.
• _parent : 부모 프레임(frame)에서 오픈.
• _top : 현재 창의 가장 상위 프레임(frame)에서 오픈.
• 프레임이름 : 지정된 프레임(frame)에서 오픈.

 

링크의 상태(state)

<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>

• • link : 한 번도 방문한 적이 없는 상태 (기본설정), 밑줄&텍스트 색상(파란색)
  • visited : 한 번이라도 방문한 적 있는 상태 , 밑줄&텍스트 색상(보라색)
  • hover : 링크 위에 마우스를 올려놓은 상태 
  • active : 링크를 마우스로 누르고 있는 상태, 밑줄&텍스트 색상(빨강색)

 

책갈피

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

작성한 name 속성값을 이용하여 다른 <a>태그에서 링크 걸기

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

 

---