From f22009c798270b6ba74be5daa82b80b14d3346da Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:45:07 +0900 Subject: [PATCH 01/28] 2.2.1.1.task --- .../01-introduction-browser-events/01-hide-other/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md index 7cb0cb0c99..cb2551f566 100644 --- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md +++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md @@ -2,10 +2,10 @@ importance: 5 --- -# Hide on click +# 클릭 시 텍스트 숨기는 버튼 -Add JavaScript to the `button` to make `
` disappear when we click it. +`button` 에 자바스크립트를 추가하여 클릭 시 `
`가 사라지도록 합니다. -The demo: +데모: [iframe border=1 src="solution" height=80] From 768f308c318bd5f35154b3e59b864095f29fcdea Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:48:09 +0900 Subject: [PATCH 02/28] 2.2.1.2.task --- .../02-hide-self-onclick/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md index 9ee8f18e14..74559996fd 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Hide self +# 클릭 시 버튼 숨기기 -Create a button that hides itself on click. +클릭 시 숨겨지는 버튼을 만들어 보세요. ```online -Like this: - +이렇게요. + ``` From 04454c3d750a421ae7952c0fc8cf562bfeba2478 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:48:53 +0900 Subject: [PATCH 03/28] 2.2.1.2.solution --- .../02-hide-self-onclick/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md index cded5b622a..a9710d0515 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md @@ -1,5 +1,5 @@ -Can use `this` in the handler to reference "the element itself" here: +핸들러에서 `this`를 사용하여 '요소자체'를 참조할 수 있습니다. ```html run height=50 - + ``` From b82316717c56cebaf1e9dac56ee2ad0ef0b554b1 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:49:43 +0900 Subject: [PATCH 04/28] 2.2.1.3.task --- .../03-which-handlers-run/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md index f8cd75d5a7..c9f9d44fd7 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Which handlers run? +# 어떤 핸들러가 실행될 지 알아보기 -There's a button in the variable. There are no handlers on it. +변수에 버튼이 들어있습니다. 아직 핸들러는 없습니다. -Which handlers run on click after the following code? Which alerts show up? +아래 코드에 따라 클릭 시 어떤 핸들러가 실행될까요? 어떤 얼럿 창이 표시될까요? ```js no-beautify button.addEventListener("click", () => alert("1")); From 2ecaee06dc6a288c8d49ead6988d143582ac7c3b Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:50:31 +0900 Subject: [PATCH 05/28] 2.2.1.3.solution --- .../03-which-handlers-run/solution.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md index d569f0e4d3..a6b4da9d60 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md @@ -1,8 +1,8 @@ -The answer: `1` and `2`. +해답: `1` 과 `2` -The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function. +첫 번째 핸들러는 `removeEventListener`에 의해 제거되지 않았기 때문에 트리거됩니다. 핸들러를 제거하려면 할당된 함수를 정확히 전달해야 합니다. 그리고 코드에 새로운 함수가 전달되는데, 이 함수는 똑같아 보이지만 여전히 다른 함수입니다. -To remove a function object, we need to store a reference to it, like this: +함수 객체를 제거하려면 다음과 같이 참조를 저장해야 합니다. ```js function handler() { @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -The handler `button.onclick` works independently and in addition to `addEventListener`. +`button.onclick`핸들러는 `addEventListener`와 함께 독립적으로 작동합니다. From bb05ccc2d95e00b1dcfd697a6dc217b3baee7a50 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:51:51 +0900 Subject: [PATCH 06/28] 2.2.1.4.task --- .../04-move-ball-field/task.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md index d5269147a0..a444fb2858 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md @@ -2,20 +2,20 @@ importance: 5 --- -# Move the ball across the field +# 필드를 가로 질러 공 이동하기 -Move the ball across the field to a click. Like this: +클릭 시 필드를 가로질러 공을 이동합니다. 이렇게요. [iframe src="solution" height="260" link] -Requirements: +요구 사항: -- The ball center should come exactly under the pointer on click (if possible without crossing the field edge). -- CSS-animation is welcome. -- The ball must not cross field boundaries. -- When the page is scrolled, nothing should break. +- 공의 중심은 클릭 시 정확히 포인터 아래에 와야 합니다(가능하면 필드 가장자리를 가로 지르지 않도록 함). +- CSS 애니메이션은 환영입니다. +- 공은 필드의 경계를 넘어서는 안됩니다. +- 페이지를 스크롤할 때 깨짐이 없도록 합니다. -Notes: +주의: -- The code should also work with different ball and field sizes, not be bound to any fixed values. -- Use properties `event.clientX/event.clientY` for click coordinates. +- 코드는 고정 값에 구속되지 않고, 다른 공 및 필드 크기에서도 작동해야 합니다. +- 클릭 좌표에 `event.clientX/event.clientY`속성을 사용합니다. From 74fdc84a9ab5eec70bb5e9daef4f6ec352cdd6db Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:54:10 +0900 Subject: [PATCH 07/28] 2.1.1.4.solution --- .../04-move-ball-field/solution.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index b04cb82314..0b8488ad70 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -1,11 +1,11 @@ -First we need to choose a method of positioning the ball. +우선 공을 배치하는 방법을 선택해야 합니다. -We can't use `position:fixed` for it, because scrolling the page would move the ball from the field. +페이지를 스크롤하면 공이 필드에서 이동하므로 `position:fixed`를 사용할 수 없습니다. -So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned. +그래서 `position:absolute`를 사용해야 하고 위치를 확고히 하기 위해서 `field` 자체를 위치로 결정해야 합니다. -Then the ball will be positioned relatively to the field: +그리고 공을 필드에 상대적으로 배치시킵니다. ```css #field { @@ -22,30 +22,30 @@ Then the ball will be positioned relatively to the field: } ``` -Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now. +그런 다음 올바른 `ball.style.left/top`를 할당해야 합니다. 이제 상대적인 필드 기준 좌표가 포함됩니다. -Here's the picture: +사진은 다음과 같습니다. ![](move-ball-coords.svg) -We have `event.clientX/clientY` -- window-relative coordinates of the click. +`event.clientX/clientY`가 있습니다. 클릭 좌표 window-relative를 표시합니다. -To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: +클릭 field-relative `left` 좌표를 얻으려면 필드 왼쪽 가장자리와 테두리 너비를 빼면 됩니다. ```js let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. +일반적으로 `ball.style.left`는 '요소의 왼쪽 가장자리'(공)를 의미합니다. 따라서 `left`를 할당하면 중앙이 아닌 공 가장자리가 마우스 커서 아래에 있게 됩니다. -We need to move the ball half-width left and half-height up to make it center. +중앙으로 가게 만드려면 공을 왼쪽으로 반 너비, 위쪽으로 반 높이 이동해야 합니다. -So the final `left` would be: +따라서 `left`은 다음과 같습니다. ```js let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` -The vertical coordinate is calculated using the same logic. +수직 좌표는 동일한 논리를 사용하여 계산됩니다. -Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS. +이때 공의 너비·높이는 `ball.offsetWidth`에 엑세스 할 때 알아야 한다는 것을 주의해주세요. HTML 혹은 CSS로 지정해야 합니다. From 9e65ef605189c62edebb5d25ab3d99f5d2bf79c6 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:54:38 +0900 Subject: [PATCH 08/28] Update solution.md --- .../04-move-ball-field/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index 0b8488ad70..123177fb9a 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -16,9 +16,9 @@ #ball { position: absolute; - left: 0; /* relative to the closest positioned ancestor (field) */ + left: 0; /* 상대적으로 가장가까운 위치에 있는 조상(필드) */ top: 0; - transition: 1s all; /* CSS animation for left/top makes the ball fly */ + transition: 1s all; /* CSS 애니메이션으로 왼쪽·위쪽으로 공이 날아가요 */ } ``` From 64822f88fafcdac967b3052e5c39e1ee33fe2a96 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:55:29 +0900 Subject: [PATCH 09/28] 2.2.1.5.task --- .../01-introduction-browser-events/05-sliding-menu/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md index 34c3137103..d427bf1459 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md @@ -2,10 +2,10 @@ importance: 5 --- -# Create a sliding menu +# 슬라이딩 메뉴 만들기 -Create a menu that opens/collapses on click: +클릭 시 메뉴가 열리거나·접히도록 만들어보세요. [iframe border=1 height=100 src="solution"] -P.S. HTML/CSS of the source document is to be modified. +참고: 원본 문서의 HTML·CSS를 수정해야 합니다. From 10c61955d01d818f41aa1fcff00ccf154a413834 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:57:51 +0900 Subject: [PATCH 10/28] 2.2.1.5.solution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메뉴로 할지 애칭으로 번역할지 몰라서 일단 영어로 두었습니다. --- .../05-sliding-menu/solution.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md index 7554a2f09d..474039f4d2 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md @@ -1,12 +1,12 @@ -# HTML/CSS -First let's create HTML/CSS. +# HTML·CSS +우선 HTML·CSS를 만들어 봅시다. -A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element. +메뉴는 페이지의 독립 실행형 그래픽 구성요소이므로 단일 DOM 요소에 입력하는 것이 좋습니다. -A list of menu items can be laid out as a list `ul/li`. +메뉴 항목 목록은 `ul/li`으로 배치할 수 있습니다. -Here's the example structure: +다음은 구조의 예시입니다. ```html
@@ -19,29 +19,29 @@ Here's the example structure:
``` -We use `` for the title, because `
` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width. +타이틀로 ``을 사용합니다. 그 이유는 `
`에는 암묵적으로 `display:block`가 포함되어 있기 때문에 가로 너비의 100%를 차지하기 때문이죠. -Like this: +이렇게요. ```html autorun height=50
Sweeties (click me)!
``` -So if we set `onclick` on it, then it will catch clicks to the right of the text. +따라서 `onclick`을 설정하면 텍스트 오른쪽에 클릭이 나타납니다. -As `` has an implicit `display: inline`, it occupies exactly enough place to fit all the text: +``에는 암묵적으로 `display: inline`이 있으므로 모든 텍스트에 정확히 맞도록 충분한 공간을 차지합니다. ```html autorun height=50 Sweeties (click me)! ``` -# Toggling the menu +# 메뉴 토글하기 -Toggling the menu should change the arrow and show/hide the menu list. +메뉴를 토글하면 화살표가 변경되고 메뉴 목록이 표시되거나·숨겨집니다. -All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`. +이러한 모든 변경 사항들은 CSS에 의해 완벽하게 처리됩니다. 자바 스크립트에서 `.open`클래스를 추가·제거하여 메뉴의 현재 상태에 레이블을 지정해야 합니다. -Without it, the menu will be closed: +레이블 지정이 없으면 메뉴가 닫힙니다. ```css .menu ul { @@ -58,7 +58,7 @@ Without it, the menu will be closed: } ``` -...And with `.open` the arrow changes and the list shows up: +`.open`을 사용하면 화살표가 변경되고 목록이 표시됩니다. ```css .menu.open .title::before { From 932c7bfb01c2759e36f8f2517404b6c80dab75d6 Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:58:41 +0900 Subject: [PATCH 11/28] 2.2.1.6.task --- .../06-hide-message/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md index 152cf41fe6..e99d94e2f1 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Add a closing button +# 닫기 버튼 추가하기 -There's a list of messages. +메시지 목록이 있습니다. -Use JavaScript to add a closing button to the right-upper corner of each message. +자바스크립트를 사용하여 각 메시지의 우측 상단 모서리에 닫기 버튼을 추가합니다. -The result should look like this: +결과는 다음과 같아야 합니다. [iframe src="solution" height=450] From 4c2f734ac760366daf7c9c429f9abe74c5c1c5db Mon Sep 17 00:00:00 2001 From: sese3211 <80062632+sese3211@users.noreply.github.com> Date: Mon, 24 May 2021 14:59:12 +0900 Subject: [PATCH 12/28] 2.2.1.6.solution --- .../06-hide-message/solution.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md index 022a0d9774..ebba5afcc5 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md @@ -1,12 +1,12 @@ -To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours. +버튼을 추가하려면 `position:absolute` (그리고 패널 `position:relative` 만들기) 과 `float:right` 중 하나를 사용할 수 있습니다. `float:right`는 버튼이 텍스트와 겹치지 않는다는 장점이 있지만 `position:absolute` 은 조금 더 자유롭게 배치할 수 있습니다. 어떤 것을 사용할 지 선택해주세요. -Then for each pane the code can be like: +각 패널의 코드는 다음과 같을 수 있습니다. ```js pane.insertAdjacentHTML("afterbegin", ''); ``` -Then the `