HTML 링크

HTML 링크 - 하이퍼 링크

HTML 링크는 하이퍼 링크입니다.

링크를 클릭하여 다른 문서로 이동할 수 있습니다.

링크 위에서 마우스를 움직이면 마우스 화살표가 조금 움직입니다.

※참고 : 링크는 텍스트 일 필요는 없습니다. 이미지 또는 다른 HTML 요소가 될 수 있습니다.※

HTML 링크 - 구문

HTML에서 링크는 <a> 태그 로 정의 됩니다.

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

HREF 속성은 링크 목적지 주소를 지정한다.

※참고 : 하위 폴더 주소에 슬래시가 없으면 서버에 두 개의 요청을 생성 할 수 있습니다. 많은 서버가 자동으로 슬래시를 주소에 추가 한 다음 새 요청을 만듭니다.※

지역 링크

위의 예에서는 절대 URL (전체 웹 주소)을 사용했습니다.

로컬 링크 (동일한 웹 사이트에 대한 링크)는 상대 URL (http : // www ....없이)으로 지정됩니다.

<a href="html_images.asp">HTML Images</a>

HTML 링크 색상

기본적으로 링크는 다음과 같이 표시됩니다 (모든 브라우저에서).

• 방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다.
• 방문한 링크에 밑줄이 그어지고 자주색입니다.
• 활성 링크에는 밑줄이 그어지고 빨간색으로 표시됩니다.

스타일을 사용하여 기본 색상을 변경할 수 있습니다.

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

HTML 링크 - 대상 속성

대상 속성은 링크 된 문서를 열 위치를 지정합니다.

대상 속성은 다음 값 중 하나를 가질 수 있습니다.

• _blank - 새 창이나 탭에서 링크 된 문서를 엽니 다.
• _self - 클릭 한 것과 동일한 창 / 탭에서 링크 된 문서를 엽니 다 (기본값).
• _parent - 링크 된 문서를 부모 프레임에서 엽니 다.
• _top - 링크 된 문서를 창 전체에서 엽니 다.
• framename - 명명 된 프레임에 링크 된 문서를 엽니다.

이 예제는 새 브라우저 창 / 탭에서 링크 된 문서를 엽니다.

<a href="https://hading.tistory.com/" target="_blank">Visit Hading's blog!</a>

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

HTML 링크 - 이미지를 링크로 사용

이미지를 링크로 사용하는 것이 일반적입니다.

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

※참고 :  border : 0; IE9 및 이전 버전에서 이미지 주위에 테두리가 표시되지 않도록 추가되었습니다.( 이미지가 링크 일 때)※

HTML 링크 - 북마크 만들기

HTML 책갈피는 독자가 웹 페이지의 특정 부분으로 이동할 수있게하는 데 사용됩니다.

웹 페이지가 너무 길면 책갈피가 유용 할 수 있습니다.

책갈피를 만들려면 먼저 책갈피를 만든 다음 해당 책갈피에 대한 링크를 추가해야합니다.

링크를 클릭하면 페이지가 책갈피가있는 위치로 스크롤됩니다.

먼저 id 속성이있는 책갈피를 만듭니다.

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

그런 다음 동일한 페이지 내에서 북마크에 대한 링크를 추가하십시오 ( "유용한 팁 섹션").

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

또는 다른 페이지에서 북마크 ( "유용한 팁 섹션")에 대한 링크를 추가하십시오.

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

외부 경로

외부 페이지는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.

이 예에서는 전체 URL을 사용하여 웹 페이지에 연결합니다.

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

이 예제는 현재 웹 사이트의 html 폴더에있는 페이지로 연결됩니다.

<a href="/html/default.asp">HTML tutorial</a>

이 예는 현재 페이지와 같은 폴더에있는 페이지로 연결됩니다.

<a href="default.asp">HTML tutorial</a>