0:00:01.031,0:00:03.742
좋아요[br]지금쯤 여러분은

0:00:03.742,0:00:05.535
'setInterval'을 쓸 지

0:00:05.535,0:00:07.198
'requestAnimationFrame'[br]을 쓸 지 고민이 될 거에요

0:00:07.198,0:00:08.851
여러분이[br]효과를 주고 싶을 때요

0:00:08.851,0:00:10.222
하지만 전[br]더 나아가서

0:00:10.222,0:00:12.121
다른 선택지를[br]제시할게요

0:00:13.583,0:00:16.933
크롬, 파이어폭스와[br]익스플로러 10 이상에서는

0:00:16.933,0:00:21.613
CSS로 효과를 주는[br]다른 방법이 있어요

0:00:21.613,0:00:24.244
자바스크립트를[br]사용하지 않고 말이죠

0:00:24.724,0:00:27.655
방금 쓴 코드를[br]주석 처리하고

0:00:27.655,0:00:29.817
ohnoes 효과를[br]적용해 볼게요

0:00:30.987,0:00:35.867
여기 전체를[br]주석 처리할게요

0:00:36.797,0:00:40.674
태그를[br]추가하는 걸로 시작해보죠

0:00:40.674,0:00:44.064
그리고 CSS 규칙같은 걸[br]추가할거에요

0:00:44.064,0:00:47.174
하지만 사실 이건[br]효과를 정의하는 것이죠

0:00:47.174,0:00:50.628
여기에[br]'@keyframes'을 쓰고

0:00:50.628,0:00:53.306
효과의 이름을[br]쓰세요[br]

0:00:53.306,0:00:54.790
'getbigger'

0:00:54.790,0:00:56.335
그리고[br]중괄호를 닫아요

0:00:57.205,0:00:58.921
이 간단한 효과를[br]주기 위해서는

0:00:58.921,0:01:01.163
한 상태에서[br]다른 상태로 전환시킬 때요

0:01:01.163,0:01:06.513
이걸 시작(from)과[br]종료(to)상태라고 할게요

0:01:07.303,0:01:08.737
시작상태(from)[br]안에는

0:01:08.737,0:01:12.116
시작 CSS 속성에 대해[br]적어주면 돼요

0:01:12.116,0:01:15.503
처음에 50픽셀로[br]정했던 것 기억나죠?

0:01:16.243,0:01:17.597
종료상태(to)[br]안에는

0:01:17.597,0:01:21.268
종료 속성에 대해[br]적어주면 돼요

0:01:21.268,0:01:24.365
이건 아마 300픽셀 정도[br]였을거에요

0:01:24.365,0:01:25.246
기억나시죠?

0:01:25.936,0:01:27.969
이제 효과를[br]정의했으니까

0:01:27.969,0:01:29.551
브라우저에게[br]말해줘야해요

0:01:29.551,0:01:32.551
어떤 요소에[br]이 효과를 적용할 지 말이죠

0:01:33.461,0:01:37.311
그래서 ohnoes에게[br]일반적인 CSS규칙을 줄 거에요

0:01:38.791,0:01:42.742
이 안에서는[br]효과 이름을 정해주고

0:01:43.832,0:01:46.150
그러니까[br]'getbigger'죠

0:01:47.680,0:01:50.927
효과 지속시간을[br]정해줘요

0:01:50.927,0:01:52.202
3초 겠네요

0:01:53.062,0:01:54.544
여러분이 사용하는[br]브라우저에 따라서

0:01:54.544,0:01:56.406
이렇게 생각하고[br]있을지도 몰라요

0:01:56.406,0:01:58.255
우와 멋져요[br]작동하네요!

0:01:58.775,0:01:59.981
하지만[br]다른 브라우저에서는

0:01:59.981,0:02:01.634
사파리나[br]크롬에서는 말이죠

0:02:01.634,0:02:03.517
작동하지[br]않을 수도 있어요

0:02:03.517,0:02:07.899
그건 '브라우저 접두어'[br](vendor prefix) 때문이에요

0:02:09.409,0:02:11.796
종종[br]브라우저는

0:02:11.796,0:02:15.499
멋진 새 기능을[br]도입하기로 하는데

0:02:15.499,0:02:19.251
하지만 그 기능에[br]접두어를 붙여서

0:02:19.251,0:02:21.739
이건 나중에 바뀔 수도 있다고[br]표시해 주는 거에요

0:02:21.739,0:02:23.718
이건 그냥[br]그 브라우저의

0:02:23.718,0:02:25.561
그 기능에 대한[br]접근일 뿐이에요

