HTML 링크(Links)

« Previous Next Chapter »

링크는 거의 모든 웹페이지에서 나타납니다. 링크는 사용자들이 클릭으로 한 페이지에서 다른 페이지로 이동하게 해줍니다.

HTML 링크 - 하이퍼링크

HTML 하이퍼링크 (or 링크)는 다른 문서로 이동하기 위해서 클릭할 수 있는 요소, 텍스트 또는 이미지입니다.


HTML 링크 - 문법

HTML 에서 링크는 <a>태그로 정의된다: 

<a href="url">link text</a>

Example

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Try it Yourself »
href 속성은 링크의 목적지 주소( https://www.w3schools.com/html/ )를 지정한다.
link text 는 보이는 부분입니다.
link text 에 클릭함으로써 지정된 주소로 이동 된다.
Tip:  "link text" 는 텍스트여야만 할 필요는 없으며, 이미지나 또 다른 HTML 요소가 될 수 있다.

Local Links

위의 예는 절대적(absolute) URL (웹주소 전체)을 사용하고있다.

지역링크(같은 웹사이트로의 링크)는 상대적(relative) URL (http://www... 없이)을 사용한다.

Example

<a href="html_images.asp">HTML Images</a>
Try it Yourself »

HTML Links - Colors and Icons

사용자가 웹페이지에서 링크 위로 커서를 이동하면, 보통 두 가지 일이 일어난다 :

  • 마우스 화살표는 작은 손으로 바뀝니다.
  • 링크 요소의 색이 바뀐다.

기본적으로,  모든 브라우저에서 이 는 다음과 같이 나타납니다:

  • 방문한 적 없는 링크는 밑줄과 파란색
  • 방문한 적 있는 링크는 밑줄과 보라색
  • 활성화된 링크는 밑줄과 빨간색

이러한 기본 값을, style 을 사용하여 변경할 수 있다.

Example

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Try it Yourself »

HTML 링크 - target 속성

target 속성은 링크된 문서가 열릴 곳을 지정한다.

아래의 예는 새 브라우저 창 또는 새 탭에 링크된 문서를 엽니다:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it yourself »
Target Value Description
_blank 새 브라우저 창 또는 새 탭에 링크된 문서를 엽니다
_self 클릭된 곳 과 같은 프레임에 링크된 문서를 엽니다.  (this is default)
_parent 부모 프레임(parent frame)에 링크된 문서를 엽니다.
_top 윈도우의 전체에 링크된 문서를 엽니다.
framename 명 명된 프래임에 링크된 문서를 엽니다.

웹 페이지가 프레임에 닫혀있는 경우에는, 프레임을 깨고 나오게 하기위해서 target="_top" 을 사용할 수 있다.:

아래의 예는 새 브라우저 창 또는 새 탭에 링크된 문서를 엽니다:

Example

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Try it Yourself »

HTML 링크 - 링크로서의 Image

이미지가 링크로 자주 사용된다. :

Example

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

HTML 링크 - id 속성

id 속성은 HTML 문서 안에 즐겨찾기(bookmark) 를 작성하는데 사용될 수 있다.

Tip: 즐겨찾기(bookmark)는 어떤 특별한 방법으로 표시되지 않으며, 사용자에게 보이지 않는다.

Example

 id 속성으로 북마크를 생성한다:

<h2 id="tips">Useful Tips Section</h2>

그리고, 같은 페이지에, 북마크 "Useful Tips Section" 에 대한 링크를 만든다. :

<a href="#tips">Visit the Useful Tips Section</a>

또는, 다른 페이지에서 북마크 "Useful Tips Section"에 대한 링크를 만든다:

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Try it yourself »

Basic Notes - 유용한 Tips

Note: 하위폴더를 참조할 때 항상 슬래시를 추가하시오.  이처럼 링크하면: href="https://www.w3schools.com/html", 서버에 두 가지 요청을 하는 것으로, 서버는 우선 주소에 슬래시를 추가한 다음에 새로운 요청을 생성하게 된다: href="https://www.w3schools.com/html/".

Test Yourself with Exercises !

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

HTML 링크 태그

태그 설명
<a> 하이퍼링크를 정의


« Previous Next Chapter »