[HTML] a태그로 이메일 및 전화 링크 걸기 | mailto, tel

 

HTML을 통해 클릭시 바로 이메일로 연결이 되고 모바일일 경우 클릭 한번으로 바로 전화를 걸게 해줄 수 있다.
우선 a태그로 링크를 거는 방법중 세 가지의 방법을 간략하게 살펴보자.

 

---

 

사이트 or 페이지 이동

기본적으로 사이트 주소나 내가 만든 파일중에 다른 페이지의 파일로 이동할 수 있다.
가장 많이 사용하는 방식이다.
상대 경로, 절대 경로 가능

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

<!-- or -->

<a href="./theOtherPage.html">The Other Page</a>

 

 

---

 

 

이메일 링크 걸기 : mailto

mailtof:{이메일}을 href에 넣어주면 이메일을 작성할 수 있도록 링크가 생성되어 클릭하면 이동이 가능하다.

<a href="mailto:kkhw1202@gmail.com">send email</a>

 

 

mailto란?

이메일 클라이언트로의 복사 및 입력 과정 없이 사용자들이 특정한 주소로 전자 우편을 보낼 수 있도록 웹사이트의 하이퍼링크를 만들기 위해 사용된다.

 

 

여러개의 주소 지정도 가능

 

<a href="mailto:kkhw1202@gmail.com,test@example.com">send email</a>

 

 

mailto에 사용되는 다양한 양식

 

양식	뜻	예시
mailto:test@example.com	이메일 보낼 곳 (링크)	<a href="mailto:test@example.com">send email</a>
cc=test@example.com	참조되는 이메일	<a href="mailto:test@example.com?cc=test2@example.com">send email</a>
bcc=test@example.com	숨은 참조 이메일	<a href="mailto:test@example.com?bcc=test2@example.com">send email</a>
subject=text(blah blah...)	이메일 제목 설정	<a href="mailto:test@example.com?subject=메일제목입니다">send email</a>
body=text(blah blah...)	이메일 내용 설정	<a href="mailto:test@example.com?body=메일본문입니다.">send email</a>
?	첫번째 매개변수 구분	<a href="mailto:test@example.com?body=메일본문입니다">send email</a>
&	두개 이상 구분	<a href="mailto:test@example.com?subject=메일제목입니다&body=메일본문입니다">send email</a>

 

 

---

 

 

전화번호 링크 걸기 : tel

tel을 이용해 전화번호 링크를 걸 수 있다.
모바일웹에서 링크를 클릭하면 자동으로 연결된다.
웹에서는 반응하지 않는다.

<a href="tel:+123456789">Phone</a>
<a href='tel:010-0000-0000'>Phone</a>