2.3.1 mouse-events-basics 충돌 해결 및 번역 수정

Author: Chaejy

2-ui/3-event-details/1-mouse-events-basics/article.md

@@ -1,9 +1,4 @@
-<<<<<<< HEAD
 # 마우스 이벤트
-=======
-
-# Mouse events
->>>>>>> upstream/master
 
 이번 챕터에선 마우스 이벤트와 마우스 이벤트 객체의 프로퍼티에 대해 자세히 다루겠습니다.
 
@@ -44,15 +39,9 @@
 ```online
 아래 버튼을 클릭 또는 더블클릭해 실제 마우스 버튼을 클릭했을 때 어떤 일이 발생하는지 알아봅시다.
 
-<<<<<<< HEAD
 모든 마우스 이벤트가 버튼 아래 창에 기록되는데, 이벤트 발생 간격이 1초 이상일 때는 이벤트 사이에 가로 선이 추가되도록 해놓았습니다.
 
-이벤트 이름 옆엔 어떤 마우스 버튼이 이벤트를 발생시켰는지를 알려주는 `button` 프로퍼티도 보이는데, `button` 프로퍼티에 대한 내용은 바로 아래에서 설명하도록 하겠습니다.
-=======
-On the teststand below, all mouse events are logged, and if there is more than a 1 second delay between them, they are separated by a horizontal rule.
-
-Also, we can see the `button` property that allows us to detect the mouse button; it's explained below.
->>>>>>> upstream/master
+이벤트 이름 옆엔 어떤 마우스 버튼이 이벤트를 발생시켰는지를 알려주는 `button` 프로퍼티도 보이는데, 이 프로퍼티에 대한 내용은 바로 아래에서 설명하도록 하겠습니다.
 
 <input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="마우스 왼쪽이나 오른쪽 버튼을 사용해 클릭해보세요." type="button"> <input onclick="logClear('test')" value="초기화" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```
@@ -63,37 +52,21 @@ Also, we can see the `button` property that allows us to detect the mouse button
 
 `click` 이벤트는 마우스 왼쪽 버튼을, `contextmenu` 이벤트는 마우스 오른쪽 버튼을 눌렀을 때 발생하기 때문에 `click`과 `contextmenu` 이벤트를 다룰 땐 보통 `button` 프로퍼티를 사용하지 않습니다.
 
-<<<<<<< HEAD
-반면 `mousedown`이벤트나 `mouseup` 이벤트를 다룰 땐 해당 이벤트의 핸들러에 `event.button`을 명시해 줘야 할 수 있습니다. 이 이벤트들은 마우스 버튼 어디에서나 발생할 수 있는데 `button` 프로퍼티를 사용해야 정확히 어떤 버튼에서 이벤트가 발생했는지 알 수 있기 때문입니다.
-=======
-On the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown".
->>>>>>> upstream/master
+반면 `mousedown`과 `mouseup` 핸들러에서는 `event.button`이 필요할 수 있습니다. 이 이벤트들은 마우스의 어느 버튼에서든 발생하므로, `button` 프로퍼티를 사용하면 '오른쪽 버튼으로 발생한 mousedown'과 '왼쪽 버튼으로 발생한 mousedown'을 구분할 수 있습니다.
 
 주요 `event.button` 프로퍼티 값을 정리하면 다음과 같습니다.
 
 | 버튼 | `event.button` |
 |--------------|----------------|
-<<<<<<< HEAD
-| 왼쪽(주요 버튼) | 0 |
-| 가운데(보조 버튼) | 1 |
+| 왼쪽 (주요 버튼) | 0 |
+| 가운데 (보조 버튼) | 1 |
 | 오른쪽 (두 번째 버튼) | 2 |
-| X1(뒤로 가기 버튼) | 3 |
-| X2(앞으로 가기 버튼) | 4 |
-=======
-| Left button (primary) | 0 |
-| Middle button (auxiliary) | 1 |
-| Right button (secondary) | 2 |
-| X1 button (back) | 3 |
-| X2 button (forward) | 4 |
->>>>>>> upstream/master
+| X1 (뒤로 가기 버튼) | 3 |
+| X2 (앞으로 가기 버튼) | 4 |
 
 상당수의 마우스는 왼쪽, 오른쪽 버튼만 가지고 있기 때문에 이 마우스들이 만들어내는 `event.button` 값은 `0`이나 `2`가 됩니다. 터치를 지원하는 기기들도 사람이 해당 기기를 터치했을 때 유사한 이벤트를 만듭니다.
 
-<<<<<<< HEAD
-참고로 `buttons`라는 프로퍼티도 있는데, 이 프로퍼티는 여러 개의 버튼을 한꺼번에 눌렀을 때 해당 버튼들에 대한 정보를 정수 형태로 저장해 줍니다. 실무에서 `buttons` 프로퍼티를 만날 일은 극히 드물긴 하지만 혹시라도 필요하다면[MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)에서 확인해보시길 바랍니다.
-=======
-Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it.
->>>>>>> upstream/master
+참고로 `event.buttons`라는 프로퍼티도 있습니다. 이 프로퍼티는 현재 눌려 있는 버튼들에 대한 정보를 정수 형태로 나타내며, 각 버튼은 하나의 비트로 표현됩니다. 실무에서 이 프로퍼티를 만날 일은 극히 드물지만, 필요하다면[MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)에서 확인해 보시길 바랍니다.
 
 ```warn header="역사의 뒤안길로 사라진 `event.which`"
 오래된 코드를 보다 보면 `event.which`라는 프로퍼티를 발견할 수 있습니다. `event.which` 프로퍼티는 어떤 버튼을 클릭했는지 알려주는 비표준 프로퍼티로 다음과 같은 값을 가집니다.
@@ -181,15 +154,9 @@ Windows와 Linux는 `key:Alt`, `key:Shift`, `key:Ctrl` 키를 지원합니다. 
 
 ## mousedown 이벤트와 선택 막기
 
-<<<<<<< HEAD
-글자 위에서 마우스를 더블클릭하면 글자가 선택되는데, 이런 기본 동작이 사용자 경험을 해칠 때가 있습니다.
-
-`dblclick` 이벤트가 발생하면 얼럿 창을 띄우고 싶다고 가정해 봅시다. 제대로 코드를 작성했음에도 불구하고 핸들러가 실행되는 동시에 글자가 선택되는 불필요한 부수효과가 발생하였습니다.
-=======
-Double mouse click has a side effect that may be disturbing in some interfaces: it selects text.
+글자 위에서 마우스를 더블클릭하면 글자가 선택되는데, 이런 기본 동작은 일부 인터페이스에서 방해가 될 수 있습니다.
 
-For instance, double-clicking on the text below selects it in addition to our handler:
->>>>>>> upstream/master
+예를 들어, 아래 텍스트를 더블 클릭하면 우리가 만든 핸들러가 실행되는 동시에 텍스트도 선택됩니다.
 
 ```html autorun height=50
 <span ondblclick="alert('dblclick')">이곳을 더블클릭해주세요.</span>