6. HTML - 하이퍼 링크 태그 <a> (anchor)

현재 사이트에서 다른 웹 문서나 다른 사이트로 연결하는 태그

 

링크가 있는 부분에 마우스를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다.

 

 

<a> 태그 형태

 

<a href="https://www.naver.com">네이버 이동</a>

 

href 속성의 속성값으로 연결할 웹 문서의 경로나, 사이트의 주소를 입력한다.

 

화면에 표시되는 "네이버 이동"을 클릭하면 href 속성 값에 입력한 사이트로 이동하게 된다.

 

 

링크 태그 <a> 에 적용되는 속성

 

속성	속성값	내용
href	웹 문서의 경로, 사이트 주소	이동할 웹 문서 또는 웹 사이트 주소 명시
target	_blank	새 창 또는 새 탭에서 해당 링크 열림
	_self	현재 창에서 해당 링크 열림 (기본값)
	_parent	현재 프레임의 부모 프레임에서 해당 링크 열림 (바로 이전 창)
	_top	최 상위 프레임에서 링크 열림 (최 상위 부모 창)
	framename	해당 프레임 이름을 가진 프레임에서 링크 열림
title	툴팁으로 표시할 내용	마우스 오버 시 표시되는 내용
style	CSS 문법	CSS 로 a 태그의 요소를 꾸민다.

 

 

---

 

href 속성값의 경로 지정

 

ex)

 

 

 

---

 

이미지 태그와 링크 태그 합쳐서 사용하기

 

<a> 태그 안에 <img> 태그를 사용하여 이미지에 링크를 적용할 수 있다.

 

ex)

 

 

 

---

 

버튼 태그에 링크 적용하기

 

버튼에 링크를 적용하려면, 자바스크립트 코드를 사용해야 한다.

 

button 태그의 onclick 속성의 속성값으로는 자바스크립트 문법이 와야하기 때문이다!

 

아래 코드는 클릭 시 현재 웹 페이지와 같은 폴더위치의 index.html 로 링크된다.

 

ex)

 

 

---

 

<a> 태그 북마크

 

id 속성과 <a> 태그를 이용하여 웹 문서의 특정 위치(북마크 위치)로 스크롤 이동을 할 수 있다.

 

우선 이동할 위치의 id 속성값을 지정한 후,

 

<a> 태그의 href 속성값으로 "#아이디명" 으로 지정한다.

 

클릭 시 해당 id 속성 값이 있는 곳으로 이동하게 된다.

 

ex)