html 하이퍼링크

HTML 링크 - 하이퍼 링크

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

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

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

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

HTML 링크 - 구문

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

<a href="url"> 링크 텍스트 </a>

예

<a href="http://www.w3schools.com/html/"> HTML 자습서 방문 </a>

직접 해보기»

href 속성은 링크의 대상 주소 (http://www.w3schools.com/html/)를 지정합니다.

링크 텍스트는 보이는 부분입니다 (HTML 자습서 참조).

링크 텍스트를 클릭하면 지정된 주소로 이동합니다.

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

지역 링크

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

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

예

<a href="html_images.asp"> HTML 이미지 </a>

직접 해보기»

HTML 링크 색상

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

방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다.

방문한 링크에 밑줄이 그어지고 자주색입니다.

활성 링크에는 밑줄이 그어지고 빨간색으로 표시됩니다.

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

예

<스타일>

a : 링크 {색상 : 녹색; 배경색 : 투명; 텍스트 장식 : 없음}

a : 방문한 {color : pink; 배경색 : 투명; 텍스트 장식 : 없음}

a : hover {color : red; 배경색 : 투명; 텍스트 장식 : 밑줄}

a : 활성 {색상 : 황색; 배경색 : 투명; 텍스트 장식 : 밑줄}

</ style>

HTML 링크 - 대상 속성

target 속성은 링크 된 문서를 여는 위치를 지정합니다.

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

_blank - 새 창이나 탭에서 링크 된 문서를 엽니 다.

_self - 클릭 한 것과 동일한 창 / 탭에서 링크 된 문서 열기 (기본값)

_parent - 링크 된 문서를 부모 프레임에 엽니 다.

_top - 링크 된 문서를 창 전체에서 엽니 다.

framename - 명명 된 프레임에 링크 된 문서를 엽니 다.

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

예

<a href="http://www.w3schools.com/" target="_blank"> W3Schools 방문하기 </a>

직접 해보기»

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

예

<a href="http://www.w3schools.com/html/" target="_top"> HTML5 자습서 </a>

직접 해보기»

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

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

예

<a href="default.asp">

  <img src = "smiley.gif"alt = "HTML 자습서"style = "width : 42px; height : 42px; border : 0;">

</a>

직접 해보기»

참고 : border : 0; IE9 (및 이전 버전)가 이미지 주위에 테두리를 표시하지 못하도록 (이미지가 링크 일 때) 추가됩니다.

HTML 링크 - 북마크 만들기

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

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

북마크를 만들려면 먼저 북마크를 만든 다음 북마크에 링크를 추가해야합니다.

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

예

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

<h2 id = "tips"> 유용한 팁 섹션 </ h2>

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

<a href="#tips"> 유용한 팁 섹션 방문 </a>

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

예

<a href="html_tips.html#tips"> 유용한 팁 섹션 방문 </a>

직접 해보기»

외부 경로

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

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

예

<a href="http://www.w3schools.com/html/default.asp"> HTML 자습서 </a>

직접 해보기»

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

예

<a href="/html/default.asp"> HTML 자습서 </a>

직접 해보기»

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

예

<a href="default.asp"> HTML 자습서 </a>

직접 해보기»

HTML 파일 경로 장에서 파일 경로에 대한 자세한 내용을 볼 수 있습니다.

장 요약

<a> 요소를 사용하여 링크 정의

href 속성을 사용하여 링크 주소를 정의하십시오.

대상 속성을 사용하여 링크 된 문서를 열 위치를 정의하십시오.

이미지를 링크로 사용하려면 <img> 요소 (<a> 내부)를 사용하십시오.

id 속성 (id = "value")을 사용하여 페이지에 책갈피를 정의하십시오.

책갈피에 연결하려면 href 속성 (href = "# value")을 사용하십시오.