728x90
반응형
핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다.
HTML a태그를 활용해서 전화거는 방법
HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝!
// 예제
<a href="tel:전화번호">전화번호: 123-1234-1234</a>
// 실제 사용 예시
<a href="tel:123-1234-1234">전화번호: 123-1234-1234</a><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 전화걸기 구현하는 방법 예제</title>
</head>
<body>
<a href="tel:123-1234-1234">전화번호: 123-1234-1234</a>
</body>
</html>동작 예시
위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다.
PC에서 href에 tel:전화번호 값을 넣은 a 태그를 클릭하면 아래와 같이 브라우저에서 사용가능한 전화 서비스라고 안내해주는 것을 확인할 수 있습니다.
728x90
반응형
그리드형
'개발 > HTML5' 카테고리의 다른 글
| iOS에서 input에 적용된 shadow 효과 제거하는 방법 (Remove iOS input shadow) (0) | 2020.11.15 |
|---|---|
| input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color) (2) | 2020.10.26 |
| Input 태그 테두리 하이라이트 제거하는 방법 (How to remove the border highlight on an input) (0) | 2020.10.25 |
| HTML에서 가운뎃점 · | middle dot 쉽게 찍는 법 (5) | 2020.10.12 |
| html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5) (3) | 2020.09.08 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
