May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021 · Jun 1, 2021 · Jun 1, 2021
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
 As we can see from HTML/CSS, the slider is a`<div>` with a colored background, that contains a runner -- another`<div>`with `position:relative`.
 HTML·CSS에서 볼 수 있듯이 슬라이더는 배경색이 있는`<div>`로 `position:relative`가 있는 또 다른`<div>`러너를 포함합니다.

 To position the runner we use`position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than`position:absolute`.
 러너의 위치를 지정하려면`position:relative`를 사용하여 상위에 상대적인 좌표를 제공하는데, 이는`position:absolute`보다 더 편리합니다.

 Then we implement horizontal-only Drag'n'Drop with limitation by width.
 그런 다음 가로 너비를 제한하여 수평 전용 드래그 앤 드롭을 구현합니다.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

 ---

 #Slider
 #슬라이더

 Create a slider:
 슬라이더 만들기.

 [iframe src="solution" height=60 border=1]

 Drag the blue thumb with the mouse and move it.
 마우스로 파란 막대를 드래그하여 이동합니다.

 Important details:
 주요 세부사항:

 -When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
 -If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
 -마우스 버튼을 누르면 드래그하는 동안 마우스가 슬라이더 상·하로 이동할 수 있습니다.
 -마우스를 좌·우로 빠르게 움직이면 막대는 가장자리에서 정확히 멈춰야 합니다.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
 To drag the element we can use`position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to`position:absolute` to lay the element into the document.
 요소를 드래그하기 위해`position:fixed`를 사용하면 좌표를 더 쉽게 관리할 수 있습니다. 마지막으로 요소를 문서에 배치하기 위해 다시`position:absolute`로 전환해야 합니다.

 When coordinates are at window top/bottom, we use`window.scrollTo` to scroll it.
 좌표가 창 위·아래쪽에 있으면`window.scrollTo`를 사용하여 스크롤 합니다.

 More details in the code, in comments.
 자세한 내용은 코드에 있는 코멘트를 참조해 주세요.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

 ---

 #Drag superheroes around the field
 #필드 주위로 슈퍼 히어로 드래그하기

 This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
 이 작업을 통해 드래그 앤 드롭 및 DOM의 여러 측면에 대한 이해도를 확인할 수 있습니다.

 Make all elements with class`draggable` -- draggable. Like a ball in the chapter.
 `draggable`클래스의 모든 요소를 드래그할 수 있게 만들어주세요. 이번 장에서 배운 공처럼요.

 Requirements:
 요구 사항:

 -Use event delegation to track drag start: a single event handler on`document` for `mousedown`.
 -If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
 -There is no horizontal scroll (this makes the task a bit simpler, adding it is easy).
 -Draggable elements or their parts should never leave the window, even after swift mouse moves.
 -이벤트 위임을 사용하여 드래그 시작을 추적합니다. `mousedown`는`document`의 단일 이벤트 핸들러입니다.
 -요소를 위·아래쪽 창 가장자리로 드래그하면 페이지가 위·아래로 스크롤 되어 추가로 드래그할 수 있습니다.
 -수평 방향 스크롤은 없습니다(이렇게 하면 작업이 간단해져 쉽게 추가할 수 있음).
 -드래그할 수 있는 요소 또는 그 부분은 마우스를 빠르게 움직인 후에도 창을 벗어나지 않아야 합니다.

 The demo is too big to fit it here, so here's the link.
 데모 용량이 큰 관계로 링크로 참조합니다.

 [demo src="solution"]
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		As we can see from HTML/CSS, the slider is a`<div>` with a colored background, that contains a runner -- another`<div>`with `position:relative`.
		HTML·CSS에서 볼 수 있듯이 슬라이더는 배경색이 있는`<div>`로 `position:relative`가 있는 또 다른`<div>`러너를 포함합니다.

		To position the runner we use`position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than`position:absolute`.
		러너의 위치를 지정하려면`position:relative`를 사용하여 상위에 상대적인 좌표를 제공하는데, 이는`position:absolute`보다 더 편리합니다.

		Then we implement horizontal-only Drag'n'Drop with limitation by width.
		그런 다음 가로 너비를 제한하여 수평 전용 드래그 앤 드롭을 구현합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,15 +2,15 @@ importance: 5

		---

		#Slider
		#슬라이더

		Create a slider:
		슬라이더 만들기.

		[iframe src="solution" height=60 border=1]

		Drag the blue thumb with the mouse and move it.
		마우스로 파란 막대를 드래그하여 이동합니다.

		Important details:
		주요 세부사항:

		-When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
		-If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
		-마우스 버튼을 누르면 드래그하는 동안 마우스가 슬라이더 상·하로 이동할 수 있습니다.
		-마우스를 좌·우로 빠르게 움직이면 막대는 가장자리에서 정확히 멈춰야 합니다.
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		To drag the element we can use`position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to`position:absolute` to lay the element into the document.
		요소를 드래그하기 위해`position:fixed`를 사용하면 좌표를 더 쉽게 관리할 수 있습니다. 마지막으로 요소를 문서에 배치하기 위해 다시`position:absolute`로 전환해야 합니다.

		When coordinates are at window top/bottom, we use`window.scrollTo` to scroll it.
		좌표가 창 위·아래쪽에 있으면`window.scrollTo`를 사용하여 스크롤 합니다.

		More details in the code, in comments.
		자세한 내용은 코드에 있는 코멘트를 참조해 주세요.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,19 +2,19 @@ importance: 5

		---

		#Drag superheroes around the field
		#필드 주위로 슈퍼 히어로 드래그하기

		This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
		이 작업을 통해 드래그 앤 드롭 및 DOM의 여러 측면에 대한 이해도를 확인할 수 있습니다.

		Make all elements with class`draggable` -- draggable. Like a ball in the chapter.
		`draggable`클래스의 모든 요소를 드래그할 수 있게 만들어주세요. 이번 장에서 배운 공처럼요.

		Requirements:
		요구 사항:

		-Use event delegation to track drag start: a single event handler on`document` for `mousedown`.
		-If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
		-There is no horizontal scroll (this makes the task a bit simpler, adding it is easy).
		-Draggable elements or their parts should never leave the window, even after swift mouse moves.
		-이벤트 위임을 사용하여 드래그 시작을 추적합니다. `mousedown`는`document`의 단일 이벤트 핸들러입니다.
		-요소를 위·아래쪽 창 가장자리로 드래그하면 페이지가 위·아래로 스크롤 되어 추가로 드래그할 수 있습니다.
		-수평 방향 스크롤은 없습니다(이렇게 하면 작업이 간단해져 쉽게 추가할 수 있음).
		-드래그할 수 있는 요소 또는 그 부분은 마우스를 빠르게 움직인 후에도 창을 벗어나지 않아야 합니다.

		The demo is too big to fit it here, so here's the link.
		데모 용량이 큰 관계로 링크로 참조합니다.

		[demo src="solution"]