HTML 링크

 

html 링크 태그 <a>~</a>

* 기본 정의

<a href="주소">내용</a>

예]

<a href="https://nilgi.tistory.com/">닐기 티스토리</a>

href는 링크 대상 주소를 지정한다.

링크는 텍스트, 이미지 등 모든 대상이 될 수 있다.

 

* 링크 색

방문하지 않은 링크 - 파란색 글씨 + 밑줄

방문한 링크 - 자주색 + 밑줄

활성화된 링크 - 빨간색 + 밑줄

링크의 색상과 밑줄은 스타일 태그로 변경 가능하다.

link : 링크가 걸린 요소

visited : 방문한 링크 대상

hover : 링크에 마우스를 올렸을 때

active : 마우스를 클릭했을 때

* 링크가 열리는 위치 지정

_blank : 새 창

_self : 기본 값으로 링크가 걸린 동일 창

_parent : 상위(부모) 프레임

_top : 전체

_framename : 지정된 프레임

예]

<a href="https://nilgi.tistory.com/" target="_blank">닐기 티스토리</a>

 

* 이미지에 링크 걸다.

예]

<a href="https://nilgi.tistory.com"><img src="image.png"></a>

 

* 링크가 걸린 요소에 마우스를 올렸을 때 설명 나오게.

<a href="https://nilgi.tistory.com" title="링크를 클릭하면 닐기 티스토리로 이동합니다">닐기</a>

 

* 책갈피 링크

같은 문서의 특정 위치로 이동하는 것.

id를 이용.

<a href="#1-1">1. 상세 설명</a>

.

.

<p id="1-1">1-1. 상세 설명 : 이 과목에서는 ...</p>

 

다른 문서의 책갈피

<a href="문서이름#a">내용</a>