모바일 웹 네이티브 컴포넌트 예제

이 페이지에서는 모바일 웹 브라우저에서 네이티브와 유사한 경험을 제공하는 HTML 요소들을 소개합니다.

공통 컴포넌트 (iOS & 안드로이드)

1. 네이티브 입력 필드

일반 텍스트 입력:

일반 텍스트:

전화번호 입력 (숫자 키패드):

전화번호:

이메일 입력 (이메일 키보드):

이메일:

URL 입력 (URL 키보드):

URL:

숫자 입력 (숫자 키패드):

숫자:

날짜 선택 (네이티브 달력):

날짜:

시간 선택 (네이티브 시간 선택기):

시간:

색상 선택 (네이티브 색상 선택기):

색상:

파일 선택 (갤러리 접근):

파일:

카메라 열기:

사진 촬영:

2. 선택 요소

드롭다운 목록 (네이티브 선택기):

드롭다운 선택:

다중 선택 (스크롤 가능한 네이티브 선택기):

다중 선택:

3. 네이티브 액션 연결

전화 걸기:

전화 걸기

문자 보내기:

문자 보내기

이메일 보내기:

이메일 보내기

지도 열기:

서울 위치 보기

4. 미디어 요소

네이티브 비디오 플레이어:

네이티브 오디오 플레이어:

iOS 전용 컴포넌트

1. iOS 스마트 앱 배너

이 메타 태그들은 head 섹션에 포함되어야 합니다

<meta name="apple-itunes-app" content="app-id=APP_ID">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="launch.png">

2. iOS 특화 링크

앱 스토어로 이동:

앱 스토어에서 열기

iOS 앱 열기 (Universal Links 활성화 필요):

앱에서 열기

iOS 앱 스키마로 앱 열기:

앱 스키마로 열기

안드로이드 전용 컴포넌트

1. 안드로이드 스마트 앱 배너

이 메타 태그들은 head 섹션에 포함되어야 합니다

<meta name="google-play-app" content="app-id=com.example.app">
<meta name="theme-color" content="#4285f4">

2. 안드로이드 특화 링크

구글 플레이 스토어로 이동:

플레이 스토어에서 열기

안드로이드 앱 열기 (Intent URL):

앱으로 열기 (Intent)

안드로이드 앱 스키마로 앱 열기: