[HTML] a tag(a 태그) 사용 및 활용법(전화걸기, 문자보내기, 메일보내기)

안녕하세요. 소다맛사탕 입니다.

오늘은 하이브리드앱(hybrid app) 또는 모바일웹이라 불리는 화면에서

a 태그 속성 href에 적용가능한 전화걸기, 문자보내기, 메일보내기를 간단히 정리하려고 합니다.

href 는 링크로 이동할 수 있는 URL을 지정할 수 있으며, 전화번호, 이메일, 또는 문자로 연결하는 방법도 가지고 있다.

 

1. 이메일 주소에 연결하는 방법

<a href="mailto:test123@example.com">메일보내기</a>

a 태그 속성 href에 'mailto:메일주소'를 선언하면 메일을 보낼수 있는 이벤트가 발생합니다.

 

1-1. 메일 제목 미리 넣기

<a href="mailto:test123@example.com?subject=테스트입니다.">메일보내기</a>

파라미터에 subject를 선언하고 텍스트를 입력하면 메일의 제목이 미리 입력됩니다.

 

1-2. 메일 내용 미리 넣기

<a href="mailto:test123@example.com?body=내용본문입니다.테스트">메일보내기</a>

파라미터에 body를 선언한후 텍스트 입력시 메일의 본문 내용이 입력됩니다.

 

 

2. 전화 번호에 연결하는 방법

<a href="tel:01012341234">전화 걸기</a>
<a href="tel:010-1234-1234">전화 걸기</a>
<a href="tel:+국가번호10-1234-1234">국제전화번호 걸기</a>

href에 'tel:전화번호'를 선언할시 전화를 걸수 있는 이벤트가 발생합니다.

그리고 국제전화번호의 경우 앞에 +국가번호를 선언하면 걸리게 됩니다.

 

3. 문자 보내기에 연결하는 방법

<a href="sms:01012341234">문자보내기</a>

일반적으로 문자를 보내는 선언도 전화 번호에 연결하는 것과 마찬가지로

href에 'sms:전화번호'를 입력하면 문자보내기 이벤트가 발생합니다.

 

3-1. 문자 내용 미리 넣기

<a href="sms:01012341234?body=테스트입니다.">문자보내기</a>

또한, 위의 메일 내용 미리넣기 처럼 파라미터에 body를 선언한후 텍스트를 입력해 놓으면

문자보내기의 기본내용이 지정됩니다.

 

 

모바일웹(앱) 다른 말로는 하이브리드앱은 네이티브앱과 다르게

안드로이드나 ios를 모르더라도 쉽게 개발하고 적용할 수 있기때문에

기본적으로 사용할 수 있는 옵션이나 기능은 찾아보면서 알아가는게 좋다고 생각합니다.