0:02:26.121,0:02:27.803
크롬에서[br]작동하게 하려면

0:02:27.803,0:02:29.154
만약 아직 기능이[br]준비가 되지 않았다면

0:02:29.154,0:02:31.489
우리가 방금 했던 걸[br]복사해서

0:02:31.489,0:02:34.374
앞에 'webkit'을[br]추가해줘야 해요

0:02:34.374,0:02:37.393
그러니까[br]이 부분을 똑같이 쓰고

0:02:38.203,0:02:41.580
'-webkit-'을[br]여기다 쓰세요

0:02:41.580,0:02:49.879
그리고 여기도 또 쓰고[br]'-webkit-'을 붙이세요

0:02:49.879,0:02:51.477
우와[br]멋져요!

0:02:51.477,0:02:54.824
이제 모든 브라우저에서[br]커지게 될 거에요

0:02:55.384,0:02:58.155
여러분이 이 영상을[br]볼 때 쯤이면

0:02:58.155,0:03:00.250
브라우저 접두어를[br]안 써도 됐으면 좋겠네요

0:03:00.250,0:03:02.431
하지만 이런 게 있다는 걸[br]알고있으면 좋아요

0:03:02.431,0:03:06.205
다음에 이걸 언젠가[br]써야할 때가 올 지도 모르니까요

0:03:08.155,0:03:11.556
CSS로 효과를 주는 방법이[br]또 한가지 더 있어요

0:03:11.556,0:03:14.136
이건 전환 속성을[br]사용하는 거에요

0:03:14.136,0:03:17.686
브라우저가 부드럽게[br]전환을 할 수있게 해줘요

0:03:17.686,0:03:20.086
한 속성에서[br]다음 속성으로요

0:03:20.599,0:03:23.380
예를 들어[br]글자 크기를

0:03:23.380,0:03:26.539
남은 시간에 따라[br]커지게 하고 싶다고 해요

0:03:26.539,0:03:27.993
마우스 포인터를[br]위에 올릴 때 말이죠

0:03:28.363,0:03:30.280
이걸 자바스크립트로[br]할 수 있어요

0:03:30.280,0:03:32.660
마우스 오버에 대한[br]이벤트를 주는 걸로요

0:03:32.660,0:03:34.538
그리고 requestAnimationFrame[br]을 사용해서

0:03:34.538,0:03:36.846
매번 글자 크기 속성을[br]증가시켜주는 거에요

0:03:36.846,0:03:41.153
하지만 이걸[br]CSS만으로도 할 수 있어요

0:03:42.043,0:03:42.784
생각해봐요

0:03:42.784,0:03:45.517
일반적으로[br]글자 크기를 어떻게 키우죠?

0:03:45.517,0:03:48.268
CSS에서 마우스를[br]올렸을 때 말이죠

0:03:48.668,0:03:50.748
이건 호버(hover)를[br]사용하면 할 수 있어요

0:03:50.748,0:03:53.969
'#countdown: hover'[br]라고 쓰고

0:03:54.569,0:03:59.765
'font-size: 150px;'[br]라고 해요

0:03:59.765,0:04:02.465
좋아요[br]이제 우리는 브라우저에게

0:04:02.465,0:04:06.051
글자 크기 속성을[br]전환시키고

0:04:06.051,0:04:08.655
전환이 얼마 동안[br]일어나야 하는지 말해줘야해요

0:04:08.655,0:04:10.775
그리고 어떤[br]시간 함수를 쓸 지도요

0:04:11.415,0:04:17.724
'transition: font-size 1s linear'[br]라고 쓰고

0:04:19.354,0:04:21.383
이제 이 프로그램을[br]멈추고

0:04:21.383,0:04:25.475
마우스를 올리고[br]어떻게 되나 보세요

0:04:25.475,0:04:28.814
크롬, 파이어폭스나[br]익스플로러 10 이상을 쓴다면

0:04:28.814,0:04:30.800
이건 천천히[br]커지게 될 거에요

0:04:31.420,0:04:34.994
이 방식을 쓰면[br]브라우저 접두어는 필요없어요

0:04:35.904,0:04:37.104
여러분이 할 수 있는[br]수많은 것들이 있어요

0:04:37.104,0:04:39.260
CSS효과와 전환을[br]사용해서 말이죠

0:04:39.260,0:04:41.891
그리고 브라우저는 빠르게[br]효과를 잘 만들어 줘요

0:04:41.891,0:04:45.031
그러니까 두 가지 모두[br]많이 찾아보길 바래요