[HTML] 모바일웹에서 전화걸기, 문자보내기, 메일보내기

 

 

모바일 웹을 개발하면서 특정 문자와 이미지를 누르면 바로 전화, 영상통화, 문자, 이메일로 연결되는 기능을 구현하기 위한 방법을 알아보겠습니다. 

 

 

<a> 태그와 onclick 이벤트 두가지 방법으로 가능합니다.

 

기본적으로 방법은 동일하고, 앞에 링크방법과 콜론(:)을 붙여주면 됩니다.

 

 

---

전화 걸기 링크

 

tel

<a href="tel:전화번호"> 표시할 문자 혹은 <img>태그 </a>

<!-- onclick만 먹는다면 button 등으로 대체 가능 -->
<div onclick="document.location.href='tel:전화번호'"></div>

 

아이폰의 경우 a태그나 onclick없이도 전화번호 형식의 문자는 자동으로 전화로 링크 가능합니다.

이를 방지하기 위해 메타태그가 걸려있을 수 있습니다. 아래 태그가 있다면 자동링크는 되지 않습니다.

 

<!-- IOS 전화번호 자동링크 방지 태그 -->
<meta name="format-detection" content="telephone=no">

 

---

영상통화 걸기 링크

 

tel-av

<a href="tel-av:전화번호"> 표시할 문자 혹은 <img>태그 </a>

<!-- onclick만 먹는다면 button 등으로 대체 가능 -->
<div onclick="document.location.href='tel-av:전화번호'"></div>

 

---

문자 보내기 링크

 

sms

<a href="sms:전화번호"> 표시할 문자 혹은 <img>태그 </a>

<!-- onclick만 먹는다면 button 등으로 대체 가능 -->
<div onclick="document.location.href='sms:전화번호'"></div>

 

---

메일 보내기 링크

 

mailto

<a href="mailto:메일주소"> 표시할 문자 혹은 <img>태그 </a>

<!-- onclick만 먹는다면 button 등으로 대체 가능 -->
<div onclick="document.location.href='mailto:메일주소'"></div>

 

---