diff options
Diffstat (limited to 'files/ko')
-rw-r--r-- | files/ko/web/api/document/copy_event/index.md | 62 | ||||
-rw-r--r-- | files/ko/web/api/document/cut_event/index.md | 62 | ||||
-rw-r--r-- | files/ko/web/api/document/paste_event/index.md | 61 | ||||
-rw-r--r-- | files/ko/web/api/element/copy_event/index.md | 96 | ||||
-rw-r--r-- | files/ko/web/api/element/cut_event/index.md | 102 | ||||
-rw-r--r-- | files/ko/web/api/element/paste_event/index.md | 98 | ||||
-rw-r--r-- | files/ko/web/api/window/copy_event/index.md | 62 | ||||
-rw-r--r-- | files/ko/web/api/window/cut_event/index.md | 62 | ||||
-rw-r--r-- | files/ko/web/api/window/paste_event/index.md | 61 |
9 files changed, 666 insertions, 0 deletions
diff --git a/files/ko/web/api/document/copy_event/index.md b/files/ko/web/api/document/copy_event/index.md new file mode 100644 index 0000000000..438f007669 --- /dev/null +++ b/files/ko/web/api/document/copy_event/index.md @@ -0,0 +1,62 @@ +--- +title: 'Document: copy 이벤트' +slug: Web/API/Document/copy_event +tags: + - API + - Clipboard API + - Document + - Event + - Reference + - Web + - copy +browser-compat: api.Document.copy_event +translation_of: Web/API/Document/copy_event +--- +{{APIRef}} + +**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +`copy` 이벤트의 원 대상은 복사 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Document")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: copy 이벤트](/ko/docs/Web/API/Element/copy_event)에서 확인하세요. + +## 예제 + +```js +document.addEventListener('copy', (event) => { + console.log('복사 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Document/cut_event", "cut")}}, {{domxref("Document/paste_event", "paste")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/copy_event", "copy")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/copy_event", "copy")}} diff --git a/files/ko/web/api/document/cut_event/index.md b/files/ko/web/api/document/cut_event/index.md new file mode 100644 index 0000000000..53665dd289 --- /dev/null +++ b/files/ko/web/api/document/cut_event/index.md @@ -0,0 +1,62 @@ +--- +title: 'Document: cut 이벤트' +slug: Web/API/Document/cut_event +tags: + - API + - Clipboard API + - Cut + - Event + - Reference + - Web + - Document +browser-compat: api.Document.cut_event +translation_of: Web/API/Document/cut_event +--- +{{APIRef}} + +**`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +`cut` 이벤트의 원 대상은 복사 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Document")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: cut 이벤트](/ko/docs/Web/API/Element/cut_event)에서 확인하세요. + +## 예제 + +```js +document.addEventListener('cut', (event) => { + console.log('잘라내기 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Document/copy_event", "copy")}}, {{domxref("Document/paste_event", "paste")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/cut_event", "cut")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/cut_event", "cut")}} diff --git a/files/ko/web/api/document/paste_event/index.md b/files/ko/web/api/document/paste_event/index.md new file mode 100644 index 0000000000..882dade72e --- /dev/null +++ b/files/ko/web/api/document/paste_event/index.md @@ -0,0 +1,61 @@ +--- +title: 'Document: paste 이벤트' +slug: Web/API/Document/paste_event +tags: + - API + - Document + - Event + - Reference + - Web + - paste +browser-compat: api.Document.paste_event +translation_of: Web/API/Document/paste_event +--- +{{APIRef}} + +**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> +</table> + +`paste` 이벤트의 원 대상은 붙여넣기 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Document")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: paste 이벤트](/ko/docs/Web/API/Element/paste_event)에서 확인하세요. + +## 예제 + +```js +document.addEventListener('paste', (event) => { + console.log('붙여넣기 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Document/copy_event", "copy")}}, {{domxref("Document/cut_event", "cut")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/paste_event", "paste")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/paste_event", "paste")}} diff --git a/files/ko/web/api/element/copy_event/index.md b/files/ko/web/api/element/copy_event/index.md new file mode 100644 index 0000000000..d6f526b9f5 --- /dev/null +++ b/files/ko/web/api/element/copy_event/index.md @@ -0,0 +1,96 @@ +--- +title: 'Element: copy 이벤트' +slug: Web/API/Element/copy_event +tags: + - API + - Clipboard API + - Element + - Event + - Reference + - Web +browser-compat: api.Element.copy_event +translation_of: Web/API/Element/copy_event +--- +{{APIRef}} + +**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사하는 것입니다. + +`copy` 이벤트 처리기는 이벤트의 {{domxref("ClipboardEvent.clipboardData")}} 속성에 대해 {{domxref("DataTransfer.setData", "setData(format, data)")}} 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, {{domxref("Event/preventDefault", "event.preventDefault()")}}를 호출해 기본 동작을 취소할 수도 있습니다. + +그러나, 처리기에서 클립보드 데이터를 읽을 수는 없습니다. + +[합성](/ko/docs/Web/Events/Creating_and_triggering_events) `copy` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드에 영향을 줄 수 없습니다. + +## 예제 + +### HTML + +```html +<div class="source" contenteditable="true">이 상자에서 텍스트를 복사해보세요...</div> +<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div> +``` + +```css hidden +div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +``` + +### JS + +```js +const source = document.querySelector('div.source'); + +source.addEventListener('copy', (event) => { + const selection = document.getSelection(); + const reversed = Array.from(selection.toString()).reverse().join(''); + + event.clipboardData.setData('text/plain', reversed); + event.preventDefault(); +}); +``` + +### 결과 + +{{ EmbedLiveSample('예제', '100%', '120px') }} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/copy_event", "copy")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/copy_event", "copy")}} diff --git a/files/ko/web/api/element/cut_event/index.md b/files/ko/web/api/element/cut_event/index.md new file mode 100644 index 0000000000..7cac966b5d --- /dev/null +++ b/files/ko/web/api/element/cut_event/index.md @@ -0,0 +1,102 @@ +--- +title: 'Element: cut 이벤트' +slug: Web/API/Element/cut_event +tags: + - API + - Clipboard API + - Cut + - Element + - Event + - Reference + - Web +browser-compat: api.Element.cut_event +--- +{{APIRef}} + +**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 잘라내기를 했을 때 발생합니다. + +사용자가 수정 불가능한 콘텐츠에 대해 잘라내기를 시도할 경우에도 `cut` 이벤트는 발생하지만, 데이터는 비어있을 것입니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사한 후 문서에서 제거하는 것입니다. + +`cut` 이벤트 처리기는 이벤트의 {{domxref("ClipboardEvent.clipboardData")}} 속성에 대해 {{domxref("DataTransfer.setData", "setData(format, data)")}} 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, {{domxref("Event/preventDefault", "event.preventDefault()")}}를 호출해 기본 동작을 취소할 수도 있습니다. + +기본 동작을 취소할 경우 잘라낸 영역을 문서에서 제거하지도 않는다는 점에 주의하세요. 따라서 기본 잘라내기 동작을 흉내내는 처리기를 구현하는 경우, 문서의 수정도 직접 해줘야 합니다. + +처리기에서 클립보드 데이터를 읽을 수는 없습니다. + +[합성](/ko/docs/Web/Events/Creating_and_triggering_events) `cut` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드나 문서 내용에 영향을 줄 수 없습니다. + +## 예제 + + +### HTML + +```html +<div class="source" contenteditable="true">이 상자에서 텍스트를 잘라내 보세요...</div> +<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div> +``` + +```css hidden +div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +``` + +### JS + +```js +const source = document.querySelector('div.source'); + +source.addEventListener('cut', (event) => { + const selection = document.getSelection(); + const reversed = Array.from(selection.toString()).reverse().join(''); + + event.clipboardData.setData('text/plain', reversed); + selection.deleteFromDocument(); + event.preventDefault(); +}); +``` + +### 결과 + +{{ EmbedLiveSample('예제', '100%', '120px') }} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/cut_event", "cut")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/cut_event", "cut")}} diff --git a/files/ko/web/api/element/paste_event/index.md b/files/ko/web/api/element/paste_event/index.md new file mode 100644 index 0000000000..70e814d1f3 --- /dev/null +++ b/files/ko/web/api/element/paste_event/index.md @@ -0,0 +1,98 @@ +--- +title: 'Element: paste 이벤트' +slug: Web/API/Element/paste_event +tags: + - Clipboard API + - Event + - NeedsUpdate + - Reference +browser-compat: api.Element.paste_event +translation_of: Web/API/Element/paste_event +--- +{{APIRef}} + +**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> +</table> + +현재 커서가 편집 가능한 맥락 ({{htmlelement("textarea")}} 등, 또는 [`contenteditable`](/ko/docs/Web/HTML/Global_attributes/contenteditable) 특성이 `true`인 요소) 내에 위치한 경우, 이벤트의 기본 동작은 커서 위치에 클립보드의 내용을 삽입하는 것입니다. + +`paste` 이벤트 처리기는 이벤트의 {{domxref("ClipboardEvent.clipboardData")}} 속성에 대해 {{domxref("DataTransfer.getData", "getData()")}} 메서드를 호출해 클립보드 콘텐츠를 읽을 수 있습니다. + +데이터 가공 등을 위해 기본 동작을 재정의해야 할 필요가 있는 경우 {{domxref("Event.preventDefault", "event.preventDefault()")}}을 호출해 취소하고, 직접 데이터를 삽입하면 됩니다. + +[합성](/ko/docs/Web/Events/Creating_and_triggering_events) `paste` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 문서 내용에 영향을 줄 수 없습니다. + +## 예제 + +### HTML + +```html +<div class="source" contenteditable="true">이 상자에서 텍스트를 복사해보세요...</div> +<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div> +``` + +```css hidden +div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +``` + +### JS + +```js +const target = document.querySelector('div.target'); + +target.addEventListener('paste', (event) => { + const paste = (event.clipboardData || window.clipboardData).getData('text'); + const reversed = Array.from(paste).reverse().join(''); + + const selection = window.getSelection(); + if (!selection.rangeCount) return false; + selection.deleteFromDocument(); + selection.getRangeAt(0).insertNode(document.createTextNode(reversed)); + + event.preventDefault(); +}); +``` + +### 결과 + +{{ EmbedLiveSample('예제', '100%', '120px') }} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/cut_event", "cut")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/paste_event", "paste")}} +- {{domxref("Window")}}를 대상으로 한 같은 이벤트: {{domxref("Window/paste_event", "paste")}} diff --git a/files/ko/web/api/window/copy_event/index.md b/files/ko/web/api/window/copy_event/index.md new file mode 100644 index 0000000000..e3cfec3ae6 --- /dev/null +++ b/files/ko/web/api/window/copy_event/index.md @@ -0,0 +1,62 @@ +--- +title: 'Window: copy 이벤트' +slug: Web/API/Window/copy_event +tags: + - API + - Clipboard API + - Event + - Reference + - Web + - Window + - copy +browser-compat: api.Window.copy_event +translation_of: Web/API/Window/copy_event +--- +{{APIRef}} + +**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +`copy` 이벤트의 원 대상은 복사 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Window")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: copy 이벤트](/ko/docs/Web/API/Element/copy_event)에서 확인하세요. + +## 예제 + +```js +window.addEventListener('copy', (event) => { + console.log('복사 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/copy_event", "copy")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/copy_event", "copy")}} diff --git a/files/ko/web/api/window/cut_event/index.md b/files/ko/web/api/window/cut_event/index.md new file mode 100644 index 0000000000..9ce458af97 --- /dev/null +++ b/files/ko/web/api/window/cut_event/index.md @@ -0,0 +1,62 @@ +--- +title: 'Window: cut 이벤트' +slug: Web/API/Window/cut_event +tags: + - API + - Clipboard API + - Cut + - Event + - Reference + - Web + - Window +browser-compat: api.Window.cut_event +translation_of: Web/API/Window/cut_event +--- +{{APIRef}} + +**`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +`cut` 이벤트의 원 대상은 복사 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Window")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: cut 이벤트](/ko/docs/Web/API/Element/cut_event)에서 확인하세요. + +## 예제 + +```js +window.addEventListener('cut', (event) => { + console.log('잘라내기 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/cut_event", "cut")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/cut_event", "cut")}} diff --git a/files/ko/web/api/window/paste_event/index.md b/files/ko/web/api/window/paste_event/index.md new file mode 100644 index 0000000000..a5ccb1df42 --- /dev/null +++ b/files/ko/web/api/window/paste_event/index.md @@ -0,0 +1,61 @@ +--- +title: 'Window: paste 이벤트' +slug: Web/API/Window/paste_event +tags: + - API + - Event + - Reference + - Web + - Window + - paste +browser-compat: api.Window.paste_event +translation_of: Web/API/Window/paste_event +--- +{{APIRef}} + +**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다. + +<table class="properties"> + <tbody> + <tr> + <th scope="row">버블링</th> + <td>예</td> + </tr> + <tr> + <th scope="row">취소 가능</th> + <td>예</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 처리기 속성</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> +</table> + +`paste` 이벤트의 원 대상은 붙여넣기 동작의 대상인 {{domxref("Element")}}입니다. {{domxref("Window")}}에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 [Element: paste 이벤트](/ko/docs/Web/API/Element/paste_event)에서 확인하세요. + +## 예제 + +```js +window.addEventListener('paste', (event) => { + console.log('붙여넣기 동작 실행') +}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 관련 이벤트: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/cut_event", "cut")}} +- {{domxref("Element")}}를 대상으로 한 같은 이벤트: {{domxref("Element/paste_event", "paste")}} +- {{domxref("Document")}}를 대상으로 한 같은 이벤트: {{domxref("Document/paste_event", "paste")}} |