[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.03,0:00:03.74,Default,,0000,0000,0000,,좋아요\N지금쯤 여러분은
Dialogue: 0,0:00:03.74,0:00:05.54,Default,,0000,0000,0000,,'setInterval'을 쓸 지
Dialogue: 0,0:00:05.54,0:00:07.20,Default,,0000,0000,0000,,'requestAnimationFrame'\N을 쓸 지 고민이 될 거에요
Dialogue: 0,0:00:07.20,0:00:08.85,Default,,0000,0000,0000,,여러분이\N효과를 주고 싶을 때요
Dialogue: 0,0:00:08.85,0:00:10.22,Default,,0000,0000,0000,,하지만 전\N더 나아가서
Dialogue: 0,0:00:10.22,0:00:12.12,Default,,0000,0000,0000,,다른 선택지를\N제시할게요
Dialogue: 0,0:00:13.58,0:00:16.93,Default,,0000,0000,0000,,크롬, 파이어폭스와\N익스플로러 10 이상에서는
Dialogue: 0,0:00:16.93,0:00:21.61,Default,,0000,0000,0000,,CSS로 효과를 주는\N다른 방법이 있어요
Dialogue: 0,0:00:21.61,0:00:24.24,Default,,0000,0000,0000,,자바스크립트를\N사용하지 않고 말이죠
Dialogue: 0,0:00:24.72,0:00:27.66,Default,,0000,0000,0000,,방금 쓴 코드를\N주석 처리하고
Dialogue: 0,0:00:27.66,0:00:29.82,Default,,0000,0000,0000,,ohnoes 효과를\N적용해 볼게요
Dialogue: 0,0:00:30.99,0:00:35.87,Default,,0000,0000,0000,,여기 전체를\N주석 처리할게요
Dialogue: 0,0:00:36.80,0:00:40.67,Default,,0000,0000,0000,, 태그를\N추가하는 걸로 시작해보죠
Dialogue: 0,0:00:40.67,0:00:44.06,Default,,0000,0000,0000,,그리고 CSS 규칙같은 걸\N추가할거에요
Dialogue: 0,0:00:44.06,0:00:47.17,Default,,0000,0000,0000,,하지만 사실 이건\N효과를 정의하는 것이죠
Dialogue: 0,0:00:47.17,0:00:50.63,Default,,0000,0000,0000,,여기에\N'@keyframes'을 쓰고
Dialogue: 0,0:00:50.63,0:00:53.31,Default,,0000,0000,0000,,효과의 이름을\N쓰세요\N
Dialogue: 0,0:00:53.31,0:00:54.79,Default,,0000,0000,0000,,'getbigger'
Dialogue: 0,0:00:54.79,0:00:56.34,Default,,0000,0000,0000,,그리고\N중괄호를 닫아요
Dialogue: 0,0:00:57.20,0:00:58.92,Default,,0000,0000,0000,,이 간단한 효과를\N주기 위해서는
Dialogue: 0,0:00:58.92,0:01:01.16,Default,,0000,0000,0000,,한 상태에서\N다른 상태로 전환시킬 때요
Dialogue: 0,0:01:01.16,0:01:06.51,Default,,0000,0000,0000,,이걸 시작(from)과\N종료(to)상태라고 할게요
Dialogue: 0,0:01:07.30,0:01:08.74,Default,,0000,0000,0000,,시작상태(from)\N안에는
Dialogue: 0,0:01:08.74,0:01:12.12,Default,,0000,0000,0000,,시작 CSS 속성에 대해\N적어주면 돼요
Dialogue: 0,0:01:12.12,0:01:15.50,Default,,0000,0000,0000,,처음에 50픽셀로\N정했던 것 기억나죠?
Dialogue: 0,0:01:16.24,0:01:17.60,Default,,0000,0000,0000,,종료상태(to)\N안에는
Dialogue: 0,0:01:17.60,0:01:21.27,Default,,0000,0000,0000,,종료 속성에 대해\N적어주면 돼요
Dialogue: 0,0:01:21.27,0:01:24.36,Default,,0000,0000,0000,,이건 아마 300픽셀 정도\N였을거에요
Dialogue: 0,0:01:24.36,0:01:25.25,Default,,0000,0000,0000,,기억나시죠?
Dialogue: 0,0:01:25.94,0:01:27.97,Default,,0000,0000,0000,,이제 효과를\N정의했으니까
Dialogue: 0,0:01:27.97,0:01:29.55,Default,,0000,0000,0000,,브라우저에게\N말해줘야해요
Dialogue: 0,0:01:29.55,0:01:32.55,Default,,0000,0000,0000,,어떤 요소에\N이 효과를 적용할 지 말이죠
Dialogue: 0,0:01:33.46,0:01:37.31,Default,,0000,0000,0000,,그래서 ohnoes에게\N일반적인 CSS규칙을 줄 거에요
Dialogue: 0,0:01:38.79,0:01:42.74,Default,,0000,0000,0000,,이 안에서는\N효과 이름을 정해주고
Dialogue: 0,0:01:43.83,0:01:46.15,Default,,0000,0000,0000,,그러니까\N'getbigger'죠
Dialogue: 0,0:01:47.68,0:01:50.93,Default,,0000,0000,0000,,효과 지속시간을\N정해줘요
Dialogue: 0,0:01:50.93,0:01:52.20,Default,,0000,0000,0000,,3초 겠네요
Dialogue: 0,0:01:53.06,0:01:54.54,Default,,0000,0000,0000,,여러분이 사용하는\N브라우저에 따라서
Dialogue: 0,0:01:54.54,0:01:56.41,Default,,0000,0000,0000,,이렇게 생각하고\N있을지도 몰라요
Dialogue: 0,0:01:56.41,0:01:58.26,Default,,0000,0000,0000,,우와 멋져요\N작동하네요!
Dialogue: 0,0:01:58.78,0:01:59.98,Default,,0000,0000,0000,,하지만\N다른 브라우저에서는
Dialogue: 0,0:01:59.98,0:02:01.63,Default,,0000,0000,0000,,사파리나\N크롬에서는 말이죠
Dialogue: 0,0:02:01.63,0:02:03.52,Default,,0000,0000,0000,,작동하지\N않을 수도 있어요
Dialogue: 0,0:02:03.52,0:02:07.90,Default,,0000,0000,0000,,그건 '브라우저 접두어'\N(vendor prefix) 때문이에요
Dialogue: 0,0:02:09.41,0:02:11.80,Default,,0000,0000,0000,,종종\N브라우저는
Dialogue: 0,0:02:11.80,0:02:15.50,Default,,0000,0000,0000,,멋진 새 기능을\N도입하기로 하는데
Dialogue: 0,0:02:15.50,0:02:19.25,Default,,0000,0000,0000,,하지만 그 기능에\N접두어를 붙여서
Dialogue: 0,0:02:19.25,0:02:21.74,Default,,0000,0000,0000,,이건 나중에 바뀔 수도 있다고\N표시해 주는 거에요
Dialogue: 0,0:02:21.74,0:02:23.72,Default,,0000,0000,0000,,이건 그냥\N그 브라우저의
Dialogue: 0,0:02:23.72,0:02:25.56,Default,,0000,0000,0000,,그 기능에 대한\N접근일 뿐이에요
Dialogue: 0,0:02:26.12,0:02:27.80,Default,,0000,0000,0000,,크롬에서\N작동하게 하려면
Dialogue: 0,0:02:27.80,0:02:29.15,Default,,0000,0000,0000,,만약 아직 기능이\N준비가 되지 않았다면
Dialogue: 0,0:02:29.15,0:02:31.49,Default,,0000,0000,0000,,우리가 방금 했던 걸\N복사해서
Dialogue: 0,0:02:31.49,0:02:34.37,Default,,0000,0000,0000,,앞에 'webkit'을\N추가해줘야 해요
Dialogue: 0,0:02:34.37,0:02:37.39,Default,,0000,0000,0000,,그러니까\N이 부분을 똑같이 쓰고
Dialogue: 0,0:02:38.20,0:02:41.58,Default,,0000,0000,0000,,'-webkit-'을\N여기다 쓰세요
Dialogue: 0,0:02:41.58,0:02:49.88,Default,,0000,0000,0000,,그리고 여기도 또 쓰고\N'-webkit-'을 붙이세요
Dialogue: 0,0:02:49.88,0:02:51.48,Default,,0000,0000,0000,,우와\N멋져요!
Dialogue: 0,0:02:51.48,0:02:54.82,Default,,0000,0000,0000,,이제 모든 브라우저에서\N커지게 될 거에요
Dialogue: 0,0:02:55.38,0:02:58.16,Default,,0000,0000,0000,,여러분이 이 영상을\N볼 때 쯤이면
Dialogue: 0,0:02:58.16,0:03:00.25,Default,,0000,0000,0000,,브라우저 접두어를\N안 써도 됐으면 좋겠네요
Dialogue: 0,0:03:00.25,0:03:02.43,Default,,0000,0000,0000,,하지만 이런 게 있다는 걸\N알고있으면 좋아요
Dialogue: 0,0:03:02.43,0:03:06.20,Default,,0000,0000,0000,,다음에 이걸 언젠가\N써야할 때가 올 지도 모르니까요
Dialogue: 0,0:03:08.16,0:03:11.56,Default,,0000,0000,0000,,CSS로 효과를 주는 방법이\N또 한가지 더 있어요
Dialogue: 0,0:03:11.56,0:03:14.14,Default,,0000,0000,0000,,이건 전환 속성을\N사용하는 거에요
Dialogue: 0,0:03:14.14,0:03:17.69,Default,,0000,0000,0000,,브라우저가 부드럽게\N전환을 할 수있게 해줘요
Dialogue: 0,0:03:17.69,0:03:20.09,Default,,0000,0000,0000,,한 속성에서\N다음 속성으로요
Dialogue: 0,0:03:20.60,0:03:23.38,Default,,0000,0000,0000,,예를 들어\N글자 크기를
Dialogue: 0,0:03:23.38,0:03:26.54,Default,,0000,0000,0000,,남은 시간에 따라\N커지게 하고 싶다고 해요
Dialogue: 0,0:03:26.54,0:03:27.99,Default,,0000,0000,0000,,마우스 포인터를\N위에 올릴 때 말이죠
Dialogue: 0,0:03:28.36,0:03:30.28,Default,,0000,0000,0000,,이걸 자바스크립트로\N할 수 있어요
Dialogue: 0,0:03:30.28,0:03:32.66,Default,,0000,0000,0000,,마우스 오버에 대한\N이벤트를 주는 걸로요
Dialogue: 0,0:03:32.66,0:03:34.54,Default,,0000,0000,0000,,그리고 requestAnimationFrame\N을 사용해서
Dialogue: 0,0:03:34.54,0:03:36.85,Default,,0000,0000,0000,,매번 글자 크기 속성을\N증가시켜주는 거에요
Dialogue: 0,0:03:36.85,0:03:41.15,Default,,0000,0000,0000,,하지만 이걸\NCSS만으로도 할 수 있어요
Dialogue: 0,0:03:42.04,0:03:42.78,Default,,0000,0000,0000,,생각해봐요
Dialogue: 0,0:03:42.78,0:03:45.52,Default,,0000,0000,0000,,일반적으로\N글자 크기를 어떻게 키우죠?
Dialogue: 0,0:03:45.52,0:03:48.27,Default,,0000,0000,0000,,CSS에서 마우스를\N올렸을 때 말이죠
Dialogue: 0,0:03:48.67,0:03:50.75,Default,,0000,0000,0000,,이건 호버(hover)를\N사용하면 할 수 있어요
Dialogue: 0,0:03:50.75,0:03:53.97,Default,,0000,0000,0000,,'#countdown: hover'\N라고 쓰고
Dialogue: 0,0:03:54.57,0:03:59.76,Default,,0000,0000,0000,,'font-size: 150px;'\N라고 해요
Dialogue: 0,0:03:59.76,0:04:02.46,Default,,0000,0000,0000,,좋아요\N이제 우리는 브라우저에게
Dialogue: 0,0:04:02.46,0:04:06.05,Default,,0000,0000,0000,,글자 크기 속성을\N전환시키고
Dialogue: 0,0:04:06.05,0:04:08.66,Default,,0000,0000,0000,,전환이 얼마 동안\N일어나야 하는지 말해줘야해요
Dialogue: 0,0:04:08.66,0:04:10.78,Default,,0000,0000,0000,,그리고 어떤\N시간 함수를 쓸 지도요
Dialogue: 0,0:04:11.42,0:04:17.72,Default,,0000,0000,0000,,'transition: font-size 1s linear'\N라고 쓰고
Dialogue: 0,0:04:19.35,0:04:21.38,Default,,0000,0000,0000,,이제 이 프로그램을\N멈추고
Dialogue: 0,0:04:21.38,0:04:25.48,Default,,0000,0000,0000,,마우스를 올리고\N어떻게 되나 보세요
Dialogue: 0,0:04:25.48,0:04:28.81,Default,,0000,0000,0000,,크롬, 파이어폭스나\N익스플로러 10 이상을 쓴다면
Dialogue: 0,0:04:28.81,0:04:30.80,Default,,0000,0000,0000,,이건 천천히\N커지게 될 거에요
Dialogue: 0,0:04:31.42,0:04:34.99,Default,,0000,0000,0000,,이 방식을 쓰면\N브라우저 접두어는 필요없어요
Dialogue: 0,0:04:35.90,0:04:37.10,Default,,0000,0000,0000,,여러분이 할 수 있는\N수많은 것들이 있어요
Dialogue: 0,0:04:37.10,0:04:39.26,Default,,0000,0000,0000,,CSS효과와 전환을\N사용해서 말이죠
Dialogue: 0,0:04:39.26,0:04:41.89,Default,,0000,0000,0000,,그리고 브라우저는 빠르게\N효과를 잘 만들어 줘요
Dialogue: 0,0:04:41.89,0:04:45.03,Default,,0000,0000,0000,,그러니까 두 가지 모두\N많이 찾아보길 바래요