May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021 · Jun 1, 2021
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

 ---

 #Hide messages with delegation
 #위임으로 메시지 숨기기

 There's a list of messages with removal buttons`[x]`. Make the buttons work.
 삭제 버튼`[x]`가 있는 메시지 목록이 있습니다. 버튼을 작동 시켜보세요.

 Like this:
 이렇게요.

 [iframe src="solution" height=420]

 P.S. Should be only one event listener on the container, use event delegation.
 참고: 컨테이너에 하나의 이벤트 수신기만 있어야 합니다. 이벤트 위임을 사용해보세요.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
 The solution has two parts.
 해답은 두 부분으로 구성됩니다.

 1.Wrap every tree node title into`<span>`. Then we can CSS-style them on`:hover` and handle clicks exactly on text, because`<span>`width is exactly the text width (unlike without it).
 2.Set a handler to the`tree`root node and handle clicks on that`<span>`titles.
 1.모든 트리 노드 타이틀을`<span>`으로 묶습니다. 그리고`:hover`에서 CSS 스타일을 지정하고 텍스트에 대한 클릭을 정확하게 처리합니다.`<span>`너비는 정확히 텍스트 너비와 일치하기 때문입니다.
 2.핸들러를`tree`루트 노드로 설정하고 해당`<span>`타이틀에 대한 클릭을 처리합니다.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

 ---

 #Tree menu
 #트리 메뉴

 Create a tree that shows/hides node children on click:
 클릭 시 자식 노드를 표시하거나·숨기는 트리를 만들어보세요.

 [iframe border=1 src="solution"]

 Requirements:

 -Only one event handler (use delegation)
 -A click outside the node title (on an empty space) should not do anything.
 -이벤트 핸들러는 위임을 사용하여 한 개만 만듭니다.
 -노드 타이틀 외부(빈 공간)을 클릭해도 아무 작업도 수행되지 않아야 합니다.
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md

 ---

 #Sortable table
 #표 정렬하기

 Make the table sortable: clicks on`<th>`elements should sort it by corresponding column.
 표를 정렬할 수 있게 해주세요.`<th>`요소를 클릭하면 해당 열을 기준으로 정렬됩니다.

 Each `<th>` has the type in the attribute, like this:
 각 `<th>`에는 다음과 같은 속성 유형이 있습니다.

 ```html
 <table id="grid">
 </table>
 ```

 In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
 위의 예시에서 첫 번째 열에는 숫자가 있고 두 번째 열에는 문자열이 있습니다. 정렬하는 함수는 자료형에 따라 처리해야 합니다.

 Only`"string"`and `"number"`types should be supported.
 `"string"`과 `"number"`자료형만 지원해야 합니다.

 The working example:
 작동 예:

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

 P.S. The table can be big, with any number of rows and columns.
 참고: 표는 여러 행과 열을 사용하여 커져도 됩니다.
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

 ---

 #Tooltip behavior
 #툴팁(Tool-tip) 동작

 Create JS-code for the tooltip behavior.
 툴팁 동작에 대한 자바스크립트 코드를 만듭니다.

 When a mouse comes over an element with`data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
 마우스가`data-tooltip`이 있는 요소 위에 오면 그 위에 툴팁이 나타나야 하고 사라지면 숨어야 합니다.

 An example of annotatedHTML:
 주석 달린HTML 예시:
 ```html
 <button data-tooltip="the tooltip is longer than the element">Short button</button>
 <button data-tooltip="HTML<br>tooltip">One more button</button>
 ```

 Should work like this:
 다음과 같이 작동해야 합니다.

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

 In this task we assume that all elements with`data-tooltip` have only text inside. No nested tags (yet).
 이 작업에서는`data-tooltip`이 있는 모든 요소에 텍스트만 있다고 가정합니다. 중첩 태그는 없습니다.

 Details:
 세부 사항:

 -The distance between the element and the tooltip should be`5px`.
 -The tooltip should be centered relative to the element, if possible.
 -The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
 -The tooltip content is given in the`data-tooltip`attribute. It can be arbitrary HTML.
 -요소와 툴팁 사이 거리는`5px`입니다.
 -가능한 경우 툴팁은 요소를 기준으로 중앙에 위치해야 합니다.
 -툴팁은 창 가장자리를 넘지 않아야 합니다. 일반적으로 툴팁은 요소 위에 있어야 하지만, 요소가 페이지 상단에 있고 도구 설명을 위한 공간이 없는 경우 그 아래에 있어야 합니다.
 -툴팁 내용은`data-tooltip`속성으로 제공됩니다. 임의의 HTML 일 수도 있습니다.

 You'll need two events here:
 - `mouseover` triggers when a pointer comes over an element.
 - `mouseout` triggers when a pointer leaves an element.
 여기에는 두 가지 이벤트가 필요합니다.
 - `mouseover`는 포인터가 요소 위에 올 때 트리거 됩니다.
 - `mouseout`은 포인터가 요소를 벗어날 때 트리거 됩니다.

 Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
 이벤트 위임을 사용하세요. `document`에 두 개의 핸들러를 설정하여 `data-tooltip`이 있는 요소의 모든 'overs' 와 'outs'를 추적하고 거기에서 툴팁을 관리하세요.

 After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
 동작이 구현된 후에는 자바스크립트에 익숙하지 않은 사람도 주석이 달린 요소를 추가할 수 있습니다.

 P.S. Only one tooltip may show up at a time.
 참고: 한 번에 하나의 툴팁만 표시될 수 있습니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,12 +2,12 @@ importance: 5

		---

		#Hide messages with delegation
		#위임으로 메시지 숨기기

		There's a list of messages with removal buttons`[x]`. Make the buttons work.
		삭제 버튼`[x]`가 있는 메시지 목록이 있습니다. 버튼을 작동 시켜보세요.

		Like this:
		이렇게요.

		[iframe src="solution" height=420]

		P.S. Should be only one event listener on the container, use event delegation.
		참고: 컨테이너에 하나의 이벤트 수신기만 있어야 합니다. 이벤트 위임을 사용해보세요.
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		The solution has two parts.
		해답은 두 부분으로 구성됩니다.

		1.Wrap every tree node title into`<span>`. Then we can CSS-style them on`:hover` and handle clicks exactly on text, because`<span>`width is exactly the text width (unlike without it).
		2.Set a handler to the`tree`root node and handle clicks on that`<span>`titles.
		1.모든 트리 노드 타이틀을`<span>`으로 묶습니다. 그리고`:hover`에서 CSS 스타일을 지정하고 텍스트에 대한 클릭을 정확하게 처리합니다.`<span>`너비는 정확히 텍스트 너비와 일치하기 때문입니다.
		2.핸들러를`tree`루트 노드로 설정하고 해당`<span>`타이틀에 대한 클릭을 처리합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,13 +2,13 @@ importance: 5

		---

		#Tree menu
		#트리 메뉴

		Create a tree that shows/hides node children on click:
		클릭 시 자식 노드를 표시하거나·숨기는 트리를 만들어보세요.

		[iframe border=1 src="solution"]

		Requirements:

		-Only one event handler (use delegation)
		-A click outside the node title (on an empty space) should not do anything.
		-이벤트 핸들러는 위임을 사용하여 한 개만 만듭니다.
		-노드 타이틀 외부(빈 공간)을 클릭해도 아무 작업도 수행되지 않아야 합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,11 +2,11 @@ importance: 4

		---

		#Sortable table
		#표 정렬하기

		Make the table sortable: clicks on`<th>`elements should sort it by corresponding column.
		표를 정렬할 수 있게 해주세요.`<th>`요소를 클릭하면 해당 열을 기준으로 정렬됩니다.

		Each `<th>` has the type in the attribute, like this:
		각 `<th>`에는 다음과 같은 속성 유형이 있습니다.

		```html
		<table id="grid">
