diff options
Diffstat (limited to 'files/ko/web')
9 files changed, 434 insertions, 230 deletions
diff --git a/files/ko/web/api/geolocation/getcurrentposition/index.html b/files/ko/web/api/geolocation/getcurrentposition/index.html deleted file mode 100644 index ffe4aeae2f..0000000000 --- a/files/ko/web/api/geolocation/getcurrentposition/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Geolocation.getCurrentPosition() -slug: Web/API/Geolocation/getCurrentPosition -tags: - - API - - Geolocation - - Geolocation API - - Method - - Reference - - Secure context - - 위치 - - 위치정보 -translation_of: Web/API/Geolocation/getCurrentPosition ---- -<div>{{securecontext_header}}{{ APIRef("Geolocation API") }}</div> - -<p><strong><code>Geolocation.getCurrentPosition()</code></strong> 메서드는 장치의 현재 위치를 가져옵니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success</em>[, <em>error</em>[, [<em>options</em>]])</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>success</code></dt> - <dd>{{domxref("GeolocationPosition")}} 객체를 유일한 매개변수로 받는 콜백 함수.</dd> - <dt><code>error</code> {{optional_inline}}</dt> - <dd>{{domxref("GeolocationPositionError")}} 객체를 유일한 매개변수로 받는 콜백 함수.</dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>{{domxref("PositionOptions")}} 객체.</dd> -</dl> - -<h2 id="예제">예제</h2> - -<pre class="brush: js">var options = { - enableHighAccuracy: true, - timeout: 5000, - maximumAge: 0 -}; - -function success(pos) { - var crd = pos.coords; - - console.log('Your current position is:'); - console.log('Latitude : ' + crd.latitude); - console.log('Longitude: ' + crd.longitude); - console.log('More or less ' + crd.accuracy + ' meters.'); -}; - -function error(err) { - console.warn('ERROR(' + err.code + '): ' + err.message); -}; - -navigator.geolocation.getCurrentPosition(success, error, options); -</pre> - -<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('Geolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p> - -<h2 id="같이_보기">같이 보기</h2> - -<ul> - <li><a href="/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Geolocation API 사용하기</a></li> - <li>{{domxref("Navigator.geolocation")}}</li> -</ul> diff --git a/files/ko/web/api/geolocation/getcurrentposition/index.md b/files/ko/web/api/geolocation/getcurrentposition/index.md new file mode 100644 index 0000000000..d0853950f5 --- /dev/null +++ b/files/ko/web/api/geolocation/getcurrentposition/index.md @@ -0,0 +1,78 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +tags: + - API + - Geolocation + - Geolocation API + - Method + - Reference + - Secure context + - getCurrentPosition + - 위치 + - 위치정보 +browser-compat: api.Geolocation.getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +{{securecontext_header}}{{ APIRef("Geolocation API") }} + +**`Geolocation.getCurrentPosition()`** 메서드는 장치의 현재 위치를 가져옵니다. + +## 구문 + +```js +navigator.geolocation.getCurrentPosition(success, error, [options]) +``` + +### 매개변수 + +- `success` + - : {{domxref("GeolocationPosition")}} 객체를 유일한 매개변수로 받는 콜백 함수입니다. +- `error` {{optional_inline}} + - : {{domxref("GeolocationPositionError")}} 객체를 유일한 매개변수로 받는 콜백 함수입니다. +- `options` {{optional_inline}} + - : 다음을 포함하는 객체입니다. + - `maximumAge` + - : 캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 나타내는 양의 `long` 값입니다. `0`을 지정한 경우 장치가 위치정보 캐시를 사용할 수 없으며 반드시 실시간으로 위치를 알아내려 시도해야 한다는 뜻입니다. {{jsxref("Infinity")}}를 지정한 경우 지난 시간에 상관없이 항상 캐시에 저장된 위치정보를 반환해야 함을 나타냅니다. 기본 값은 0입니다. + - `timeout` + : 기기가 위치를 반환할 때 소모할 수 있는 최대 시간(밀리초)을 나타내는 양의 `long` 값입니다. 기본 값은 {{jsxref("Infinity")}}로, 위치를 알아내기 전에는 `getCurrentPosition()`이 반환하지 않을 것임을 나타냅니다. + - `enableHighAccuracy` + - : 위치정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 불리언 값입니다. `true`를 지정했으면, 지원하는 경우 장치가 더 정확한 위치를 제공합니다. 그러나 응답 속도가 느려지며 전력 소모량이 증가하는 점에 주의해야 합니다. 반면 `false`를 지정한 경우 기기가 더 빠르게 반응하고 전력 소모도 줄일 수 있는 대신 정확도가 떨어집니다. 기본 값은 `false`입니다. + +## 예제 + +```js +var options = { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 0 +}; + +function success(pos) { + var crd = pos.coords; + + console.log('Your current position is:'); + console.log(`Latitude : ${crd.latitude}`); + console.log(`Longitude: ${crd.longitude}`); + console.log(`More or less ${crd.accuracy} meters.`); +} + +function error(err) { + console.warn(`ERROR(${err.code}): ${err.message}`); +} + +navigator.geolocation.getCurrentPosition(success, error, options); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Geolocation API 사용하기](/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API) +- {{domxref("Navigator.geolocation")}} diff --git a/files/ko/web/api/imagecapture/getphotocapabilities/index.html b/files/ko/web/api/imagecapture/getphotocapabilities/index.html deleted file mode 100644 index 9ee855a96d..0000000000 --- a/files/ko/web/api/imagecapture/getphotocapabilities/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: ImageCapture.getPhotoCapabilities() -slug: Web/API/ImageCapture/getPhotoCapabilities -tags: - - API - - Experimental - - ImageCapture - - MediaStream Image Capture API - - Method - - Reference -translation_of: Web/API/ImageCapture/getPhotoCapabilities ---- -<div>{{APIRef("MediaStream Image")}}</div> - -<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>getPhotoCapabilities()</code></strong> 메서드는 사용 가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">const <em>capabilitiesPromise</em> = <em>imageCaptureObj</em>.getPhotoCapabilities()</pre> - -<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3> - -<p>{{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}.</p> - -<h2 id="예제">예제</h2> - -<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, <code>getPhotoCapabilities()</code>를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p> - -<pre class="brush: js">const input = document.querySelector('input[type="range"]'); - -var imageCapture; - -navigator.mediaDevices.getUserMedia({video: true}) -.then(mediaStream => { - document.querySelector('video').srcObject = mediaStream; - - const track = mediaStream.getVideoTracks()[0]; - imageCapture = new ImageCapture(track); - - return imageCapture.getPhotoCapabilities(); -}) -.then(photoCapabilities => { - const settings = imageCapture.track.getSettings(); - - input.min = photoCapabilities.imageWidth.min; - input.max = photoCapabilities.imageWidth.max; - input.step = photoCapabilities.imageWidth.step; - - return imageCapture.getPhotoSettings(); -}) -.then(photoSettings => { - input.value = photoSettings.imageWidth; -}) -.catch(error => console.log('Argh!', error.name || error));</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('MediaStream Image','#dom-imagecapture-getphotocapabilities','getPhotoCapabilities()')}}</td> - <td>{{Spec2('MediaStream Image')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<div> - - -<p>{{Compat("api.ImageCapture.getPhotoCapabilities")}}</p> -</div> diff --git a/files/ko/web/api/imagecapture/getphotocapabilities/index.md b/files/ko/web/api/imagecapture/getphotocapabilities/index.md new file mode 100644 index 0000000000..bec638c42e --- /dev/null +++ b/files/ko/web/api/imagecapture/getphotocapabilities/index.md @@ -0,0 +1,79 @@ +--- +title: ImageCapture.getPhotoCapabilities() +slug: Web/API/ImageCapture/getPhotoCapabilities +tags: + - API + - Experimental + - Image + - Image Capture + - ImageCapture + - Media + - MediaStream Image Capture API + - Method + - Reference + - getPhotoCapabilities +browser-compat: api.ImageCapture.getPhotoCapabilities +translation_of: Web/API/ImageCapture/getPhotoCapabilities +--- +{{APIRef("MediaStream Image")}} + +{{domxref("ImageCapture")}} 인터페이스의 **`getPhotoCapabilities()`** 메서드는 사용 가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다. + +## 구문 + +```js +const capabilitiesPromise = imageCaptureObj.getPhotoCapabilities() +``` + +### 반환 값 + +다음 속성을 포함하는 객체로 이행하는 {{jsxref("Promise")}}. +- `redEyeReduction` + - : 장치의 적목 현상 감소 기능 적용 여부를 나타내는 `"never"`, `"always"`, `"controllable"` 중 하나를 반환합니다. +- `imageHeight` + - : {{glossary("user agent", "사용자 에이전트")}}가 지원하는 이미지 높이의 범위를 나타내는 객체를 반환합니다. +- `imageWidth` + - : {{glossary("user agent", "사용자 에이전트")}}가 지원하는 이미지 너비의 범위를 나타내는 객체를 반환합니다. +- `fillLightMode` + - : 사용 가능한 카메라 플래시 옵션을 담은 배열을 반환합니다. 가능한 값은 `auto`, `off`, `flash`입니다. + +## 예제 + +다음 예제는 [Chrome의 Image Capture / Photo Resolution Sample](https://googlechrome.github.io/samples/image-capture/photo-resolution.html)에서 가져온 코드로, `getPhotoCapabilities()`를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다. + +```js +const input = document.querySelector('input[type="range"]'); + +var imageCapture; + +navigator.mediaDevices.getUserMedia({video: true}) +.then(mediaStream => { + document.querySelector('video').srcObject = mediaStream; + + const track = mediaStream.getVideoTracks()[0]; + imageCapture = new ImageCapture(track); + + return imageCapture.getPhotoCapabilities(); +}) +.then(photoCapabilities => { + const settings = imageCapture.track.getSettings(); + + input.min = photoCapabilities.imageWidth.min; + input.max = photoCapabilities.imageWidth.max; + input.step = photoCapabilities.imageWidth.step; + + return imageCapture.getPhotoSettings(); +}) +.then(photoSettings => { + input.value = photoSettings.imageWidth; +}) +.catch(error => console.log('Argh!', error.name || error)); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/api/navigator/index.html b/files/ko/web/api/navigator/index.html index 9e70ff68b1..92dbf3d0ad 100644 --- a/files/ko/web/api/navigator/index.html +++ b/files/ko/web/api/navigator/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Navigator <h2 id="속성">속성</h2> -<p>아무 속성도 상속하지 않지만, {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}가 정의한 속성을 구현합니다.</p> +<p>아무 속성도 상속하지 않습니다.</p> <h3 id="표준_속성">표준 속성</h3> @@ -41,9 +41,9 @@ translation_of: Web/API/Navigator <dd>호스트 브라우저에서 Java를 사용 가능한지 나타냅니다.</dd> <dt>{{domxref('Navigator.keyboard')}} {{readonlyinline}} {{experimental_inline}}</dt> <dd>Returns a {{domxref('Keyboard')}} object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.</dd> - <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dt>{{domxref("Navigator.language")}} {{readonlyInline}}</dt> <dd>사용자의 선호 언어(주로 브라우저 UI 언어)를 나타내는 {{domxref("DOMString")}}을 반환합니다. 언어를 알 수 없는 경우 <code>null</code>을 반환합니다.</dd> - <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dt>{{domxref("Navigator.languages")}} {{readonlyInline}} {{experimental_inline}}</dt> <dd>사용자에게 알려진 언어 목록을 나타내는 {{domxref("DOMString")}} 배열을 반환합니다. 정렬 순서는 사용자의 언어 선호도입니다.</dd> <dt>{{domxref("Navigator.locks")}} {{readonlyinline}} {{experimental_inline}}</dt> <dd>새로운 {{domxref("Lock")}} 객체를 요청하거나, 기존 Lock 객체를 질의할 수 있는 {{domxref("LockManager")}} 객체를 반환합니다.</dd> @@ -94,7 +94,7 @@ translation_of: Web/API/Navigator <h2 id="메서드">메서드</h2> -<p>아무 메서드도 상속하지 않지만, {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, {{domxref("NavigatorStorageUtils")}}가 정의하는 메서드를 구현합니다.</p> +<p>아무 메서드도 상속하지 않습니다.</p> <dl> <dt>{{domxref("Navigator.canShare()")}}</dt> diff --git a/files/ko/web/api/navigator/language/index.md b/files/ko/web/api/navigator/language/index.md new file mode 100644 index 0000000000..d766f7ec49 --- /dev/null +++ b/files/ko/web/api/navigator/language/index.md @@ -0,0 +1,49 @@ +--- +title: Navigator.language +slug: Web/API/Navigator/language +tags: + - API + - Language + - Navigator + - Property + - Read-only + - Reference +browser-compat: api.Navigator.language +translation_of: Web/API/Navigator/language +--- +{{APIRef("HTML DOM")}} + +**`Navigator.language`** 읽기 전용 속성은 사용자의 선호 언어(일반적으로 브라우저 UI의 언어)를 나타내는 문자열을 반환합니다. + +## 구문 + +```js +const lang = navigator.language +``` + +### 값 + +{{RFC(5646, "Tags for Identifying Languages(BCP 47)")}}가 정의한 언어 태그의 {{domxref("DOMString")}}입니다. 유효한 값은 "en", "en-US", "ko", "ko-KR" 등입니다. + +iOS Safari 버전 10.2 이전에서는 "en-us", "ko-kr"처럼 국가 코드를 소문자로 반환합니다. + +## 예제 + +```js +if (/^en\b/.test(navigator.language)) { + doLangSelect(window.navigator.language); +} +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("navigator.languages")}} +- {{domxref("navigator")}} diff --git a/files/ko/web/api/navigator/online_and_offline_events/index.html b/files/ko/web/api/navigator/online_and_offline_events/index.html new file mode 100644 index 0000000000..039240fedc --- /dev/null +++ b/files/ko/web/api/navigator/online_and_offline_events/index.html @@ -0,0 +1,107 @@ +--- +title: Online and offline events +slug: Web/API/Navigator/Online_and_offline_events +tags: + - AJAX + - DOM + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +--- +<p>In progress <a href="ko/Firefox_3_for_developers">Firefox 3</a>는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG 웹 애플리케이션 1.0 명세</a>에 기술된 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">온라인/오프라인 이벤트</a>를 구현합니다.</p> + +<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3> + +<p>좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.</p> + +<ol> + <li>여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.</li> + <li>여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.</li> +</ol> + +<p>온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.</p> + +<p>여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 <code>HEAD</code> 섹션에 <code>LINK</code> 요소를 포함합니다.</p> + +<pre class="eval"><span class="nowiki"><link rel="offline-resource" href="myresource"></span> +</pre> + +<p>이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.</p> + +<h3 id="API" name="API">API</h3> + +<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4> + +<p><code><a href="ko/DOM/window.navigator.onLine">navigator.onLine</a></code>는 <code>true</code>/<code>false</code>(온라인은 <code>true</code>, 오프라인은 <code>false</code>)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -> 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.</p> + +<p>또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:</p> + +<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) <code>navigator.onLine</code> 속성은 false를 반환해야 합니다...</blockquote> + +<p>Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.</p> + +<p>이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.</p> + +<h4 id=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8">"<code>online</code>"과 "<code>offline</code>" 이벤트</h4> + +<p><a href="ko/Firefox_3">Firefox 3</a>는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "<code>online</code>"과 "<code>offline</code>"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <code><body></code>에서 발생합니다. 덧붙여, 이 이벤트는 <code>document.body</code>에서 <code>document</code>로 전달되고 <code>window</code>에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).</p> + +<p>널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.</p> + +<ul> + <li><code>window</code>, <code>document</code>, <code>document.body</code>에서 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 이용</li> + <li>자바스크립트의 <code>Function</code> 개체에서 <code>document</code>나 <code>document.body</code>에 <code>.ononline</code> 혹은 <code>.onoffline</code> 속성을 설정 (<strong>참고:</strong> 호환성 때문에<code>window.ononline</code>이나 <code>window.onoffline</code>은 올바로 동작하지 않습니다.)</li> + <li>HTML 마크업의 <code><body></code> 태그에 <code>ononline="..."</code> 혹은 <code>onoffline="..."</code> 속성을 지정</li> +</ul> + +<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3> + +<p>이벤트가 동작하는지 확인할 수 있는 <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">간단한 테스트 케이스</a>가 있습니다. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> + +<pre class="eval"> <!doctype html> + <html> + <head> + <script> + function updateOnlineStatus(msg) { + var status = document.getElementById("status"); + var condition = navigator.onLine ? "ONLINE" : "OFFLINE"; + status.setAttribute("class", condition); + var state = document.getElementById("state"); + state.innerHTML = condition; + var log = document.getElementById("log"); + log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n")); + } + function loaded() { + updateOnlineStatus("load"); + document.body.addEventListener("offline", function () { + updateOnlineStatus("offline") + }, false); + document.body.addEventListener("online", function () { + updateOnlineStatus("online") + }, false); + } + </script> + <style>...</style> + </head> + <body onload="loaded()"> + <div id="status"><p id="state"></p></div> + <div id="log"></div> + </body> + </html> +</pre> + +<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li> + <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li> +</ul> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p> diff --git a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html deleted file mode 100644 index 2fa7822559..0000000000 --- a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: RTCPeerConnection() -slug: Web/API/RTCPeerConnection/RTCPeerConnection -translation_of: Web/API/RTCPeerConnection/RTCPeerConnection ---- -<div>{{APIRef("WebRTC")}}</div> - -<p><span class="seoSummary"><strong><code>RTCPeerConnection()</code></strong> 생성자는 로컬 기기와 원격 피어 간의 연결을 나타내는 {{domxref("RTCPeerConnection")}} 객체를 새로 만들어 반환합니다.</span></p> - -<h2 id="문법">문법</h2> - -<pre class="syntaxbox">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> - -<h3 class="syntaxbox" id="매개변수">매개변수</h3> - -<dl> - <dt><code>configuration</code> {{optional_inline}}</dt> - <dd><a href="#RTCConfiguration_dictionary"><code>RTCConfiguration</code> dictionary</a>는 신규 연결을 설정하는 옵션들을 제공합니다.</dd> -</dl> - -<h3 id="RTCConfiguration_dictionary">RTCConfiguration dictionary</h3> - -<p>{{page("/ko/docs/Web/API/RTCConfiguration", "속성")}}</p> - -<h3 id="반환_값">반환 값</h3> - -<p><code>configuration</code>이 지정된 경우 그에 맞게 구성한, 그렇지 않은 경우 기본값 구성을 이용한 {{domxref("RTCPeerConnection")}} 객체입니다.</p> - -<h2 id="사양">사양</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">사양명</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - <tr> - <td>{{SpecName('WebRTC 1.0', '#widl-ctor-RTCPeerConnection--RTCConfiguration-configuration', 'RTCPeerConnection()')}}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td>초기 선언</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}</p> - -<h2 id="참고">참고</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> - <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">WebRTC architecture overview</a></li> - <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> - <li>{{domxref("RTCPeerConnection")}}</li> -</ul> diff --git a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md new file mode 100644 index 0000000000..1f2a53b5c6 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md @@ -0,0 +1,117 @@ +--- +title: RTCPeerConnection() +slug: Web/API/RTCPeerConnection/RTCPeerConnection +tags: + - API + - Constructor + - RTCPeerConnection + - Reference + - WebRTC +browser-compat: api.RTCPeerConnection.RTCPeerConnection +translation_of: Web/API/RTCPeerConnection/RTCPeerConnection +--- +{{APIRef("WebRTC")}} + +**`RTCPeerConnection()`** 생성자는 로컬 기기와 원격 피어 간의 연결을 나타내는 {{domxref("RTCPeerConnection")}} 객체를 새로 만들어 반환합니다. + +## 구문 + +```js +pc = new RTCPeerConnection([configuration]); +``` + +### 매개변수 + +- `configuration` {{optional_inline}} + - : 새로운 연결을 설정하는 옵션 객체입니다. + - `bundlePolicy` {{optional_inline}} + - : 원격 피어가 [SDP BUNDLE 표준](https://webrtcstandards.info/sdp-bundle/)과 호환되지 않을 때 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다. + + 가능한 값은 다음 열거형 값 중 하나로, 기본 값은 `balanced`입니다. + - `balanced` + - : The ICE agent initially creates one {{domxref("RTCDtlsTransport")}} + for each type of content added: audio, video, and data channels. + If the remote endpoint is not BUNDLE-aware, + then each of these DTLS transports handles all the communication for one type of data. + - `max-compat` + - : The ICE agent initially creates one {{domxref("RTCDtlsTransport")}} per media track + and a separate one for data channels. + If the remote endpoint is not BUNDLE-aware, + everything is negotiated on these separate DTLS transports. + - `max-bundle` + - : The ICE agent initially creates only a single {{domxref("RTCDtlsTransport")}} + to carry all of the {{DOMxRef("RTCPeerConnection")}}'s data. + If the remote endpoint is not BUNDLE-aware, + then only a single track will be negotiated and the rest ignored. + - `certificates` {{optional_inline}} + - : 연결 인증에 사용할 {{domxref("RTCCertificate")}}를 담은 {{jsxref("Array")}}입니다. 지정하지 않을 경우 {{domxref("RTCPeerConnection")}} 인스턴스 각각에 대해 인증서가 자동으로 생성됩니다. 주어진 연결에 대해 하나의 인증서만 사용되지만, 다양한 알고리즘을 사용하는 여러 인증서를 제공하면 특정 상황에서의 연결 성공률을 높일 수 있습니다. 아래의 [인증서 사용하기](#인증서_사용하기)에서 더 많은 정보를 확인하세요. + + > **참고:** 이 옵션은 처음 지정한 이후 변경할 수 없습니다. 인증서를 설정한 후엔 모든 {{domxref("RTCPeerConnection.setConfiguration()")}}이 무시됩니다. + - `iceCandidatePoolSize` {{optional_inline}} + - : ICE candidate 풀의 크기를 지정하는 부호 없는 16비트 정수 값입니다. 기본 값은 0으로 candidate 를 미리 가져오지 않을 것임을 나타냅니다. 연결 시도 전부터 ICE 에이전트가 ICE candidate를 가져올 수 있도록 허용하면 {{domxref("RTCPeerConnection.setLocalDescription()")}} 호출 시점에 이미 candidate를 조사할 수 있으므로 특정 상황에서 연결 속도가 빨라질 수 있습니다. + + > **참고:** ICE candidate 풀의 크기를 변경하면 ICE 수집이 시작할 수 있습니다. + - `iceServers` {{optional_inline}} + - : ICE 에이전트가 사용할 수 있는 서버(보통 STUN/TURN)를 설명하는 {{domxref("RTCIceServer")}} 객체의 배열입니다. 지정하지 않을 경우 STUN/TURN 서버를 사용하지 않고 연결 시도를 하므로 연결이 로컬 피어로 제한됩니다. + - `iceTransportPolicy` {{optional_inline}} + - : 현재 ICE 트랜스포트 정책입니다. 지정하지 않을 경우 기본 값은 `all`로, 모든 candidate를 고려합니다. 가능한 값은 다음과 같습니다. + - `"all"` + - : 모든 ICE candidate를 고려합니다. + - `"relay"` + - : IP 주소가 중개 중인, 예컨대 STUN 또는 TURN 서버를 통해 전송 중인 ICE candidate만 고려합니다. + - `peerIdentity` {{optional_inline}} + - : {{domxref("RTCPeerConnection")}}의 대상 피어 아이덴티티를 나타내는 {{domxref("DOMString")}}입니다. 기본 값은 `null`입니다. 이 값을 지정한 경우 `RTCPeerConnection`은 주어진 이름으로 인증에 성공해야 원격 피어로 연결을 시도합니다. + - `rtcpMuxPolicy` {{optional_inline}} + - : non-multiplexed RTCP를 지원하기 위해 ICE 수집 중 사용할 RTCP mux 정책입니다. 가능한 값은 다음과 같습니다. + - `negotiate` + - : Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. + If the remote peer can multiplex RTCP, + then RTCP candidates are multiplexed atop the corresponding RTP candidates. + Otherwise, both the RTP and RTCP candidates are returned, separately. + - `require` + - : Tells the ICE agent to gather ICE candidates for only RTP, + and to multiplex RTCP atop them. + If the remote peer doesn't support RTCP multiplexing, + then session negotiation fails. + This is the default value. + +### 반환 값 + +`configuration`이 지정된 경우 그에 맞게 구성한, 그렇지 않은 경우 기본값 구성을 이용한 {{domxref("RTCPeerConnection")}} 객체입니다. + +### 인증서 사용하기 + +When you wish to provide your own certificates for use by an +{{domxref("RTCPeerConnection")}} instead of having the `RTCPeerConnection` +generate them automatically, you do so by calling the static +{{domxref("RTCPeerConnection.generateCertificate()")}} function. + +The `certificates` property's value cannot be changed once it's first +specified. If it's included in the configuration passed into a call to a connection's +{{domxref("RTCPeerConnection.setConfiguration", "setConfiguration()")}}, it is ignored. + +This attribute supports providing multiple certificates because even though a given +DTLS connection uses only one certificate, providing multiple certificates allows +support for multiple encryption algorithms. The implementation of +`RTCPeerConnection` will choose which certificate to use based on the +algorithms it and the remote peer support, as determined during DTLS handshake. + +If you don't provide certificates, new ones are generated automatically. One obvious +benefit to providing your own is identity key continuity—if you use the same certificate +for subsequent calls, the remote peer can tell you're the same caller. This also avoids +the cost of generating new keys. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 참고 + +- [Signaling and video calling](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) +- [WebRTC architecture overview](/en-US/docs/Web/API/WebRTC_API/Architecture) +- [Lifetime of a WebRTC session](/en-US/docs/Web/API/WebRTC_API/Session_lifetime) +- {{domxref("RTCPeerConnection")}} |