aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoralattalatta <urty5656@gmail.com>2022-01-30 20:31:38 +0900
committerYeji Choi <61399588+yechoi42@users.noreply.github.com>2022-02-12 19:58:19 +0900
commit43f3f006d157aab593f0c21d46f584d4e6c91b55 (patch)
treebf40ff476760e92efda2deffb9659582195b8a79
parentb702b6f9fda93b00deb1f306dcc785a0a02b2a9f (diff)
downloadtranslated-content-43f3f006d157aab593f0c21d46f584d4e6c91b55.tar.gz
translated-content-43f3f006d157aab593f0c21d46f584d4e6c91b55.tar.bz2
translated-content-43f3f006d157aab593f0c21d46f584d4e6c91b55.zip
Update Clipboard API
-rw-r--r--files/ko/web/api/clipboard_api/index.md42
1 files changed, 29 insertions, 13 deletions
diff --git a/files/ko/web/api/clipboard_api/index.md b/files/ko/web/api/clipboard_api/index.md
index fdddd72c6c..086fa6fd52 100644
--- a/files/ko/web/api/clipboard_api/index.md
+++ b/files/ko/web/api/clipboard_api/index.md
@@ -3,53 +3,69 @@ title: Clipboard API
slug: Web/API/Clipboard_API
tags:
- API
+ - Async Clipboard API
+ - Clipboard
- Clipboard API
+ - Clipboard Event API
+ - ClipboardEvent
+ - ClipboardItem
+ - Cut
- Landing
- - Overview
+ - Reference
+ - copy
+ - paste
- 클립보드
+ - 복사
+ - 붙여넣기
translation_of: Web/API/Clipboard_API
---
{{DefaultAPISidebar("Clipboard API")}}
-**Clipboard API**는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답할 수 있는 기능 및 시스템 클립보드에 비동기적으로 읽고 쓸 수 있는 방법을 제공합니다. 클립보드 콘텐츠로의 접근은 [Permissions API](/ko/docs/Web/API/Permissions_API)를 통해야 하며, 사용자 동의 없이는 콘텐츠를 읽거나 수정할 수 없습니다.
+**Clipboard API**는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.
+
+> **참고:** 이 API는 [웹 워커](/ko/docs/Web/API/Web_Workers_API)에서 사용할 수 **없습니다**. ({{domxref("WorkerNavigator")}}에 노출되지 않음)
Clipboard API는 {{domxref("document.execCommand()")}}를 사용한 클립보드 접근을 대체하기 위해 디자인되었습니다.
## 클립보드 접근
-`Clipboard` 객체의 인스턴스를 생성하지 않고, 전역 {{domxref("Navigator.clipboard", "navigator.clipboard")}}를 사용해 시스템 클립보드에 접근합니다.
+시스템 클립보드에 접근할 땐 `Clipboard` 객체의 인스턴스를 생성하지 않고, 전역 {{domxref("Navigator.clipboard")}}를 사용합니다.
```js
navigator.clipboard.readText().then(
clipText => document.querySelector(".editor").innerText += clipText);
```
-위의 코드 조각은 클립보드에서 텍스트를 가져와서, `editor` 클래스를 가진 요소의 콘텐츠 뒤에 추가합니다. {{domxref("Clipboard.readText", "readText()")}}는 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이렇게 작성해도 안전합니다.
+위의 코드 조각은 클립보드에서 텍스트를 가져와서, `editor` 클래스를 가진 첫 번째 요소의 콘텐츠 뒤에 추가합니다. {{domxref("Clipboard.readText", "readText()")}}는 ({{domxref("Clipboard.read", "read()")}}도 마찬가지로) 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이 코드는 안전합니다.
## 인터페이스
- {{domxref("Clipboard")}} {{securecontext_inline}}
- - : 시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세는 'Async Clipboard API'라고 부릅니다.
+ - : 시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세에서는 "Async Clipboard API"라고 부릅니다.
- {{domxref("ClipboardEvent")}} {{securecontext_inline}}
- - : 클립보드 수정에 관련된 정보를 제공하는 이벤트, 즉 {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}} 이벤트를 나타냅니다. 명세는 'Clipboard Event API'라고 부릅니다.
+ - : {{event("cut")}}, {{event("copy")}}, {{event("paste")}} 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다. 명세에서는 "Clipboard Event API"라고 부릅니다.
+- {{domxref("ClipboardItem")}} {{securecontext_inline}}
+ - : 클립보드 데이터를 읽거나 쓸 때 데이터 형식을 나타낼 수 있습니다.
## 명세
-| Specification | Status | Comment |
-| ---------------------------------------- | ------------------------------------ | ------------------- |
-| {{SpecName('Clipboard API')}} | {{Spec2('Clipboard API')}} | Initial definition. |
+{{Specifications("api.Clipboard")}}
## 브라우저 호환성
-### `Clipboard`
+### Clipboard
{{Compat("api.Clipboard")}}
-### `ClipboardEvent`
+### ClipboardEvent
{{Compat("api.ClipboardEvent")}}
+### ClipboardItem
+
+{{Compat("api.ClipboardItem")}}
+
## 같이 보기
-- [Permissions API](/ko/docs/Web/API/Permissions_API)
-- [Using the Permissions API](/ko/docs/Web/API/Permissions_API/Using_the_Permissions_API)
+- [Async Clipboard API 데모 (Glitch)](https://async-clipboard-api.glitch.me/)
+- [web.dev의 Async Clipboard API](https://web.dev/image-support-for-async-clipboard/)