Expand All		@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
		</table>
		```

		In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
		위의 예시에서 첫 번째 열에는 숫자가 있고 두 번째 열에는 문자열이 있습니다. 정렬하는 함수는 자료형에 따라 처리해야 합니다.

		Only`"string"`and `"number"`types should be supported.
		`"string"`과 `"number"`자료형만 지원해야 합니다.

		The working example:
		작동 예:

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

		P.S. The table can be big, with any number of rows and columns.
		참고: 표는 여러 행과 열을 사용하여 커져도 됩니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,37 +2,37 @@ importance: 5

		---

		#Tooltip behavior
		#툴팁(Tool-tip) 동작

		Create JS-code for the tooltip behavior.
		툴팁 동작에 대한 자바스크립트 코드를 만듭니다.

		When a mouse comes over an element with`data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
		마우스가`data-tooltip`이 있는 요소 위에 오면 그 위에 툴팁이 나타나야 하고 사라지면 숨어야 합니다.

		An example of annotatedHTML:
		주석 달린HTML 예시:
		```html
		<button data-tooltip="the tooltip is longer than the element">Short button</button>
		<button data-tooltip="HTML<br>tooltip">One more button</button>
		```

		Should work like this:
		다음과 같이 작동해야 합니다.

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

		In this task we assume that all elements with`data-tooltip` have only text inside. No nested tags (yet).
		이 작업에서는`data-tooltip`이 있는 모든 요소에 텍스트만 있다고 가정합니다. 중첩 태그는 없습니다.

		Details:
		세부 사항:

		-The distance between the element and the tooltip should be`5px`.
		-The tooltip should be centered relative to the element, if possible.
		-The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
		-The tooltip content is given in the`data-tooltip`attribute. It can be arbitrary HTML.
		-요소와 툴팁 사이 거리는`5px`입니다.
		-가능한 경우 툴팁은 요소를 기준으로 중앙에 위치해야 합니다.
		-툴팁은 창 가장자리를 넘지 않아야 합니다. 일반적으로 툴팁은 요소 위에 있어야 하지만, 요소가 페이지 상단에 있고 도구 설명을 위한 공간이 없는 경우 그 아래에 있어야 합니다.
		-툴팁 내용은`data-tooltip`속성으로 제공됩니다. 임의의 HTML 일 수도 있습니다.

		You'll need two events here:
		- `mouseover` triggers when a pointer comes over an element.
		- `mouseout` triggers when a pointer leaves an element.
		여기에는 두 가지 이벤트가 필요합니다.
		- `mouseover`는 포인터가 요소 위에 올 때 트리거 됩니다.
		- `mouseout`은 포인터가 요소를 벗어날 때 트리거 됩니다.

		Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
		이벤트 위임을 사용하세요. `document`에 두 개의 핸들러를 설정하여 `data-tooltip`이 있는 요소의 모든 'overs' 와 'outs'를 추적하고 거기에서 툴팁을 관리하세요.

		After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
		동작이 구현된 후에는 자바스크립트에 익숙하지 않은 사람도 주석이 달린 요소를 추가할 수 있습니다.

		P.S. Only one tooltip may show up at a time.
		참고: 한 번에 하나의 툴팁만 표시될 수 있습니다.