[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.35,0:00:03.72,Default,,0000,0000,0000,,다시 '오 노'\N카운트다운으로 돌아왔어요
Dialogue: 0,0:00:03.72,0:00:07.14,Default,,0000,0000,0000,,만약 '오 노' 친구가\N점점 커지게 하려면요?
Dialogue: 0,0:00:07.14,0:00:09.52,Default,,0000,0000,0000,,카운트다운이\N0에 가까워지면서요
Dialogue: 0,0:00:09.52,0:00:12.78,Default,,0000,0000,0000,,마지막에 더 가까워지는\N것처럼 보이게요
Dialogue: 0,0:00:12.78,0:00:13.98,Default,,0000,0000,0000,,이 효과를 주는\N첫번째 방법은
Dialogue: 0,0:00:13.98,0:00:19.37,Default,,0000,0000,0000,,이 이미지의 CSS스타일을\Nwindow.setInterval로 주는 거에요
Dialogue: 0,0:00:20.17,0:00:22.43,Default,,0000,0000,0000,,첫번째로\N이미지를 찾아서
Dialogue: 0,0:00:22.43,0:00:24.90,Default,,0000,0000,0000,,변수 형태로\N저장해둘게요
Dialogue: 0,0:00:24.90,0:00:32.23,Default,,0000,0000,0000,,'var ohnoes = \Ndocument.getElementById("ohnoes");'
Dialogue: 0,0:00:32.23,0:00:34.36,Default,,0000,0000,0000,,그리고 시작스타일을\N지정할 거에요
Dialogue: 0,0:00:34.36,0:00:36.45,Default,,0000,0000,0000,,같은 크기에서\N시작하게 말이죠
Dialogue: 0,0:00:36.45,0:00:39.42,Default,,0000,0000,0000,,이렇게 하면 어느 정도부터\N커져야 하는지 알 수도 있어요
Dialogue: 0,0:00:39.42,0:00:43.81,Default,,0000,0000,0000,,이제 makeItBigger함수를\N선언할거에요
Dialogue: 0,0:00:43.81,0:00:47.18,Default,,0000,0000,0000,,그래서 매번\N커지게 만들거에요
Dialogue: 0,0:00:48.07,0:00:52.06,Default,,0000,0000,0000,,이 함수에서는\Nstyle.width를 바꿀거에요
Dialogue: 0,0:00:52.94,0:00:57.96,Default,,0000,0000,0000,,이전 style.width를 가져와서\N1을 더해줄 거에요
Dialogue: 0,0:00:59.91,0:01:04.44,Default,,0000,0000,0000,,마지막으로 이 함수를\NsetInterval을 통해 호출할거에요
Dialogue: 0,0:01:04.44,0:01:07.66,Default,,0000,0000,0000,,'window.setInterval(makeItBigger);'
Dialogue: 0,0:01:07.66,0:01:09.70,Default,,0000,0000,0000,,얼마나 커지게\N할 것인지나
Dialogue: 0,0:01:09.70,0:01:11.78,Default,,0000,0000,0000,,얼마나 자주 커지게\N할 것인지를 정할거에요
Dialogue: 0,0:01:11.78,0:01:13.51,Default,,0000,0000,0000,,우리는 부드러운\N효과를 원하니까
Dialogue: 0,0:01:13.51,0:01:14.66,Default,,0000,0000,0000,,그 말은 보통
Dialogue: 0,0:01:14.66,0:01:18.76,Default,,0000,0000,0000,,초당 24프레임에서\N60프레임 정도를 말해요
Dialogue: 0,0:01:18.76,0:01:21.20,Default,,0000,0000,0000,,저는 초당\N30프레임으로 할게요
Dialogue: 0,0:01:21.20,0:01:23.74,Default,,0000,0000,0000,,즉\N30분의 1000이죠
Dialogue: 0,0:01:25.68,0:01:27.94,Default,,0000,0000,0000,,그래요\N동작하지 않네요
Dialogue: 0,0:01:28.58,0:01:31.19,Default,,0000,0000,0000,,이유를 알 것 같나요?\N약간 복잡해요
Dialogue: 0,0:01:31.19,0:01:33.63,Default,,0000,0000,0000,,여기로 가서\N한번 생각해보죠
Dialogue: 0,0:01:33.64,0:01:40.50,Default,,0000,0000,0000,,이 줄 다음에 오는\Nohnoes.style.width의 값은 뭐죠?
Dialogue: 0,0:01:41.31,0:01:45.76,Default,,0000,0000,0000,,50픽셀이었으니\N51픽셀이라고 생각하지만
Dialogue: 0,0:01:45.76,0:01:49.94,Default,,0000,0000,0000,,로그를 보고\Nohnoes.style.width의 값을 알아보죠
Dialogue: 0,0:01:49.94,0:01:52.27,Default,,0000,0000,0000,,우리는 infoDiv에서\N이 값을 볼 거니까
Dialogue: 0,0:01:52.27,0:01:57.98,Default,,0000,0000,0000,,'= ohnoes.style.width;'\N한번 봐요
Dialogue: 0,0:01:57.98,0:02:00.48,Default,,0000,0000,0000,,50픽셀이네요\N좋아요
Dialogue: 0,0:02:00.48,0:02:05.33,Default,,0000,0000,0000,,그럼 50픽셀에\N1을 더하려고 해요
Dialogue: 0,0:02:05.33,0:02:07.34,Default,,0000,0000,0000,,50픽셀 더하기\N1은 뭐죠?
Dialogue: 0,0:02:07.34,0:02:09.54,Default,,0000,0000,0000,,여러분은 51픽셀이라고\N하겠지만
Dialogue: 0,0:02:09.55,0:02:14.88,Default,,0000,0000,0000,,자바스크립트는 '50px'를\N문자열로 인식해요
Dialogue: 0,0:02:15.86,0:02:20.02,Default,,0000,0000,0000,,그러니까 '50px1'이\N되는거에요
Dialogue: 0,0:02:20.02,0:02:21.69,Default,,0000,0000,0000,,아무 의미도\N없는 말이죠
Dialogue: 0,0:02:22.52,0:02:25.82,Default,,0000,0000,0000,,그러니까 브라우저는\N우리의 시도를 무시하고 있을거에요
Dialogue: 0,0:02:25.82,0:02:28.83,Default,,0000,0000,0000,,폭 값을 말도 안되는 값으로\N설정하려고 하니까요
Dialogue: 0,0:02:29.63,0:02:35.49,Default,,0000,0000,0000,,우리는 단위가 달린 숫자를\N그냥 숫자로 변환하고
Dialogue: 0,0:02:35.49,0:02:40.18,Default,,0000,0000,0000,,숫자에 1을 더해서\N그 뒤에 'px'를 붙여야해요
Dialogue: 0,0:02:41.05,0:02:45.47,Default,,0000,0000,0000,,이걸 하려면 처음에\NparseFloat을 쓰면
Dialogue: 0,0:02:45.47,0:02:47.45,Default,,0000,0000,0000,,숫자로\N바꿀 수 있어요
Dialogue: 0,0:02:47.45,0:02:49.87,Default,,0000,0000,0000,,이걸 모두\N더한 후에
Dialogue: 0,0:02:49.87,0:02:52.80,Default,,0000,0000,0000,,마지막에 'px'를\N붙여주면 돼요
Dialogue: 0,0:02:52.80,0:02:54.46,Default,,0000,0000,0000,,와!\N동작하네요
Dialogue: 0,0:02:54.46,0:02:56.93,Default,,0000,0000,0000,,얘가 점점\N커지고 있어요!
Dialogue: 0,0:02:56.93,0:02:59.48,Default,,0000,0000,0000,,이제 여러분은\N약간 복잡한 부분을 배웠어요
Dialogue: 0,0:02:59.48,0:03:01.13,Default,,0000,0000,0000,,CSS속성으로\N효과를 줄 때 말이죠
Dialogue: 0,0:03:01.13,0:03:03.12,Default,,0000,0000,0000,,대부분 단위들이\N붙어있으니까
Dialogue: 0,0:03:03.12,0:03:04.75,Default,,0000,0000,0000,,먼저 여러분은\N단위를 떼내고\N
Dialogue: 0,0:03:04.75,0:03:05.89,Default,,0000,0000,0000,,어머나\N얘가 계속 커져요
Dialogue: 0,0:03:05.89,0:03:10.19,Default,,0000,0000,0000,,다시 단위를\N붙여줘야해요
Dialogue: 0,0:03:10.75,0:03:14.27,Default,,0000,0000,0000,,근데 얘가 점점\N무서워지려고 하네요
Dialogue: 0,0:03:14.27,0:03:17.61,Default,,0000,0000,0000,,사실 더 무서운 것들이\N몇 가지 있어요
Dialogue: 0,0:03:17.61,0:03:21.32,Default,,0000,0000,0000,,이 CSS에 효과를 줄 때\NsetInterval을 사용하면 말이죠
Dialogue: 0,0:03:21.32,0:03:24.33,Default,,0000,0000,0000,,첫번째로\N브라우저가 보장하지 않아요
Dialogue: 0,0:03:24.33,0:03:28.46,Default,,0000,0000,0000,,이 속도를 정확히\N따라가는 걸 말이죠
Dialogue: 0,0:03:28.46,0:03:31.70,Default,,0000,0000,0000,,사용자 움직임 같은\N다른 것들이 띄워진다면
Dialogue: 0,0:03:31.70,0:03:33.51,Default,,0000,0000,0000,,문자를 친다거나 할때
Dialogue: 0,0:03:33.51,0:03:36.10,Default,,0000,0000,0000,,그러면 여러분의 콜백 함수가\N늦게 불려져서
Dialogue: 0,0:03:36.10,0:03:38.67,Default,,0000,0000,0000,,부드러운 효과를\N얻지 못할 수도 있어요
Dialogue: 0,0:03:38.67,0:03:41.19,Default,,0000,0000,0000,,두번째로는 브라우저가\N함수를 계속 호출하게 되니까
Dialogue: 0,0:03:41.19,0:03:43.04,Default,,0000,0000,0000,,만약 이 탭이\N가려져 있더라도 말이죠
Dialogue: 0,0:03:43.04,0:03:47.07,Default,,0000,0000,0000,,컴퓨터의 작업 수행량을\N불필요하게 소비한다는거에요
Dialogue: 0,0:03:48.08,0:03:51.80,Default,,0000,0000,0000,,그래서 최신 브라우저에는\N새로운 함수가 있어요
Dialogue: 0,0:03:51.80,0:03:55.28,Default,,0000,0000,0000,,DOM 효과를 위해\N디자인 된 기능이죠
Dialogue: 0,0:03:55.28,0:03:59.13,Default,,0000,0000,0000,,'window.requestAnimationFrame'\N이라고 불러요
Dialogue: 0,0:03:59.15,0:04:03.40,Default,,0000,0000,0000,,이걸 사용하려면\NsetInterval부분을 지우고
Dialogue: 0,0:04:03.40,0:04:08.11,Default,,0000,0000,0000,,'requestAnimationFrame'을\N호출할 거에요
Dialogue: 0,0:04:08.11,0:04:11.56,Default,,0000,0000,0000,,이 함수 안에서\N말이죠
Dialogue: 0,0:04:11.56,0:04:14.96,Default,,0000,0000,0000,,그리고 참조를\N해줄 거에요
Dialogue: 0,0:04:14.96,0:04:18.93,Default,,0000,0000,0000,,makeItBigger함수를\N호출하게 말이죠
Dialogue: 0,0:04:18.93,0:04:24.18,Default,,0000,0000,0000,,그러면 페이지가 로드될 때\NmakeItBigger함수를 호출하겠죠
Dialogue: 0,0:04:24.18,0:04:26.79,Default,,0000,0000,0000,,'makeItBigger();'
Dialogue: 0,0:04:26.79,0:04:28.16,Default,,0000,0000,0000,,오\N좋아요
Dialogue: 0,0:04:28.16,0:04:30.97,Default,,0000,0000,0000,,이번엔 정말 빠르게\N커지고 있네요
Dialogue: 0,0:04:30.97,0:04:33.82,Default,,0000,0000,0000,,브라우저는 이제\NmakeItBigger를 호출해요
Dialogue: 0,0:04:33.82,0:04:37.90,Default,,0000,0000,0000,,그려지기 바로 직전에요\N초당 60프레임정도로요
Dialogue: 0,0:04:37.90,0:04:40.20,Default,,0000,0000,0000,,저번에 설정했던 값의\N두 배 정도 되네요
Dialogue: 0,0:04:40.20,0:04:43.10,Default,,0000,0000,0000,,그리고 매번 폭에 1픽셀을\N더하고 있으니까
Dialogue: 0,0:04:43.10,0:04:45.34,Default,,0000,0000,0000,,계산 해보세요\N우리 수학 잘하잖아요
Dialogue: 0,0:04:45.34,0:04:47.91,Default,,0000,0000,0000,,초당 60픽셀정도를\N더하고 있는 거에요
Dialogue: 0,0:04:47.91,0:04:50.96,Default,,0000,0000,0000,,몇 초안에 얘가\N페이지보다 더 커질거에요
Dialogue: 0,0:04:50.96,0:04:53.16,Default,,0000,0000,0000,,이제 사라졌네요
Dialogue: 0,0:04:53.16,0:04:56.05,Default,,0000,0000,0000,,그럼 이 효과를\N어떻게 늦출 수 있을까요?
Dialogue: 0,0:04:56.05,0:04:58.47,Default,,0000,0000,0000,,몇 가지 방법이 있지만\N제가 좋아하는 방법은
Dialogue: 0,0:04:58.47,0:05:01.05,Default,,0000,0000,0000,,시간이 얼마나 지났는지\N기록하고 있다가
Dialogue: 0,0:05:01.05,0:05:04.83,Default,,0000,0000,0000,,그걸 기준으로\N새로운 폭을 계산하는 거에요
Dialogue: 0,0:05:04.83,0:05:08.81,Default,,0000,0000,0000,,밀리초 단위의 시작 시간을\N기록해두는 걸로 시작해요
Dialogue: 0,0:05:08.81,0:05:10.46,Default,,0000,0000,0000,,함수가 불리기\N전에 말이죠
Dialogue: 0,0:05:10.46,0:05:12.57,Default,,0000,0000,0000,,'var startTime'
Dialogue: 0,0:05:12.57,0:05:14.27,Default,,0000,0000,0000,,다시 커지고 있어요
Dialogue: 0,0:05:14.27,0:05:16.51,Default,,0000,0000,0000,,'new Date().getTime();'
Dialogue: 0,0:05:17.10,0:05:20.33,Default,,0000,0000,0000,,그리고 makeItBigger안에\N현재 시간을 저장해요
Dialogue: 0,0:05:20.33,0:05:26.33,Default,,0000,0000,0000,,'var currTime =\Nnew Date().getTime();'
Dialogue: 0,0:05:26.33,0:05:28.55,Default,,0000,0000,0000,,계산을\N위해서는
Dialogue: 0,0:05:28.55,0:05:31.80,Default,,0000,0000,0000,,초당 30픽셀만큼\N커지게 하고싶다고 해봐요
Dialogue: 0,0:05:31.80,0:05:34.23,Default,,0000,0000,0000,,시작은\N50픽셀로 할게요
Dialogue: 0,0:05:34.23,0:05:37.37,Default,,0000,0000,0000,,그럼 이제 여기서\N이걸 계산해요
Dialogue: 0,0:05:37.37,0:05:44.27,Default,,0000,0000,0000,,newWidth은 50이니까\N시작하는 폭이요
Dialogue: 0,0:05:44.27,0:05:48.96,Default,,0000,0000,0000,,현재 시간에서 시작 시간을\N뺀 값을 더해요
Dialogue: 0,0:05:48.96,0:05:50.29,Default,,0000,0000,0000,,이건 밀리초 단위라서
Dialogue: 0,0:05:50.29,0:05:52.80,Default,,0000,0000,0000,,천으로\N나눌 거에요
Dialogue: 0,0:05:52.80,0:05:56.91,Default,,0000,0000,0000,,그리고 거기에\N30을 곱해서
Dialogue: 0,0:05:56.91,0:05:59.45,Default,,0000,0000,0000,,왜냐하면 초당\N30픽셀씩 커지길 원하니까요
Dialogue: 0,0:05:59.45,0:06:01.75,Default,,0000,0000,0000,,좋아요\N이게 newWidth네요
Dialogue: 0,0:06:01.75,0:06:09.28,Default,,0000,0000,0000,,그리고 style.Width를\NnewWidth로 해줘요
Dialogue: 0,0:06:12.17,0:06:14.23,Default,,0000,0000,0000,,오\N좋아요
Dialogue: 0,0:06:14.23,0:06:20.36,Default,,0000,0000,0000,,초당 30픽셀로\N아주 부드럽게요
Dialogue: 0,0:06:20.36,0:06:27.99,Default,,0000,0000,0000,,만약 느리거나 빠르게 하고싶다면\N이 값을 바꿔주면 돼요
Dialogue: 0,0:06:31.03,0:06:34.37,Default,,0000,0000,0000,,얘가 너무 커졌을 때\N어떻게 멈추면 될까요?
Dialogue: 0,0:06:34.37,0:06:37.88,Default,,0000,0000,0000,,이 부분을 그냥\Nif문안에 넣어서
Dialogue: 0,0:06:37.88,0:06:45.14,Default,,0000,0000,0000,,현재 폭이 특정 값보다\N작을 때만 수행되게요
Dialogue: 0,0:06:45.14,0:06:49.70,Default,,0000,0000,0000,,예를 들어 300정도로\N한번 해볼게요
Dialogue: 0,0:06:54.32,0:06:58.48,Default,,0000,0000,0000,,사실 currentWidth은 -\N아니 newWidth네요
Dialogue: 0,0:06:58.48,0:07:01.27,Default,,0000,0000,0000,,좋아요\N300이 될 때까지 봐요
Dialogue: 0,0:07:03.67,0:07:04.74,Default,,0000,0000,0000,,'오 노'\N파이팅!
Dialogue: 0,0:07:04.74,0:07:05.84,Default,,0000,0000,0000,,할 수 있어!
Dialogue: 0,0:07:06.69,0:07:08.68,Default,,0000,0000,0000,,와\N아름다워요
Dialogue: 0,0:07:08.68,0:07:12.54,Default,,0000,0000,0000,,requestAnimationFrame을\N사용하는 방법은
Dialogue: 0,0:07:12.54,0:07:17.49,Default,,0000,0000,0000,,크롬이나 파이어폭스\N익스플로러 10이상을 쓰면 될 거에요
Dialogue: 0,0:07:18.30,0:07:21.43,Default,,0000,0000,0000,,수많은 자바스크립트\N라이브러리나 도구가 있는데
Dialogue: 0,0:07:21.43,0:07:25.62,Default,,0000,0000,0000,,requestAnimationFrame을\N지원할 때는 사용하고
Dialogue: 0,0:07:25.62,0:07:29.54,Default,,0000,0000,0000,,예전 브라우저에서는\NsetInterval로 바꿔서 사용하게 해줘요
Dialogue: 0,0:07:30.12,0:07:32.58,Default,,0000,0000,0000,,이게 웹 개발에 대한\N중요한 점이에요
Dialogue: 0,0:07:32.58,0:07:34.70,Default,,0000,0000,0000,,웹은 항상\N변하고 있고
Dialogue: 0,0:07:34.70,0:07:36.33,Default,,0000,0000,0000,,브라우저는 계속\N새로운 기능을 추가하고
Dialogue: 0,0:07:36.33,0:07:40.24,Default,,0000,0000,0000,,개발자들은 새 기능을 이용하는\N새로운 방법을 찾아내고 있으니
Dialogue: 0,0:07:40.24,0:07:43.56,Default,,0000,0000,0000,,여러분은 계속해서\N새로운 것을 배우고
Dialogue: 0,0:07:43.56,0:07:46.27,Default,,0000,0000,0000,,여러분이 하고 싶은 것에\N뭐가 최선인지 배워야 해요