Oct 10, 2022
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
 To bounce we can useCSSproperty `top` and`position:absolute` for the ball inside the field with`position:relative`.
 공을 튀어 오르게 하기 위해서는 공에는CSS프로퍼티인 `top`과`position:absolute`를, 공이 들어있는 필드에는`position:relative`를 사용할 수 있습니다.

 The bottom coordinate of the field is`field.clientHeight`. The CSS`top`property refers to the upper edge of the ball. So it should go from`0` till`field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
 필드의 아래쪽 좌표는`field.clientHeight`입니다.`top`프로퍼티는 공의 위쪽 모서리를 의미합니다. 그러므로 공의 위쪽 모서리는`0`부터 그 위치의 최솟값인`field.clientHeight - ball.clientHeight`까지 움직입니다.

 To to get the "bouncing" effect we can use thetimingfunction `bounce` in `easeOut` mode.
 튀어 오르는 애니메이션 효과를 적용하기 위해 `easeOut`모드에서timing함수 `bounce`를 사용합니다.

 Here's the final code for the animation:
 다음은 애니메이션 효과를 적용한 최종 코드입니다.

 ```js
 let to = field.clientHeight - ball.clientHeight;
diff --git a/7-animation/3-js-animation/1-animate-ball/task.md b/7-animation/3-js-animation/1-animate-ball/task.md

 ---

 #Animate the bouncing ball
 #공에 튀어 오르는 애니메이션 효과 주기

 Make a bouncing ball. Click to see how it should look:
 튀어 오르는 공을 만들어봅시다. 애니메이션이 어떻게 적용되어야 하는지 보려면 클릭해보세요.

 [iframe height=250 src="solution"]
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.md b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
 In the task<info:task/animate-ball>we had only one property to animate. Now we need one more:`elem.style.left`.
 <info:task/animate-ball>과제에서는 애니메이션 효과를 주는 프로퍼티가 오직 한개 존재했습니다. 이제`elem.style.left`라는 하나의 프로퍼티가 더 필요합니다.

 The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
 튀어 오르지 않지만 공이 서서히 오른쪽으로 이동하는 또 다른 규칙에 의해 수평좌표가 바뀝니다.

 We can write one more`animate` for it.
 오른쪽으로 움직이는 것을 위한`animate`를 하나 더 사용할 수 있습니다.

 As thetimefunction we could use`linear`, but something like `makeEaseOut(quad)` looks much better.
 timefunction으로`linear`을 사용할 수 있지만 `makeEaseOut(quad)`같은 것을 사용하는게 더 좋을 것 같습니다.

 The code:
 코드는 다음과 같습니다.

 ```js
 let height = field.clientHeight - ball.clientHeight;
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md

 ---

 #Animate the ball bouncing to the right
 #공을 오른쪽으로 튀어 오르게하는 애니메이션 효과 주기

 Make the ball bounce to the right. Like this:
 다음과 같이 공이 오른쪽으로 튀어 오르게 해봅시다.

 [iframe height=250 src="solution"]

 Write the animation code. The distance to the left is`100px`.
 애니메이션 코드를 작성해보세요. 왼쪽으로부터 거리는`100px`입니다.

 Take the solution of the previous task<info:task/animate-ball> as the source.
 이전 과제<info:task/animate-ball>의 해답을 참고해보세요.
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,10 @@
		To bounce we can useCSSproperty `top` and`position:absolute` for the ball inside the field with`position:relative`.
		공을 튀어 오르게 하기 위해서는 공에는CSS프로퍼티인 `top`과`position:absolute`를, 공이 들어있는 필드에는`position:relative`를 사용할 수 있습니다.

		The bottom coordinate of the field is`field.clientHeight`. The CSS`top`property refers to the upper edge of the ball. So it should go from`0` till`field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
		필드의 아래쪽 좌표는`field.clientHeight`입니다.`top`프로퍼티는 공의 위쪽 모서리를 의미합니다. 그러므로 공의 위쪽 모서리는`0`부터 그 위치의 최솟값인`field.clientHeight - ball.clientHeight`까지 움직입니다.

		To to get the "bouncing" effect we can use thetimingfunction `bounce` in `easeOut` mode.
		튀어 오르는 애니메이션 효과를 적용하기 위해 `easeOut`모드에서timing함수 `bounce`를 사용합니다.

		Here's the final code for the animation:
		다음은 애니메이션 효과를 적용한 최종 코드입니다.

		```js
		let to = field.clientHeight - ball.clientHeight;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,8 +2,8 @@ importance: 5

		---

		#Animate the bouncing ball
		#공에 튀어 오르는 애니메이션 효과 주기

		Make a bouncing ball. Click to see how it should look:
		튀어 오르는 공을 만들어봅시다. 애니메이션이 어떻게 적용되어야 하는지 보려면 클릭해보세요.

		[iframe height=250 src="solution"]
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,12 @@
		In the task<info:task/animate-ball>we had only one property to animate. Now we need one more:`elem.style.left`.
		<info:task/animate-ball>과제에서는 애니메이션 효과를 주는 프로퍼티가 오직 한개 존재했습니다. 이제`elem.style.left`라는 하나의 프로퍼티가 더 필요합니다.

		The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
		튀어 오르지 않지만 공이 서서히 오른쪽으로 이동하는 또 다른 규칙에 의해 수평좌표가 바뀝니다.

		We can write one more`animate` for it.
		오른쪽으로 움직이는 것을 위한`animate`를 하나 더 사용할 수 있습니다.

		As thetimefunction we could use`linear`, but something like `makeEaseOut(quad)` looks much better.
		timefunction으로`linear`을 사용할 수 있지만 `makeEaseOut(quad)`같은 것을 사용하는게 더 좋을 것 같습니다.

		The code:
		코드는 다음과 같습니다.

		```js
		let height = field.clientHeight - ball.clientHeight;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,12 +2,12 @@ importance: 5

		---

		#Animate the ball bouncing to the right
		#공을 오른쪽으로 튀어 오르게하는 애니메이션 효과 주기

		Make the ball bounce to the right. Like this:
		다음과 같이 공이 오른쪽으로 튀어 오르게 해봅시다.

		[iframe height=250 src="solution"]

		Write the animation code. The distance to the left is`100px`.
		애니메이션 코드를 작성해보세요. 왼쪽으로부터 거리는`100px`입니다.

		Take the solution of the previous task<info:task/animate-ball> as the source.
		이전 과제<info:task/animate-ball>의 해답을 참고해보세요.