[HTML#06] HTML A태그

A태그는 하이퍼링크(hyperlink)를 만드는 태그이다.

하이퍼링크는 어떤 버튼이나 무언가를 눌렀을때 링크를 따라 다른 페이지와 연결되어 들어가게 되는 것이다.

다른 페이지와 연결외어있고 누르면 이동이 가능하다.

<a></a>와 같이 사용하며, 범위가 있는이유는 태그 사이에 글자가 한 개, 두 개, 몇 개가 들어갈지 모르기 때문이다.

자주 사용하는 옵션, 속성(attribute)으로는 href 이다. 누르면 이동할 주소를 작성하는 것이다.

<a href="주소">img태그 학습 페이지</a> 

와 같이 사용하면 출력창에는 "img태그 학습 페이지"글자가 있고, 그 글자를 누르면 원하는 주소로 이동하게 되어있다.

 

그 외에는 title이있다. title은 마우스를 올리면 표시될 글자이다.

<a href="주소" title="안녕~">img태그 학습 페이지</a>

하면 주소에 커서를 가져다가 대면 "안녕~"이라는 문구가 보인다.

 

예제) 다음 페이지로 이동할 수 있도록 링크 구현.

-참고 : 이미지에도 하이퍼링크 설정이 가능

 

1.네이버

2.다음

 

그럼 우리는

<a href="https://www.naver.com/"> Naver</a>

<br><br>

<a href="https://www.daum.net/"> Daum</a>

이렇게 작성하면 된다. 보통 www.naver.com이나 www.daum.net을 입력하는 경우가 많을텐데, 

내 사이트가 아니기 때문에, 그 사이트의 전체 주소를 적어주어야한다.

 

또한 이미지로 하이퍼링크를 걸어 사용할 수 있는데, 네이버 마크를 아까 이미지 저장 폴더에 다운받아서,

<a href="https://www.naver.com/"> <img src="./저장폴더/네이버이미지" width="100" height="100"> </a>

해주면 이미지에 하이퍼링크가 걸린다. 이미지가 클 경우 width와 height를 이용하여 할 수 있는데, 숫자에 꼭 ""큰따옴표나 ''작은 따옴표를 해주어야한다. 따옴표가 없어도 되는데 java와 헷갈려서 나중에 실수할 수 있기때문이다.(선택사항)