h08. HTML 링크

HTML 링크

HTML 에서 다른 문서나 그림 등을 링크로 사용할 때는 <a> 태그를 사용합니다.</a>

여기서 href 속성에 이동하려는 주소를 넣습니다.

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

이때 링크를 갖는 글자(네이버)는 눈에 보이는 부분입니다.

링크 글자를 클릭하면, 링크된 주소로 이동합니다.

링크 글자는 반드시 글자일 필요는 없고, 이미지 일 수도 있고, 다른 태그 일수 도 있습니다.

네이버

---

위 예제는 절대 URL 주소입니다.(인터넷 상에 고정된 주소)

반면 동일한 사이트 내에서는 상태 URL 주소를 사용합니다.

즉 "http://www.site_name.com/folder_name/" 부분이 없고 그 아래의 상대적인 경로만 적습니다.

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

---

링크 위로 마우스가 올라가면 두가지 변화가 생깁니다.

마우스 화살표가 작은 손모양으로 바뀌고, 링크의 색상이 바뀝니다.

링크의 색상은 일반적으로 아래와 같습니다.

	방문을 안했을 때 밑줄에 청색
	방문한 곳은 밑줄에 보라색
	살아 있는 링크는 밑줄에 적색

그러나 스타일을 적용하여 기본 색상을 바꿀 수 있습니다.

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

---

HTML 링크에서 target 속성은 링크된 문서를 어디에다 열지를 지정합니다.

target="_blank" 는 링크 문서를 새로운 창에서 엽니다.

<a href="http://www.naver.com/" target="_blank">네이버 새창에서 열기</a>

네이버 새창에서 열기

---

다른 target 속성값은 아래와 같습니다.

	_blank 새창이나 새탭에서 엽니다.
	_self 동일한 프레임에서 엽니다. 기본값입니다.
	_parent 부모 프레임에서 엽니다.
	_top 창의 전체에서 엽니다. 현재의 프레임 부수고 바깥으로 나가려면, target="_top" 을 사용합니다.
	framename 지정된 프레임에서 엽니다.

<a href="http://www.naver.com/" target="_top">네이버 창 전체에서 열기</a>

바로 위 코드는 지금 학습하고 있는 페이지를 나가게 되므로 실습은 별도로 하는 것이 좋겠습니다.

---

이미지도 매우 흔하게 링크로 사용됩니다.

<a href="http://www.naver.com">
<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt="네이버 로고" style="width:210px;height:78px;border:0">
</a>

---

페이지내에 북마크 생성해놓고 그곳으로 이동하도록 링크할 수 있습니다.

북마크는 페이지내에서 특정한 부분으로 이동할 수 있도록 해주는 것인데, 페이지가 매우 길다면 북마크가 유용합니다.

북마크는 먼저 북마크를 해두고, 그 다음 그 북마크에 대한 링크를 생성합니다.

이때 링크를 클릭하면, 페이지가 스크롤되면서 그 북마크로 이동하게 됩니다.

먼저 id 속성으로 북마크를 생성합니다:

<h2 id="b-mark">여기에 북마크를 하였습니다.</h2>

그 다음 아래와 같이 그 북마크("여기에 북마크를 하였습니다.")로 이동하는 링크를 추가합니다.

<a href="#b-mark">클릭하면 북마크로 이동합니다.</a>

아니면 아래와 같이 다른 페이지의 북마크로 이동할 수 있습니다.

<a href="http://www.naver.com/index.html#news_cast2" target="_blank">네이버 뉴스 캐스트로 이동하기</a>

새로운 창에서 뜨니 클릭해 보시기 바랍니다.

네이버 뉴스 캐스트로 이동하기

---

[광고] Udemy 동영상 강의로 보기