모바일웹에서 전화걸기 링크 넣는 방법

블로그를 사업용으로 사용하시는 분들의 경우, 사업장으로 바로 전화연결을 할 수 있는 링크가 있다면, 사용자에게 좀 더 편리한 접근성을 부여하게 됩니다. 개인의 경우에도 이메일 등이 링크로 되어 있어서 바로 메일을 작성할 수 있는 화면으로 넘어가게끔 하는 것도 마찬가지구요. 반응형홈페이지의 경우 모바일 화면도 고려해야하기 때문에, 전화번호나 이메일에 이러한 링크를 넣어주시는 것이 좋습니다. 그럼 어떻게 하면 전화걸기 등의 링크를 넣을 수 있는지 알아보도록 하겠습니다.

먼저 이렇게 바로 전화걸기, 문자 또는 이메일 등을 보낼 수 있도록 하는 방법은 2가지가 있습니다. 첫번째는 HTML링크 태그를 활용하는 방법이고, 두번째는 div의 onclick 속성을 이용하는 방법입니다. 두 방식의 차이점은 링크태그방식은 링크표시가 되기 때문에 사용자가 링크임을 알 수 있는 반면에, div의 onclick 속성을 이용하면, 일반 텍스트와 동일하게 보이기 때문에, 사용자가 링크임을 알기가 어렵습니다. 양자간의 일장일단이 있으므로, 원하시는 방식으로 사용하시면 되겠습니다.

링크를 이용하는 방법

1. 전화걸기 링크

전화걸기 링크를 사용하고 싶은 경우, 블로그 에디터에서 HTML모드 작성으로 바꾼 다음에, 아래 코드를 복사해서 붙여넣고, 전화번호와 문구만 수정해서 사용하면 됩니다.

<a href="tel:전화번호 입력">문구 또는 이미지 삽입</a>

<예제> 

1) 문자형

기상청 날씨 (전화)

2) 이미지형

2. 문자보내기 링크

<a href="sms:전화번호 입력">문구 또는 이미지 삽입</a>

<예제>

1) 문자형

문자보내기

2) 이미지형

3. 이메일보내기 링크

<a href="mailto:이메일주소 입력">문구 또는 이미지 삽입</a>

<예제>

1) 문자형

info@widbee.com

2) 이미지형

div의 onclick 속성을 이용하는 방법

1. 전화걸기

<div onclick="location.href='tel:전화번호 입력'">문구 또는 이미지 삽입</div>

<예제> 

모바일 화면에서 아래 텍스트와 이미지를 클릭해보세요.

1) 문자형

기상청 현재날씨(131)

2) 이미지형

2. 문자보내기

<div onclick="location.href='sms:전화번호 입력'">문구 또는 이미지 삽입</div>

<예제> 

모바일 화면에서 아래 텍스트와 이미지를 클릭해보세요.

1) 문자형

010-1234-5678 문자보내기

2) 이미지형

3. 이메일보내기

<div onclick="location.href='mailto:이메일주소 입력'">문구 또는 이미지 삽입</div>

<예제> 

모바일 화면에서 아래 텍스트와 이미지를 클릭해보세요.

1) 문자형

info@widbee.com 이메일 보내기

2) 이미지형