diff options
Diffstat (limited to 'files/ko/webapi')
| -rw-r--r-- | files/ko/webapi/battery_status/index.html | 75 | ||||
| -rw-r--r-- | files/ko/webapi/detecting_device_orientation/index.html | 273 | ||||
| -rw-r--r-- | files/ko/webapi/index.html | 139 | ||||
| -rw-r--r-- | files/ko/webapi/managing_screen_orientation/index.html | 136 | ||||
| -rw-r--r-- | files/ko/webapi/network_information/index.html | 46 | ||||
| -rw-r--r-- | files/ko/webapi/proximity/index.html | 119 | ||||
| -rw-r--r-- | files/ko/webapi/using_geolocation/index.html | 165 | ||||
| -rw-r--r-- | files/ko/webapi/using_light_events/index.html | 64 | ||||
| -rw-r--r-- | files/ko/webapi/using_web_notifications/index.html | 265 |
9 files changed, 0 insertions, 1282 deletions
diff --git a/files/ko/webapi/battery_status/index.html b/files/ko/webapi/battery_status/index.html deleted file mode 100644 index 12347b0f20..0000000000 --- a/files/ko/webapi/battery_status/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Battery Status API -slug: WebAPI/Battery_Status -tags: - - API - - Apps - - Battery API - - Battery Status API - - Obsolete - - 가이드 - - 개요 - - 모바일 - - 배터리 - - 어플리케이션 -translation_of: Web/API/Battery_Status_API ---- -<div>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</div> - -<p><strong>Battery API </strong>만큼이나 자주 언급되는 <strong>Battery Status API</strong>는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.</p> - -<p>Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.</p> - -<h2 id="예제">예제</h2> - -<p>아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{event("chargingchange")}} 와 {{event("levelchange")}} 이벤트가 발생하면 완료 됩니다.</p> - -<pre class="brush: js notranslate">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; - -function updateBatteryStatus() { - console.log("Battery status: " + battery.level * 100 + " %"); - - if (battery.charging) { - console.log("Battery is charging"); - } -} - -battery.addEventListener("chargingchange", updateBatteryStatus); -battery.addEventListener("levelchange", updateBatteryStatus); -updateBatteryStatus(); -</pre> - -<p>명세서의 예제도 <strong><a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction" title="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">확인</a></strong>해보세요.</p> - -<h2 id="사양">사양</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 데이터의 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하고 pull 요청을 우리에게 보내세요.</div> - -<p>{{Compat("api.BatteryManager")}}</p> - -<h2 id="더보기">더보기</h2> - -<ul> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li> - <li>{{domxref("BatteryManager")}}</li> - <li>{{domxref("window.navigator.battery","navigator.battery")}}</li> -</ul> diff --git a/files/ko/webapi/detecting_device_orientation/index.html b/files/ko/webapi/detecting_device_orientation/index.html deleted file mode 100644 index 664842f66d..0000000000 --- a/files/ko/webapi/detecting_device_orientation/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: 기기 방향 감지하기 -slug: WebAPI/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="요약">요약</h2> - -<p>웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.</p> - -<p>방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다. 이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.</p> - -<p>두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.</p> - -<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2> - -<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p> - -<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.</p> - -<p>방향 이벤트는 다음 네 개의 값을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>이벤트 핸들러 함수는 보통 다음과 같다:</p> - -<pre class="brush: js">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="방향_값_설명">방향 값 설명</h3> - -<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li> -</ul> - -<h3 id="방향_예제">방향 예제</h3> - -<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p> - -<p>자 그럼, 정원에 공이 하나 있다고 상상해보자:</p> - -<pre class="brush: html"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:</p> - -<pre class="brush: css">.garden { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.ball { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:</p> - -<pre class="brush: js">var ball = document.querySelector('.ball'); -var garden = document.querySelector('.garden'); -var output = document.querySelector('.output'); - -var maxX = garden.clientWidth - ball.clientWidth; -var maxY = garden.clientHeight - ball.clientHeight; - -function handleOrientation(event) { - var x = event.beta; // In degree in the range [-180,180] - var y = event.gamma; // In degree in the range [-90,90] - - output.innerHTML = "beta : " + x + "\n"; - output.innerHTML += "gamma: " + y + "\n"; - - // Because we don't want to have the device upside down - // We constrain the x value to the range [-90,90] - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - - // To make computation easier we shift the range of - // x and y to [0,180] - x += 90; - y += 90; - - // 10 is half the size of the ball - // It center the positionning point to the center of the ball - ball.style.top = (maxX*x/180 - 10) + "px"; - ball.style.left = (maxY*y/180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>여기 실제로 실행해 볼 수 있는 예제이다:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p> -</div> - -<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2> - -<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p> - -<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p> - -<p>모션 이벤트는 다음 네 가지 속성을 가진다:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="모션_값_설명">모션 값 설명</h3> - -<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p> - -<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p> - -<ul> - <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li> - <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li> - <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li> -</ul> - -<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p> - -<ul> - <li><code>alpha</code>: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다</li> - <li><code>beta</code>: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다</li> - <li><code>gamma</code>: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다</li> -</ul> - -<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</p> - -<h2 id="스펙">스펙</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3> - -<ol> - <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li> -</ol> - -<h2 id="참고_자료">참고 자료</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> -</ul> diff --git a/files/ko/webapi/index.html b/files/ko/webapi/index.html deleted file mode 100644 index 07c0c99acb..0000000000 --- a/files/ko/webapi/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: WebAPI -slug: WebAPI -tags: - - Apps - - DOM - - Firefox OS - - Mobile - - NeedsTranslation - - TopicStub -translation_of: Web/API -translation_of_original: WebAPI ---- -<p><strong>WebAPI</strong>는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.</p> - -<div class="note"> -<p><strong>Note:</strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> - <dd>현재 네트워크 연결에 대한 연결 속도와 같은 기본 정보를 알려줍니다.</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> - <dd>WebBluetooth API는 기기의 Bluetooth에 로우레벨 접근을 할 수 있게 해 줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> - <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> - <dt><a href="/ko/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a></dt> - <dd>Monitors data usage and exposes this data to privileged applications.</dd> - <dt><a href="/ko/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> - <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd> - <dt><a href="/ko/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd>앱들이 SMS 문자 메시지를 주고 받게 하고, 장치에 저장된 메시지들을 접근하고 관리 하도록 해줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> - <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> - <dd>광센서에 접근할 수 있게 해서 앱이 기기 주변의 밝기를 감지할 수 있게 해 줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> - <dd>배터리의 충전 정보 및 현재 기기가 충전 중인지 여부에 대한 정보를 제공 합니다.</dd> - <dt><a href="/ko/docs/WebAPI/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> - <dd>Provides information about the device's physical location.</dd> - <dt><a href="/ko/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd> - <dt><a href="/ko/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> - <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd> - <dt><a href="/ko/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> - <dd>기기의 방향 변화를 감지하여 알려줍니다.</dd> - <dt><a href="/ko/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> - <dd>화면의 방향 변화를 감지하여 알려줍니다. 앱이 어떤 방향을 선호하는지 지정하는데에도 사용 할 수 있습니다.</dd> - <dt><a href="/ko/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt> - <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd> - <dt><a href="/ko/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> - <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd> - <dt><a href="/ko/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> - <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd> -</dl> - -<p><span class="alllinks"><a href="/ko/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2> - -<dl> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> - <dd>Provides support for writable files with locking support.</dd> - <dt><a href="/ko/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>고성능 검색을 지원하는 클라이언트측의 구조화된 데이터 저장소입니다.</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> - <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2> - -<dl> - <dt><a href="/ko/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> - <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd> - <dt><a href="/ko/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> - <dd>Lets the platform send notification messages to specific applications.</dd> - <dt><a href="/ko/docs/WebAPI/Using_Web_Notifications" title="/ko/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> - <dd>Lets applications send notifications displayed at the system level.</dd> - <dt><a href="/ko/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> - <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd> - <dt><a href="/ko/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> - <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd> - <dt><a href="/ko/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> - <dd>Lets Web content initiate payments and refunds for virtual goods.</dd> - <dt><a href="/ko/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> - <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd> -</dl> - -<dl> - <dt><a href="/ko/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> - <dd>Lets apps receive notifications when the user is not actively using the device.</dd> - <dt><a href="/ko/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> - <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd> - <dt><a href="/ko/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> - <dd>현재 시각을 설정할 수 있게 해 줍니다. 시간대는 <a href="/ko/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>를 이용해서 설정할 수 있습니다.</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">WebAPI community</h2> - -<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p> - -<ul> - <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - -<ul> - <li>The <a href="/ko/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> - <li><a href="/ko/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> - <li><a href="/ko/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/ko/webapi/managing_screen_orientation/index.html b/files/ko/webapi/managing_screen_orientation/index.html deleted file mode 100644 index 934384d0bf..0000000000 --- a/files/ko/webapi/managing_screen_orientation/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Managing screen orientation -slug: WebAPI/Managing_screen_orientation -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -<p>{{SeeCompatTable}}</p> -<h2 id="Summary">Summary</h2> -<p>Screen orientation 은 <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">device orientation</a> 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.</p> -<p>화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query</a> 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데, 브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.</p> -<p>두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.</p> -<h2 id="Adjusting_layout_based_on_the_orientation">Adjusting layout based on the orientation</h2> -<p>방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.</p> -<p>다음의 HTML code 예제를 보자</p> -<pre class="brush: html"><ul id="toolbar"> - <li>A</li> - <li>B</li> - <li>C</li> -</ul> - -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> -</pre> -<p>CSS 는 화면 방향에 따라 <span style="line-height: inherit;">특정 스타일을 을 </span><span style="line-height: inherit;">다루기 위해 orientation media query 에 의존한다</span></p> -<pre class="brush: css">/* First let's define some common styles */ - -html, body { - width : 100%; - height: 100%; -} - -body { - border: 1px solid black; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -p { - font : 1em sans-serif; - margin : 0; - padding: .5em; -} - -ul { - list-style: none; - - font : 1em monospace; - margin : 0; - padding: .5em; - - -moz-box-sizing: border-box; - box-sizing: border-box; - - background: black; -} - -li { - display: inline-block; - margin : 0; - padding: 0.5em; - background: white; -} -</pre> -<p>Once we have some common styles we can start defining a special case for the orientation</p> -<pre class="brush: css">/* For portrait, we want the tool bar on top */ - -@media screen and (orientation: portrait) { - #toolbar { - width: 100%; - } -} - -/* For landscape, we want the tool bar stick on the left */ - -@media screen and (orientation: landscape) { - #toolbar { - position: fixed; - width: 2.65em; - height: 100%; - } - - p { - margin-left: 2em; - } - - li + li { - margin-top: .5em; - } -} -</pre> -<p>실행 결과를 보자</p> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Portrait</th> - <th scope="col">Landscape</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> - <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> - </tr> - </tbody> -</table> -<div class="note"> - <p><strong>Note:</strong> orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.</p> -</div> -<h2 id="Locking_the_screen_orientation">Locking the screen orientation</h2> -<div class="warning"> - <p><strong>Warning:</strong> 이 API 는 실험적이며 현재 <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> 와 <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 에서 <code>moz</code> 접두사를 이용하여 사용할 수 있다.</p> -</div> -<p>몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.</p> -<p>Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.</p> -<h3 id="Listening_orientation_change">Listening orientation change</h3> -<p>{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 <span style="line-height: inherit;">방향이 {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 </span><span style="line-height: inherit;">마다 불려 진다. </span></p> -<pre class="brush: js">screen.addEventListener("orientationchange", function () { - console.log("The orientation of the screen is: " + screen.orientation); -}); -</pre> -<h3 id="Preventing_orientation_change">Preventing orientation change</h3> -<p>모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.</p> -<p>{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열 <span style="line-height: inherit;"> (또는 일련의 문자열) </span><span style="line-height: inherit;">을 수용한다. 수용하는 값들: </span><code style="font-size: 14px; line-height: inherit;">portrait-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape</code><span style="line-height: inherit;"> (각각의 값들에 대해 좀 더 알려면 {{domxref("window.screen.lockOrientation","lockOrientation")}} 를 보라).</span></p> -<pre class="brush: js">screen.lockOrientation('landscape');</pre> -<div class="note"> - <p><strong>Note:</strong> 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.</p> - <p>그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.</p> -</div> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("window.screen.orientation","screen.orientation")}}</li> - <li>{{domxref("window.screen.lockOrientation()","screen.lockOrientation()")}}</li> - <li>{{domxref("window.screen.unlockOrientation()","screen.unlockOrientation()")}}</li> - <li>{{domxref("window.screen.onorientationchange","screen.onorientationchange")}}</li> - <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> -</ul> diff --git a/files/ko/webapi/network_information/index.html b/files/ko/webapi/network_information/index.html deleted file mode 100644 index 9526bd2d5f..0000000000 --- a/files/ko/webapi/network_information/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Network Information API -slug: WebAPI/Network_Information -translation_of: Web/API/Network_Information_API ---- -<p>{{ SeeCompatTable() }}</p> -<p>네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.</p> -<h2 id="연결상태_변경_감지">연결상태 변경 감지</h2> -<p>이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.</p> -<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; - -function updateConnectionStatus() { - alert("Connection bandwidth: " + connection.bandwidth + " MB/s"); - if (connection.metered) { - alert("The connection is metered!"); - } -} - -connection.addEventListener("change", updateConnectionStatus); -updateConnectionStatus(); -</pre> -<h2 id="Specifications" name="Specifications">명세</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td> - <td>{{ Spec2('Network Information') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> -<h2 id="브라우저_호환성">브라우저 호환성</h2> -<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p> -<h2 id="관련_내용">관련 내용</h2> -<ul> - <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li> - <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li> - <li>{{domxref("window.navigator.connection")}}</li> -</ul> diff --git a/files/ko/webapi/proximity/index.html b/files/ko/webapi/proximity/index.html deleted file mode 100644 index ad1687ddd2..0000000000 --- a/files/ko/webapi/proximity/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Proximity -slug: WebAPI/Proximity -translation_of: Web/API/Proximity_Events ---- -<p>{{ SeeCompatTable }}</p> -<h2 id="Summary">Summary</h2> -<p>근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.</p> -<p>예를 들어, 사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.</p> -<div class="note"> - <p><strong>Note:</strong> 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.</p> -</div> -<h2 id="Proximity_Events">Proximity Events</h2> -<p>다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그 변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해 {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.</p> -<p>window object 레벨에서 {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.</p> -<p>일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:</p> -<ul> - <li> {{domxref("DeviceProximityEvent")}} 이벤트는 {{domxref("DeviceProximityEvent.value","value")}} 프로퍼티를 통해 디바이스와 대상 사이의 거리에 정확히 매치되는 값을 제공한다. 또한 이 이벤트는 장치가 감지할 수 있는 가장 가까운 거리, 가장 먼거리에 대한 정보를 {{domxref("DeviceProximityEvent.min","min")}} 와 {{domxref("DeviceProximityEvent.max","max")}} 프로퍼티 값을 통해 제공한다.</li> - <li>{{domxref("UserProximityEvent")}} 이벤트는 거리에 대한 대략적인 추정치를 boolean 형태로 제공한다. 대상과 디바이스가 가까운면 {{domxref("UserProximityEvent.near")}} 프로퍼티 값은 true 가 되고, 대상과의 거리가 멀다면 그 값은 false가 된다.</li> -</ul> -<h2 id="Example">Example</h2> -<pre class="brush: js">window.addEventListener('userproximity', function(event) { - if (event.near) { - // let's power off the screen - navigator.mozPower.screenEnabled = false; - } else { - // Otherwise, let's power on the screen - navigator.mozPower.screenEnabled = true; - } -});</pre> -<h2 id="Specifications" name="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{domxref("DeviceProximityEvent")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{domxref("UserProximityEvent")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceProximityEvent")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{ CompatGeckoMobile("15.0") }}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{domxref("UserProximityEvent")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - </table> -</div> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("DeviceProximityEvent")}}</li> - <li>{{domxref("UserProximityEvent")}}</li> - <li>{{event("deviceproximity")}}</li> - <li>{{event("userproximity")}}</li> -</ul> diff --git a/files/ko/webapi/using_geolocation/index.html b/files/ko/webapi/using_geolocation/index.html deleted file mode 100644 index e5f9913376..0000000000 --- a/files/ko/webapi/using_geolocation/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Geolocation API 사용하기 -slug: WebAPI/Using_geolocation -tags: - - Geolocation API - - Guide - - Intermediate -translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API ---- -<p>{{securecontext_header}}{{APIRef("Geolocation API")}}<br> - <strong>Geolocation API</strong>는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.</p> - -<h2 id="geolocation_객체"><code>geolocation</code> 객체</h2> - -<p><a href="/ko/docs/Web/API/Geolocation_API">Geolocation API</a>는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.</p> - -<p><code>geolocation</code> 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.</p> - -<pre class="brush: js">if('geolocation' in navigator) { - /* 위치정보 사용 가능 */ -} else { - /* 위치정보 사용 불가능 */ -} -</pre> - -<h3 id="현재_위치_가져오기">현재 위치 가져오기</h3> - -<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. <code>getCurrentPosition()</code>은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.</p> - -<div class="note"> -<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.</p> -</div> - -<pre class="brush: js">navigator.geolocation.getCurrentPosition((position) => { - doSomething(position.coords.latitude, position.coords.longitude); -});</pre> - -<p>위의 예제는 사용자 위치가 확인되면 <code>doSomething()</code> 함수를 실행합니다.</p> - -<h3 id="현재_위치_추적하기">현재 위치 추적하기</h3> - -<p>장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. <code>getCurrentPosition()</code>과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.</p> - -<div class="note"> -<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.</p> -</div> - -<pre class="brush: js">const watchID = navigator.geolocation.watchPosition((position) => { - doSomething(position.coords.latitude, position.coords.longitude); -});</pre> - -<p>{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.</p> - -<pre class="brush: js">navigator.geolocation.clearWatch(watchID); -</pre> - -<h3 id="응답_미세_조정">응답 미세 조정</h3> - -<p>{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 <a href="/ko/docs/Web/API/PositionOptions"><code>PositionOptions</code></a> 객체를 받을 수 있습니다.</p> - -<p><code>PositionsOptions</code> 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.</p> - -<p>옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.</p> - -<pre class="brush: js">function success(position) { - doSomething(position.coords.latitude, position.coords.longitude); -} - -function error() { - alert('Sorry, no position available.'); -} - -const options = { - enableHighAccuracy: true, - maximumAge: 30000, - timeout: 27000 -}; - -const watchID = navigator.geolocation.watchPosition(success, error, options);</pre> - -<h2 id="위치_표현">위치 표현</h2> - -<p>사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.</p> - -<p><code>GeolocationPosition</code>은 단 두 가지만 가집니다. 하나는 <code>GeolocationCoordinates</code> 인스턴스를 가진 <code>coords</code> 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.</p> - -<p>GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 <code>latitude</code>와 <code>longitude</code>입니다. 따라서 대부분의 <code>Geolocation</code> 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.</p> - -<pre class="brush: js">function success(position) { - const latitude = position.coords.latitude; - const longitude = position.coords.longitude; - - // Do something with your latitude and longitude -}</pre> - -<p>그러나 <code>GeolocationCoordinates</code> 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.</p> - -<h2 id="오류_처리">오류 처리</h2> - -<p><code>getCurrentPosition()</code> 또는 <code>watchPosition()</code>에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 <a href="/ko/docs/Web/API/GeolocationPositionError"><code>GeolocationPositionError</code></a> 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 <code>code</code> 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 <code>message</code> 속성을 갖습니다.</p> - -<p>다음 형태로 사용할 수 있습니다.</p> - -<pre class="brush: js">function errorCallback(error) { - alert(`ERROR(${error.code}): ${error.message}`); -};</pre> - -<h2 id="예제">예제</h2> - -<p>다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 <code>openstreetmap.org</code> 링크를 생성해 하이퍼링크에 할당합니다.</p> - -<div class="hidden"> -<pre class="brush: css">body { - padding: 20px; - background-color:#ffffc9 -} - -button { - margin: .5rem 0; -}</pre> -</div> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><button id = "find-me">Show my location</button><br/> -<p id = "status"></p> -<a id = "map-link" target="_blank"></a></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">function geoFindMe() { - - const status = document.querySelector('#status'); - const mapLink = document.querySelector('#map-link'); - - mapLink.href = ''; - mapLink.textContent = ''; - - function success(position) { - const latitude = position.coords.latitude; - const longitude = position.coords.longitude; - - status.textContent = ''; - mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; - mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; - } - - function error() { - status.textContent = 'Unable to retrieve your location'; - } - - if(!navigator.geolocation) { - status.textContent = 'Geolocation is not supported by your browser'; - } else { - status.textContent = 'Locating…'; - navigator.geolocation.getCurrentPosition(success, error); - } - -} - -document.querySelector('#find-me').addEventListener('click', geoFindMe);</pre> - -<h3 id="결과">결과</h3> - -<p>{{EmbedLiveSample('예제', 350, 150)}}</p> diff --git a/files/ko/webapi/using_light_events/index.html b/files/ko/webapi/using_light_events/index.html deleted file mode 100644 index b033d4f80d..0000000000 --- a/files/ko/webapi/using_light_events/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Using Light Events -slug: WebAPI/Using_Light_Events -tags: - - Ambient Light -translation_of: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.</p> - -<h2 id="빛_이벤트">빛 이벤트</h2> - -<p>기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.</p> - -<p>이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 <code>window</code> 객체 수준에서 캡춰됩니다.</p> - -<p>캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.</p> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - var html = document.getElementsByTagName('html')[0]; - - if (event.value < 50) { - html.classList.add('darklight'); - html.classList.remove('brightlight'); - } else { - html.classList.add('brightlight'); - html.classList.remove('darklight'); - } -});</pre> - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/ko/webapi/using_web_notifications/index.html b/files/ko/webapi/using_web_notifications/index.html deleted file mode 100644 index 351361d2af..0000000000 --- a/files/ko/webapi/using_web_notifications/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: 알림 API 사용하기 -slug: WebAPI/Using_Web_Notifications -translation_of: Web/API/Notifications_API/Using_the_Notifications_API ---- -<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> - -<p>웹 페이지나 앱에서 <a href="/ko/docs/Web/API/Notifications_API">알림(Notifications) API</a>를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.</p> - -<p>일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"></p> - -<p>물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.</p> - -<h2 id="예시">예시</h2> - -<p>웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 <a href="https://slack.com/">Slack</a> 등 이러한 사례를 많이 찾아볼 수 있습니다.</p> - -<p>우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">할 일 목록 코드를 다운로드하거나</a>, <a href="https://mdn.github.io/to-do-notifications/">앱의 라이브 실행을 보세요</a>.</p> - -<h2 id="권한_요청하기">권한 요청하기</h2> - -<p><span style="line-height: inherit;">앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인 요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.</span></p> - -<p><span style="line-height: inherit;">과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 </span>— 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.</p> - -<p>또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. </p> - -<h3 id="현재_권한_상태_확인하기">현재 권한 상태 확인하기</h3> - -<p><span style="line-height: inherit;">권한을 이미 가지고 있는지 확인하려면 </span>{{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.</p> - -<dl> - <dt><code>default</code></dt> - <dd>사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.</dd> - <dt><code>granted</code></dt> - <dd>사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.</dd> - <dt><code>denied</code></dt> - <dd>사용자가 명시적으로 알림 표시 권한을 거부했습니다.</dd> -</dl> - -<h3 id="권한_획득하기">권한 획득하기</h3> - -<p>아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.</p> - -<pre>Notification.requestPermission().then(function(result) { - console.log(result); -});</pre> - -<p>여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.</p> - -<pre>Notification.requestPermission();</pre> - -<p>콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.</p> - -<h3 id="예시_2">예시</h3> - -<p>우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.</p> - -<pre><button id="enable">알림 허용</button></pre> - -<p>누르면 다음 <code>askNotificationPermission()</code> 함수를 호출합니다.</p> - -<pre>function askNotificationPermission() { - // 권한을 실제로 요구하는 함수 - function handlePermission(permission) { - // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함 - if(!('permission' in Notification)) { - Notification.permission = permission; - } - - // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정 - if(Notification.permission === 'denied' || Notification.permission === 'default') { - notificationBtn.style.display = 'block'; - } else { - notificationBtn.style.display = 'none'; - } - } - - // 브라우저가 알림을 지원하는지 확인 - if (!('Notification' in window)) { - console.log("이 브라우저는 알림을 지원하지 않습니다."); - } else { - if(checkNotificationPromise()) { - Notification.requestPermission() - .then((permission) => { - handlePermission(permission); - }) - } else { - Notification.requestPermission(function(permission) { - handlePermission(permission); - }); - } - } -}</pre> - -<p>두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 <code>Notification.requestPermission()</code>의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).</p> - -<p>코드 중복을 피하기 위해 뒷 처리 수행 코드를 <code>handlePermission()</code> 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 <code>Notification.permission</code> 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.</p> - -<p><strong>참고:</strong> 크롬 37 버전 전에는 <code>load</code> 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(<a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">이슈 274284</a> 참고).</p> - -<h3 id="requestPermission_프로미스_기능_알아내기">requestPermission() 프로미스 기능 알아내기</h3> - -<p>위에서 우리는 브라우저가 <code>Notification.requestPermission()</code>의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.</p> - -<pre>function checkNotificationPromise() { - try { - Notification.requestPermission().then(); - } catch(e) { - return false; - } - - return true; - }</pre> - -<p>기본적으로 <code>requestPermission()</code>에 <code>.then()</code> 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 <code>true</code>를 반환합니다. 실패라면 <code>catch() {}</code> 블록에서 <code>false</code>를 반환합니다.</p> - -<h2 id="알림_만들기">알림 만들기 </h2> - -<p>알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.</p> - -<p>예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(<code>createNotification()</code> 함수에서 찾을 수 있음).</p> - -<pre>var img = '/to-do-notifications/img/icon-128.png'; -var text = '아! "' + title + '" 작업 기한이 만료됐습니다.'; -var notification = new Notification('할 일 목록', { body: text, icon: img }); -</pre> - -<h2 id="알림_닫기">알림 닫기</h2> - -<p>파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code>를 사용하여 <code>close()</code> 호출이 알림에 연동되게 하는 것도 해줘야 합니다.</p> - -<pre>setTimeout(notification.close.bind(notification), 4000);</pre> - -<div class="note"> -<p><strong>참고</strong>: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.</p> -</div> - -<h2 id="알림_이벤트">알림 이벤트</h2> - -<p><span style="line-height: inherit;">{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.</span></p> - -<dl> - <dt><code>click</code></dt> - <dd>사용자가 알림을 클릭하면 촉발됩니다.</dd> - <dt><code>close</code></dt> - <dd>알림이 닫힌 후 촉발됩니다.</dd> - <dt><code>error</code></dt> - <dd>알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.</dd> - <dt><code>show</code></dt> - <dd>알림이 사용자에게 표시되면 촉발됩니다.</dd> -</dl> - -<p>이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. <span style="line-height: inherit;">{{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 </span>{{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.</p> - -<h2 id="기존_알림_대체하기">기존 알림 대체하기</h2> - -<p>사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.</p> - -<p>이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.</p> - -<h3 id="태그_예시">태그 예시</h3> - -<p>다음과 같은 간단한 HTML을 봅시다.</p> - -<pre class="brush: html"><button>알림 실행!</button></pre> - -<p>다수의 알림을 아래 방법으로 처리할 수 있습니다.</p> - -<pre class="brush: js">window.addEventListener('load', function () { - // 처음에는 알림 권한이 있는지 확인함 - // 없으면 권한 요구 - if (Notification && Notification.permission !== "granted") { - Notification.requestPermission(function (status) { - if (Notification.permission !== status) { - Notification.permission = status; - } - }); - } - - var button = document.getElementsByTagName('button')[0]; - - button.addEventListener('click', function () { - // 사용자가 알림을 받는 데 동의한 경우 - // 알림 10개를 보내본다 - if (Notification && Notification.permission === "granted") { - var i = 0; - // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용. - var interval = window.setInterval(function () { - // 태그 덕분에 "안녕! 9" 알림만 보여야 함 - var n = new Notification("안녕! " + i, {tag: '알림너무많음'}); - if (i++ == 9) { - window.clearInterval(interval); - } - }, 200); - } - - // 사용자가 알림을 받을지 말지 답하지 않은 경우 - // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로 - // "기본" 값을 확인하는 것은 안전하지 않음 - else if (Notification && Notification.permission !== "denied") { - Notification.requestPermission(function (status) { - // 사용자가 ok한 경우 - if (status === "granted") { - var i = 0; - // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용. - var interval = window.setInterval(function () { - // 태그 덕분에 "안녕! 9" 알림만 보여야 함 - var n = new Notification("안녕! " + i, {tag: '알림너무많음'}); - if (i++ == 9) { - window.clearInterval(interval); - } - }, 200); - } - - // 그 외의 경우 일반적인 모달 alert로 폴백 - else { - alert("안녕!"); - } - }); - } - - // 사용자가 알림을 거부한 경우 - else { - // 일반적인 모달 alert로 폴백 - alert("안녕!"); - } - }); -});</pre> - -<p>라이브 결과는 아래에서 보세요.</p> - -<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p> - -<h2 id="규격">규격</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">규격</th> - <th scope="col">상태</th> - <th scope="col">비고</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>현행 표준</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li><a href="/ko/Apps/Build/User_notifications">사용자 알림 편람</a></li> - <li>{{ domxref("Notification") }}</li> -</ul> |