May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021
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

 ---

 #Hide on click
 #클릭 시 텍스트 숨기는 버튼

 Add JavaScript to the`button` to make`<div id="text">` disappear when we click it.
 `button`에 자바스크립트를 추가하여 클릭 시`<div id="text">`가 사라지도록 합니다.

 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
 Can use`this` in the handler to reference "the element itself" here:
 핸들러에서`this`를 사용하여 '요소 자체'를 참조할 수 있습니다.

 ```html run height=50
 <input type="button" onclick="this.hidden=true" value="Click to hide">
 <input type="button" onclick="this.hidden=true" value="클릭 시 버튼 숨기기">
 ```
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

 ---

 #Hide self
 #클릭 시 버튼 숨기기

 Create a button that hides itself on click.
 클릭 시 숨겨지는 버튼을 만들어 보세요.

 ```online
 Like this:
 <input type="button" onclick="this.hidden=true" value="Click to hide">
 이렇게요.
 <input type="button" onclick="this.hidden=true" value="클릭 시 버튼 숨기기">
 ```
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
 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() {
 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

 ---

 #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

 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 {

 #ball {
  position: absolute;
  left: 0; /*relative to the closest positioned ancestor (field) */
  left: 0; /*상대적으로 가장 가까운 위치에 있는 조상(필드) */
  top: 0;
  transition: 1s all; /* CSSanimation 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 getfield-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 theball 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

 ---

 #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

 # 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
 <div class="menu">
 </div>
 ```

 We use`<span>` for the title, because`<div>` has an implicit`display:block` on it, and it will occupy100% of the horizontal width.
 타이틀로`<span>`을 사용합니다. 그 이유는`<div>`에는 암묵적으로`display:block`가 포함되어 있기 때문에 가로 너비의100%를 차지하기 때문이죠.

 Like this:
 이렇게요.

 ```html autorun height=50
 <div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
 ```

 So if we set`onclick` on it, then it will catch clicks to the right of the text.
 따라서`onclick`을 설정하면 텍스트 오른쪽에 클릭이 나타납니다.

 As`<span>` has an implicit`display: inline`, it occupies exactly enough place to fit all the text:
 `<span>`에는 암묵적으로`display: inline`이 있으므로 모든 텍스트에 정확히 맞도록 충분한 공간을 차지합니다.

 ```html autorun height=50
 <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
 ```

 #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 {
 }
 ```

 ...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

 ---

 #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

 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", '<button class="remove-button">[x]</button>');
 ```

 Then the`<button>`becomes `pane.firstChild`, so we can add a handler to it like this:
 그러면`<button>`이 `pane.firstChild`가 되므로 다음과 같이 핸들러를 추가할 수 있습니다.

 ```js
 pane.firstChild.onclick = () => pane.remove();
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

 ---

 #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]
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
 The images ribbon can be represented as`ul/li` list of images `<img>`.
 이미지 묶음은 이미지 `<img>` 목록`ul/li`로 표시할 수 있습니다.

 Normally, such a ribbon is wide, but we put a fixed-size`<div>` around to "cut" it, so that only a part of the ribbon is visible:
 흔히 이러한 이미지 목록은 넓지만 고정 크기인`<div>`로 자르기 하여 목록의 일부만 표시되도록 합니다.

 ![](carousel1.svg)

 To make the list show horizontally we need to apply correct CSS properties for`<li>`, like `display: inline-block`.
 목록을 가로로 표시하려면 `display: inline-block`와 같이`<li>`에 올바른 CSS 속성을 적용해야 합니다.

 For`<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under`inline`elements for "letter tails", so we can use`display:block` to remove it.
 `<img>`의 경우 기본적으로 `inline`이기 때문에 `display`도 조정해야 합니다. 'letter tails'를 위해`inline`요소 아래에 추가 공간이 잡혀있으므로`display:block`을 사용하여 제거할 수 있습니다.

 To do the scrolling, we can shift`<ul>`. There are many ways to do it, for instance by changing`margin-left` or (better performance) use`transform: translateX()`:
 스크롤 하려면`<ul>`을 이동하면 됩니다. 예를 들어`margin-left`를 변경하거나 혹은 (더 나은 구현 가능)`transform: translateX()`를 사용하는 등 여러 가지 방법이 있습니다.

 ![](carousel2.svg)

 The outer`<div>` has a fixed width, so "extra" images are cut.
 바깥쪽`<div>`는 너비가 고정되어 있으므로 추가 이미지가 잘립니다.

 The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single`<div class="carousel">` and style things inside it.
 전체 캐러셀은 페이지에서 자체적으로 포함된 그래픽 구성 요소이므로 단일`<div class="carousel">`로 감싸고 그 안에 있는 것들을 스타일링하는 것이 좋습니다.
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md

 ---

 # Carousel
 #캐러셀 (Carousel)

 Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows.
 캐러셀(화살표를 클릭하여 스크롤 할 수 있는 이미지 묶음) 만들기.

 [iframe height=200 src="solution"]

 Later we can add more features to it: infinite scrolling, dynamic loading etc.
 나중에 무한 스크롤링, 동적 적재 등 더 많은 기능을 추가할 수 있습니다.

 P.S. For this taskHTML/CSSstructure is actually90% of the solution.
 참고:HTML·CSS구조는 해답의90%를 결정합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 5

		---

		#Hide on click
		#클릭 시 텍스트 숨기는 버튼

		Add JavaScript to the`button` to make`<div id="text">` disappear when we click it.
		`button`에 자바스크립트를 추가하여 클릭 시`<div id="text">`가 사라지도록 합니다.

		The demo:
		데모:

		[iframe border=1 src="solution" height=80]
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		Can use`this` in the handler to reference "the element itself" here:
		핸들러에서`this`를 사용하여 '요소 자체'를 참조할 수 있습니다.

		```html run height=50
		<input type="button" onclick="this.hidden=true" value="Click to hide">
		<input type="button" onclick="this.hidden=true" value="클릭 시 버튼 숨기기">
		```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,11 +2,11 @@ importance: 5

		---

		#Hide self
		#클릭 시 버튼 숨기기

		Create a button that hides itself on click.
		클릭 시 숨겨지는 버튼을 만들어 보세요.

		```online
		Like this:
		<input type="button" onclick="this.hidden=true" value="Click to hide">
		이렇게요.
		<input type="button" onclick="this.hidden=true" value="클릭 시 버튼 숨기기">
		```
Original file line number	Diff line number	Diff line change
		@@ -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() {
Expand All		@@ -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`와 함께 독립적으로 작동합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"));
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 {
Expand All		@@ -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; /* CSSanimation 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 getfield-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 theball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
		이때 공의 너비·높이는 `ball.offsetWidth`에 접근할 때 알아야 한다는 것을 주의해 주세요. HTML 혹은 CSS로 지정해야 합니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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`속성을 사용합니다.
Original file line number	Diff line number	Diff line change
		@@ -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
		<div class="menu">
Expand All		@@ -19,29 +19,29 @@ Here's the example structure:
		</div>
		```

		We use`<span>` for the title, because`<div>` has an implicit`display:block` on it, and it will occupy100% of the horizontal width.
		타이틀로`<span>`을 사용합니다. 그 이유는`<div>`에는 암묵적으로`display:block`가 포함되어 있기 때문에 가로 너비의100%를 차지하기 때문이죠.

		Like this:
		이렇게요.

		```html autorun height=50
		<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
		```

		So if we set`onclick` on it, then it will catch clicks to the right of the text.
		따라서`onclick`을 설정하면 텍스트 오른쪽에 클릭이 나타납니다.

		As`<span>` has an implicit`display: inline`, it occupies exactly enough place to fit all the text:
		`<span>`에는 암묵적으로`display: inline`이 있으므로 모든 텍스트에 정확히 맞도록 충분한 공간을 차지합니다.

		```html autorun height=50
		<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
		```

		#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 {
Expand All		@@ -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 {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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를 수정해야 합니다.
Original file line number	Diff line number	Diff line change
		@@ -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", '<button class="remove-button">[x]</button>');
		```

		Then the`<button>`becomes `pane.firstChild`, so we can add a handler to it like this:
		그러면`<button>`이 `pane.firstChild`가 되므로 다음과 같이 핸들러를 추가할 수 있습니다.

		```js
		pane.firstChild.onclick = () => pane.remove();
Expand Down