javascript-tutorial · Chaejy · May 17, 2026 · May 25, 2026 · May 25, 2026
diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/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
 
 <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
 
 주요 `event.button` 프로퍼티 값을 정리하면 다음과 같습니다.
 
 | 버튼 | `event.button` |
 |--------------|----------------|
-<<<<<<< HEAD
 | 왼쪽(주요 버튼) | 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
 
 상당수의 마우스는 왼쪽, 오른쪽 버튼만 가지고 있기 때문에 이 마우스들이 만들어내는 `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
 
 ```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>

diff --git a/...3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/...3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -218,4 +218,4 @@ These things are good to note:
 
 Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one.
 
-Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble.
+Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
@@ -18,16 +18,11 @@
 2. 이후 `mousemove`에서 `position:absolute`의 `left∙top`을 변경합니다.
 3. `mouseup`에서는 드래그 앤 드롭 완료와 관련된 모든 작업을 수행합니다.
 
-<<<<<<< HEAD
 여기까지가 기본 알고리즘입니다. 이후에는 이동 중인 요소 아래에 있는 다른 요소를 강조하는 기능을 알아보겠습니다.
-=======
-These are the basics. Later we'll see how to add other features, such as highlighting current underlying elements while we drag over them.
->>>>>>> upstream/master
 
 공을 드래그하는 구현 방법은 다음과 같습니다.
 
 ```js
-<<<<<<< HEAD
 ball.onmousedown = function(event) { 
   // (1) absolute 속성과 zIndex 프로퍼티를 수정해 공이 제일 위에서 움직이기 위한 준비를 합니다.
   ball.style.position = 'absolute';
@@ -36,16 +31,6 @@ ball.onmousedown = function(event) {
   // 현재 위치한 부모에서 body로 직접 이동하여
   // body를 기준으로 위치를 지정합니다.
   document.body.append(ball);  
-=======
-ball.onmousedown = function(event) {
-  // (1) prepare to moving: make absolute and on top by z-index
-  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
-  document.body.append(ball);
->>>>>>> upstream/master
 
   // 공을 pageX, pageY 좌표 중앙에 위치하게 합니다.
   function moveAt(pageX, pageY) {
@@ -108,22 +93,14 @@ document의 중간이나 윈도우 어딘가로 점프 되는 현상을 잡기
 
 ## 올바른 위치 지정
 
-<<<<<<< HEAD
 위 예제 코드에서 공은 항상 포인터 아래로 이동합니다.
-=======
-In the examples above the ball is always moved so that its center is under the pointer:
->>>>>>> upstream/master
 
 ```js
 ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
 ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
 ```
 
-<<<<<<< HEAD
 나쁘진 않습니다. 다만, 몇 가지 부작용이 있습니다. 드래그 앤 드롭을 시작하기 위해 공 위 어디에서든 `mousedown`을 할 수 있습니다. 공의 가장자리에서 `mousedown`을 하게 되면, 마우스 포인터 아래로 공이 갑자기 점프 되는 부작용이 발생합니다.
-=======
-Not bad, but there's a side effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if "take" it from its edge, then the ball suddenly "jumps" to become centered under the mouse pointer.
->>>>>>> upstream/master
 
 포인터를 기준으로 요소의 초기 이동을 유지하는 방법이 포인터 중앙으로 요소를 이동시키는 방법보다 더 좋습니다.
 
@@ -147,11 +124,7 @@ Not bad, but there's a side effect. To initiate the drag'n'drop, we can `mousedo
 
     ```js
     // onmousemove
-<<<<<<< HEAD
     // 공은 고정된 포지션을 갖습니다.
-=======
-    // ball has position:absolute
->>>>>>> upstream/master
     ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
     ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
     ```
@@ -246,11 +219,7 @@ ball.ondragstart = function() {
 
 그러면 무엇을 해야 할까요?
 
-<<<<<<< HEAD
 `document.elementFromPoint(clientX, clientY)`라는 메서드가 있습니다. 주어진 윈도우 기준 좌표에서 가장 많이 중첩된 요소를 반환합니다. (윈도우 밖의 좌표는 null)
-=======
-There's a method called `document.elementFromPoint(clientX, clientY)`. It returns the most nested element on given window-relative coordinates (or `null` if given coordinates are out of the window). If there are multiple overlapping elements on the same coordinates, then the topmost one is returned.
->>>>>>> upstream/master
 
 다음과 같이 마우스 이벤트 핸들러에서 포인터 아래에 드롭 가능성을 감지할 수 있습니다.
 
@@ -307,11 +276,7 @@ function onMouseMove(event) {
 }
 ```
 
-<<<<<<< HEAD
 아래 예시에서 공을 축구 골대 위로 드래그하면 골대가 강조 표시됩니다.
-=======
-In the example below when the ball is dragged over the soccer goal, the goal is highlighted.
->>>>>>> upstream/master
 
 [codetabs height=250 src="ball4"]
 
@@ -335,8 +300,4 @@ In the example below when the ball is dragged over the soccer goal, the goal is
 - `mousedown/up`에 이벤트 위임을 사용할 수 있습니다. `event.target`을 확인하는 넓은 영역의 이벤트 핸들러는 수백 개의 요소에 대한 드래그 앤 드롭을 관리할 수 있습니다.
 - 등등
 
-<<<<<<< HEAD
 `DragZone`, `Droppable`, `Draggable` 및 기타 클래스 등 아키텍처를 구축하는 프레임워크가 있습니다. 대부분은 앞서 드래그와 드롭에 대한 설명과 유사한 작업을 하므로 이해하기 쉽습니다. 때로는 제3의 솔루션 적용보다 쉽게 수행할 수 있습니다.
-=======
-There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-party solution.
->>>>>>> upstream/master
Original file line number	Diff line number	Diff line change
Expand Up		@@ -218,4 +218,4 @@ These things are good to note:

		Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one.

		Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble.
		Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble.