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..b12755504c 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] 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..fc5d570c24 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 - + ``` 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..9b086559a6 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: - +이렇게요. + ``` 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..1d17ffcf46 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`와 함께 독립적으로 작동합니다. 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..0c82fb4c75 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")); 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..4358e52177 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 { @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field: #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 애니메이션으로 왼쪽·위쪽으로 공이 날아가요. */ } ``` -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로 지정해야 합니다. 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..a310857050 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`속성을 사용합니다. 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..7af1709c88 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 { 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..7f0361fa6b 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를 수정해야 합니다. 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..fa7b9558b4 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 `