#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역 #833

KimHunJin · 2020-09-06T09:46:00Z

Pull Request 체크리스트

TODO

번역 규칙을 확인하셨나요?
- 줄 바꿈과 단락을 '원문과 동일하게' 유지하셨나요?
- 맞춤법 검사기로 맞춤법을 확인하셨나요?
- 마크다운 문법에 사용되는 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(`) 등의 특수문자는 그대로 두셨나요?
로컬 서버 세팅 후 최종 결과물을 확인해 보셨나요?
PR 하나엔 번역문 하나만 넣으셨나요?
의미 있는 커밋 메시지를 작성하셨나요?
- 예시
  - [프락시] 번역
  - [프락시] 과제 번역
  - [if문과 조건부 연산자 '?'] 리뷰
  - [주석] 2차 리뷰
  - [Date 객체와 날짜] 번역

CLAassistant · 2020-09-06T09:46:06Z

All committers have signed the CLA.

Violet-Bora-Lee

http://m.blog.naver.com/ojhnews/220840570533

읽어보시고 퇴고 여러번 부탁드립니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -1,54 +1,54 @@
-# Drag'n'Drop with mouse events
+# 드래그&드롭과 마우스 이벤트


Suggested change

# 드래그&드롭과 마우스 이벤트

# 드래그 앤 드롭과 마우스 이벤트

드래그 앤 드롭으로 제안드립니다. 출판 도서(프론트엔드 개발자를 위한 자바스크립트 프로그래밍'책을 참고하였습니다.

아니면 '드래그, 드롭과 마우스 이벤트' 이것도 괜찮을것같아요

드래그 앤 드롭으로 변경하겠습니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


-Drag'n'Drop is a great interface solution. Taking something and dragging and dropping it is a clear and simple way to do many things, from copying and moving documents (as in file managers) to ordering (dropping items into a cart).
+드래그&드롭은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 방법입니다. 무언가를 끌어다가 놓는 것은 파일 매니저에서 문서를 복사 혹은 이동하는 것부터 장바구니에 물품을 담는 것까지 많은 것을 수행할 수 있는 단순하고, 명백한 방법입니다.


Suggested change

드래그&드롭은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 방법입니다. 무언가를 끌어다가 놓는 것은 파일 매니저에서 문서를 복사 혹은 이동하는 것부터 장바구니에 물품을 담는 것까지 많은 것을 수행할 수 있는 단순하고, 명백한 방법입니다.

드래그(drag)와 드롭(drop)은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 도구입니다. 파일 관리 애플리케이션에서 문서를 복사해 이동하는 것부터 주문하려는 물건을 장바구니에 드롭하는 것까지, 드래그와 드롭을 사용하면 아주 단순하고 명쾌하게 원하는 동작을 수행할 수 있습니다.

번역을 진행하면서 드래깅과 드롭핑에 대해서 어떻게 표현하는게 좋을 지 고민했는데, 참고하기 좋은 글이 될거 같아요 :)
다시 한번 전체적으로 검토하면서 변경하겠습니다. 감사합니다~

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


-In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend`, and so on.
+현대 HTML 표준에서는 `dragstart`, `dragend` 등의 특수한 이벤트와 함께 드래그&드롭에 대한 절이 있습니다.


modern은 용어집을 참고해주세요
드래그&드롭도 수정해주세요

완료 및 누락된 내용 추가

모던 HTML 표준에서는 `dragstart`, `dragend` 등의 특수한 이벤트와 함께 [드래그 앤 드롭](https://html.spec.whatwg.org/multipage/interaction.html#dnd)에 대한 절이 있습니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


-These events allow us to support special kinds of drag'n'drop, such as handling dragging a file from OS file-manager and dropping it into the browser window. Then JavaScript can access the contents of such files.
+이 이벤트들은 OS의 파일 매니저로부터 파일을 끌고 와 브라우저 화면에 놓는 특별한 드래그&드롭을 제공합니다. 그러면 자바스크립트는 이 파일의 내용을 다룰 수 있습니다.


이 이벤트들은 ~드래그&드롭을 제공합니다. <-- 주술구조가 어색한것같은데요, 의도하신건가요?

'이 이벤트들은', '이 파일'에서 '이'에 대한 번역을 명확히해주세요.
https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80#%EB%8C%80%EB%AA%85%EC%82%AC%EB%8A%94-%EB%AA%85%ED%99%95%ED%95%98%EA%B2%8C

전반적으로 대명사 번역 체크 부탁드립니다.

변경 완료

`dragstart`나 `dragend` 이벤트는 운영체제의 파일 관리 애플리케이션으로부터 파일을 드래그하여 브라우저 화면에 드롭하는 특별한 드래그 앤 드롭 기능을 제공합니다. 그러면 자바스크립트로 파일 관리 애플리케이션에서 드래그하여 가져온 파일의 내용을 다룰 수 있습니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


-So here we'll see how to implement Drag'n'Drop using mouse events.
+여기에서는 마우스 이벤트를 사용하여 드래그&드롭을 구현하는 방법을 알아보겠습니다.


이런 한계를 극복하기위해 이번 챕터에선 ~~

이렇게 해주면 논리상 매끄러울것같네요

완료

여기에서는 마우스 이벤트를 사용하여 드래그&드롭을 구현하는 방법을 알아보겠습니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


-These are the basics. Later we'll see how to other features, such as highlighting current underlying elements while we drag over them.
+여기까지가 기본입니다. 이후에는 이동 중인 요소 아래에 있는 다른 요소를 강조하는 기능 같은 것을 알아보겠습니다.


'것' 수정

완료

여기까지가 기본 알고리즘입니다. 이후에는 이동 중인 요소 아래에 있는 다른 요소를 강조하는 기능을 알아보겠습니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


 ```js
 ball.onmousedown = function(event) { 
-  // (1) prepare to moving: make absolute and on top by z-index
+  // (1) absolute속성과 z-index속성으로 공이 제일 위에서 움직이기 위한 준비를 합니다.


Suggested change

// (1) absolute속성과 z-index속성으로 공이 제일 위에서 움직이기 위한 준비를 합니다.

// (1) absolute와 zIndex 프로퍼티를 수정해 공을 움직이기 위한 준비를 합니다.

property이므로, 용어집을 참고해 '속성'이 아닌 '프로퍼티'로 번역해주세요

https://developer.mozilla.org/en-US/docs/Web/CSS/position

완료

absolute와 zIndex 프로퍼티를 수정해 공을 움직이기 위한 준비를 합니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;

-  // move it out of any current parents directly into body
-  // to make it positioned relative to the body
+  // 현재 부모에서 body로 직업 이동합니다.


퇴고 부탁드립니다

이 부분 혹시 도움을 받을 수 있을까요?
직업은 오타였는데 맞춤법이 틀린게 아니라서 발견을 못했네요... ㅋㅋ

직접으로 수정을 하더라도 문장이 너무 어색한데.. 어떻게 표현을 해야할까요..

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -57,79 +57,79 @@ ball.onmousedown = function(event) {
 };
 ```

-If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone".
+코드를 실행시켜보면 무언가 이상한 점이 보일 겁니다. 드래그&드롭을 시작할 때 공이 포크 되고 복사된 공을 끌기 시작합니다.


포크도 번역해주세요

포크되다 라는 걸 찍어 올리다 정도로 해석했는데 확인 부탁드립니다.

코드를 실행시켜보면 무언가 이상한 점이 보일 겁니다. 드래그 앤 드롭을 시작할 때 공을 찍어 올리고, 복사된 공을 끌기 시작합니다.

Violet-Bora-Lee · 2020-09-10T11:08:10Z

2-ui/3-event-details/4-mouse-drag-and-drop/article.md


 ```js
 ball.ondragstart = function() {
  return false;
 };
 ```

-Now everything will be all right.
+이제 잘 될 것입니다.


'것' 퇴고

완료

이제 잘 됩니다.

javascript-translate-bot · 2020-09-10T11:08:13Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

KimHunJin · 2020-09-12T02:09:28Z

/done

#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역

Loading status checks…

0492c01

javascript-translate-bot added the review needed label Sep 6, 2020

Violet-Bora-Lee requested changes Sep 10, 2020

View changes

javascript-translate-bot added changes requested and removed review needed labels Sep 10, 2020

#713 [신규 번역] 파트2 - 3.3 드래그 앤 드롭과 마우스이벤트 리뷰 반영 및 문장 개선

Loading status checks…

07db181

javascript-translate-bot added review needed and removed changes requested labels Sep 12, 2020

Dec	JAN	Feb
	06
2020	2021	2022

javascript-tutorial / ko.javascript.info

#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역 #833

#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역 #833

KimHunJin commented Sep 6, 2020

CLAassistant commented Sep 6, 2020 •

edited

Violet-Bora-Lee left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

javascript-translate-bot commented Sep 10, 2020

KimHunJin commented Sep 12, 2020

		@@ -1,54 +1,54 @@
		# Drag'n'Drop with mouse events
		# 드래그&드롭과 마우스 이벤트

	# 드래그&드롭과 마우스 이벤트
	# 드래그 앤 드롭과 마우스 이벤트


		Drag'n'Drop is a great interface solution. Taking something and dragging and dropping it is a clear and simple way to do many things, from copying and moving documents (as in file managers) to ordering (dropping items into a cart).
		드래그&드롭은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 방법입니다. 무언가를 끌어다가 놓는 것은 파일 매니저에서 문서를 복사 혹은 이동하는 것부터 장바구니에 물품을 담는 것까지 많은 것을 수행할 수 있는 단순하고, 명백한 방법입니다.

	드래그&드롭은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 방법입니다. 무언가를 끌어다가 놓는 것은 파일 매니저에서 문서를 복사 혹은 이동하는 것부터 장바구니에 물품을 담는 것까지 많은 것을 수행할 수 있는 단순하고, 명백한 방법입니다.
	드래그(drag)와 드롭(drop)은 사용자와 컴퓨터 간 상호작용을 도와주는 훌륭한 도구입니다. 파일 관리 애플리케이션에서 문서를 복사해 이동하는 것부터 주문하려는 물건을 장바구니에 드롭하는 것까지, 드래그와 드롭을 사용하면 아주 단순하고 명쾌하게 원하는 동작을 수행할 수 있습니다.


		In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend`, and so on.
		현대 HTML 표준에서는 `dragstart`, `dragend` 등의 특수한 이벤트와 함께 드래그&드롭에 대한 절이 있습니다.


		These events allow us to support special kinds of drag'n'drop, such as handling dragging a file from OS file-manager and dropping it into the browser window. Then JavaScript can access the contents of such files.
		이 이벤트들은 OS의 파일 매니저로부터 파일을 끌고 와 브라우저 화면에 놓는 특별한 드래그&드롭을 제공합니다. 그러면 자바스크립트는 이 파일의 내용을 다룰 수 있습니다.


		So here we'll see how to implement Drag'n'Drop using mouse events.
		여기에서는 마우스 이벤트를 사용하여 드래그&드롭을 구현하는 방법을 알아보겠습니다.


		These are the basics. Later we'll see how to other features, such as highlighting current underlying elements while we drag over them.
		여기까지가 기본입니다. 이후에는 이동 중인 요소 아래에 있는 다른 요소를 강조하는 기능 같은 것을 알아보겠습니다.

	// (1) absolute속성과 z-index속성으로 공이 제일 위에서 움직이기 위한 준비를 합니다.
	// (1) absolute와 zIndex 프로퍼티를 수정해 공을 움직이기 위한 준비를 합니다.

javascript-tutorial / ko.javascript.info

#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역 #833

#713 [신규 번역] 파트2 - 3.3 드래그&드롭과 마우스이벤트 원문 번역 #833

Conversation

KimHunJin commented Sep 6, 2020

Pull Request 체크리스트

TODO

CLAassistant commented Sep 6, 2020 • edited

Violet-Bora-Lee left a comment

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

This comment has been minimized.

Violet-Bora-Lee Sep 10, 2020 Member

This comment has been minimized.

KimHunJin Sep 11, 2020 Author Contributor

javascript-translate-bot commented Sep 10, 2020

KimHunJin commented Sep 12, 2020

CLAassistant commented Sep 6, 2020 •

edited

Violet-Bora-Lee Sep 10, 2020
Member

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor

Violet-Bora-Lee Sep 10, 2020
Member

KimHunJin Sep 11, 2020
Author Contributor