w3스쿨즈 HTML(5) - 링크[link]

링크

로컬링크 : 같은 웹 사이트에 대한 링크는 절대URL이 아닌 상대 URL로 기입해도 상관없습니다.

 

타켓 속성 : 링크된 문서를 열 위치를 지정

• _blank : 새 탭
• _self : 현재 탭 (기본설정)
• _parent : 부모 프레임에서 링크 된 문서를 연니다. 
• _top : 링크 된 문서를 창 전체에서 엽니다.

※ 웹 페이지가 프레임에 잠겨 있으면 target = "_ top"을 사용하여 프레임에서 벗어날 수 있습니다.

<a href="https://www.w3schools.com/html/" target="_top">HTML tutorial!</a>

• framename : 어떤 이름으로 정의된 프레임에서 링크 된 문서를 엽니다.

 

이미지 링크

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

※ border: 0을 추가한 이유는 IE9 이하 브라우저에서 이미지 주위에 테두리를 표시하지 않기위해서

 

버튼 링크

<button onclick="document.location = 'default.asp'">HTML Tutorial</button>

버튼을 링크로 사용하려면 JavaScript 코드를 추가해야합니다.

JavaScript를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 작업을 지정할 수 있습니다.

 

링크 타이틀 (툴팁)

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

마우스 갖다 올리면 마우스 화살표 밑에 툴팁

 

링크 상태와 스타일링

HTML 링크는 link, visited, hover, active 여부에 따라 다른 색상으로 표시됩니다.

※ text-decoration: none; 속성은 링크 밑에 밑줄을 지워줍니다.

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

// 이미 방문한 링크일 때
a:visited {
  color: pink;
  background-color: transparent;https://www.w3schools.com/html/html_images.asp
  text-decoration: none;
}

// 마우스를 링크위에 올렸을 때
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

// 링크를 누르고 있을 때
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

</style>

 

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

 

링크버튼와 스타일링

CSS를 사용하여 버튼링크 스타일을 지정할 수도 있습니다.

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

 

링크 북마크

HTML 링크를 사용하여 책갈피를 작성할 수 있으므로 독자는 웹 페이지의 특정 부분으로 이동할 수 있습니다.

<p><a href="#C4">Jump to Chapter 4</a></p>
<h2 id="C4">Chapter 4</h2>