[과제번역] Part2. 4.4 Form submission: event and method submit 과제 번역 #1122
Conversation
|
Part2. 4.4 Form submission: event and method submit 과제 1문제 문제와 해설 1차 번역 초안입니다. |
|
|
||
| Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`. | ||
| 함수 `showPrompt(html, callback)`를 생성하세요. 함수 showPrompt는 메시지 `html`, 입력 필드 및 `OK·CANCEL`버튼이 있는 폼을 표시하는 함수입니다. |
There was a problem hiding this comment.
메시지 html, 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼을 갖춘 폼을 나타내는 함수 showPrompt(html, callback)을 생성하세요.
| - A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered. | ||
| - Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called. | ||
| - 사용자가 텍스트 필드에 무언가를 입력하고 `key:Enter` 혹은 OK 버튼을 누르면 입력한 값으로 `callback(value)`이 호출됩니다. | ||
| - 그렇지 않으면 사용자가 `key:Esc`혹은 CANCEL 버튼을 누르면 `callback(null)`이 호출됩니다. |
There was a problem hiding this comment.
반면에 사용자가 ESC키나 취소(Cancel) 버튼을 누르면 callback(null)이 호출됩니다.
| - When the form is shown, the focus should be inside the `<input>` for the user. | ||
| - Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements. | ||
| - 폼은 창 중앙에 있어야 합니다. | ||
| - 폼은 '모달'입니다. 즉, 사용자가 페이지를 닫을 때까지 페이지의 나머지 부분과 상호 작용이 불가능합니다. |
There was a problem hiding this comment.
폼은 '모달'이므로 사용자가 폼을 닫을 때까지 페이지의 나머지 부분과 상호 작용이 불가능합니다.
| - 폼은 창 중앙에 있어야 합니다. | ||
| - 폼은 '모달'입니다. 즉, 사용자가 페이지를 닫을 때까지 페이지의 나머지 부분과 상호 작용이 불가능합니다. | ||
| - 폼이 표시될 때 사용자의 `<input>` 내부에 포커스가 있어야 합니다. | ||
| - `key:Tab`·`key:Shift+Tab`은 폼 필드 간에 포커스를 이동해야 하며, 다른 페이지 요소로 이동하지 않도록 합니다. |
There was a problem hiding this comment.
Tab키, Shift+Tab키는 폼 필드 내에서만 포커스를 이동할 수 있어야 하며, 페이지의 다른 요소로는 이동하지 않아야 합니다.
|
|
||
| [iframe src="solution" height=160 border=1] | ||
|
|
||
| P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal. | ||
| 참고: 원본 문서에는 고정된 위치를 가진 폼에 대한 HTML·CSS가 있지만 모달로 만드는 것은 사용자의 몫입니다. |
There was a problem hiding this comment.
참고: 원본 문서에는 position: fixed;로 정의한 폼에 대한 HTML·CSS가 있지만 모달을 만드는 것은 사용자의 몫입니다.
| @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div"> | |||
| } | |||
| ``` | |||
|
|
|||
| Because the `<div>` covers everything, it gets all clicks, not the page below it. | |||
| `<div>`는 모든 것을 다루기 때문에 그 아래 페이지가 아닌 모든 클릭을 얻습니다. | |||
There was a problem hiding this comment.
<div>가 창 전체를 덮기 때문에 항상 밑에 있는 페이지가 아닌 <div>가 클릭 됩니다.
|
|
||
| The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`. | ||
| `불투명`을 원하지 않기 때문에 폼은 `<div>`가 아니라 그 옆에 있어야 합니다. |
There was a problem hiding this comment.
폼이 투명해지는 것을 원치 않기 때문에 <div>의 내부가 아닌 옆에 위치해야 합니다.
|
/done |
Pull Request 체크리스트
TODO