<a> 태그

HTML 태그중 자주 쓰이는 태그인 <a> 앵커 태그!에 대하여 공부해 보았다.

<a> 태그의 속성에는 href를 꼭 써줘야한다!

<a> 용도는 4가지 정도가 있다.

1. 웹 URL로 이동

우리가 일반적으로 사용하는 <a>의 용도이다.

<p>
<a href="www.naver.com"> 이 텍스트를 클릭하시면 페이지로 이동합니다. </a>
</p>

결과: 이 텍스트를 클릭하시면 페이지로 이동합니다.

2. 페이지 내 이동

html페이지가 너무 길어지면, <a>를 이용해서 html 페이지에서 자신이 원하는 어딘가로 이동할수 있다.

<a href="#hello"> 이 텍스트를 클릭하시면 id값이 hello인 태그로 이동합니다.</a>

결과: 이 텍스트를 클릭하시면 href로 이동합니다.

3. 메일 보내기

가끔 어떤 버튼을 누르면 바로 메일 보내는 페이지로 이동 할때가 있는데 그때도 <a>를 사용할수 있다.

<a href="mailto:kokyusik91@naver.com">이 텍스트를 클릭하시면메일 보낼수 있습니다.</a>

결과: 이 텍스트를 클릭하시면 메일 보냅니다.

4. 전화걸기

모바일에서 어떤 버튼을 누르면 바로 전화 걸기로 이동하는 것 역시 <a>를 이용 할 수 있다. (대단한 기능같다... 태그 하나로 그런 기능을 구현 할 수 있다니)

<a href="tel:01093472560">번호를 누르시면 전화를 걸수 있습니다.</a>

결과: 0109347250

5. 추가 속성!

<a> 를 사용하여, 클릭했을때 다른 페이지로 이동할때 현재 페이지가 아닌 새로운 창에서 열리게 할수 있다.
바로 target="_blank" 속성을 추가로 붙이면된다.

<a href="www.naver.com" target="_blank">이 텍스트를 클릭하시면 새로운 페이지로 새 창에서 열리게 할 수 있습니다.</a>

결과: 새 창에서 열리는 페이지

html페이지를 작성하다 보면, <a> 태그를 정말 많이 사용한다.
특히 페이지의 네비게이션 바 같은거나, 어떤 사진같은 것을 클릭했을때 다른페이지로 이동하는 등등, 생각없이 href만 붙여서 사용했는데, 조금 더 다양한 기능들이 있는 것 같다.
추가로 페이지 내의 이동하는 부분은 이번에 처음 알게 되었다!