WEBVTT

00:00:01.031 --> 00:00:03.742
좋아요
지금쯤 여러분은

00:00:03.742 --> 00:00:05.535
'setInterval'을 쓸 지

00:00:05.535 --> 00:00:07.198
'requestAnimationFrame'
을 쓸 지 고민이 될 거에요

00:00:07.198 --> 00:00:08.851
여러분이
효과를 주고 싶을 때요

00:00:08.851 --> 00:00:10.222
하지만 전
더 나아가서

00:00:10.222 --> 00:00:12.121
다른 선택지를
제시할게요

00:00:13.583 --> 00:00:16.933
크롬, 파이어폭스와
익스플로러 10 이상에서는

00:00:16.933 --> 00:00:21.613
CSS로 효과를 주는
다른 방법이 있어요

00:00:21.613 --> 00:00:24.244
자바스크립트를
사용하지 않고 말이죠

00:00:24.724 --> 00:00:27.655
방금 쓴 코드를
주석 처리하고

00:00:27.655 --> 00:00:29.817
ohnoes 효과를
적용해 볼게요

00:00:30.987 --> 00:00:35.867
여기 전체를
주석 처리할게요

00:00:36.797 --> 00:00:40.674
 태그를
추가하는 걸로 시작해보죠

00:00:40.674 --> 00:00:44.064
그리고 CSS 규칙같은 걸
추가할거에요

00:00:44.064 --> 00:00:47.174
하지만 사실 이건
효과를 정의하는 것이죠

00:00:47.174 --> 00:00:50.628
여기에
'@keyframes'을 쓰고

00:00:50.628 --> 00:00:53.306
효과의 이름을
쓰세요


00:00:53.306 --> 00:00:54.790
'getbigger'

00:00:54.790 --> 00:00:56.335
그리고
중괄호를 닫아요

00:00:57.205 --> 00:00:58.921
이 간단한 효과를
주기 위해서는

00:00:58.921 --> 00:01:01.163
한 상태에서
다른 상태로 전환시킬 때요

00:01:01.163 --> 00:01:06.513
이걸 시작(from)과
종료(to)상태라고 할게요

00:01:07.303 --> 00:01:08.737
시작상태(from)
안에는

00:01:08.737 --> 00:01:12.116
시작 CSS 속성에 대해
적어주면 돼요

00:01:12.116 --> 00:01:15.503
처음에 50픽셀로
정했던 것 기억나죠?

00:01:16.243 --> 00:01:17.597
종료상태(to)
안에는

00:01:17.597 --> 00:01:21.268
종료 속성에 대해
적어주면 돼요

00:01:21.268 --> 00:01:24.365
이건 아마 300픽셀 정도
였을거에요

00:01:24.365 --> 00:01:25.246
기억나시죠?

00:01:25.936 --> 00:01:27.969
이제 효과를
정의했으니까

00:01:27.969 --> 00:01:29.551
브라우저에게
말해줘야해요

00:01:29.551 --> 00:01:32.551
어떤 요소에
이 효과를 적용할 지 말이죠

00:01:33.461 --> 00:01:37.311
그래서 ohnoes에게
일반적인 CSS규칙을 줄 거에요

00:01:38.791 --> 00:01:42.742
이 안에서는
효과 이름을 정해주고

00:01:43.832 --> 00:01:46.150
그러니까
'getbigger'죠

00:01:47.680 --> 00:01:50.927
효과 지속시간을
정해줘요

00:01:50.927 --> 00:01:52.202
3초 겠네요

00:01:53.062 --> 00:01:54.544
여러분이 사용하는
브라우저에 따라서

00:01:54.544 --> 00:01:56.406
이렇게 생각하고
있을지도 몰라요

00:01:56.406 --> 00:01:58.255
우와 멋져요
작동하네요!

00:01:58.775 --> 00:01:59.981
하지만
다른 브라우저에서는

00:01:59.981 --> 00:02:01.634
사파리나
크롬에서는 말이죠

00:02:01.634 --> 00:02:03.517
작동하지
않을 수도 있어요

00:02:03.517 --> 00:02:07.899
그건 '브라우저 접두어'
(vendor prefix) 때문이에요

00:02:09.409 --> 00:02:11.796
종종
브라우저는

00:02:11.796 --> 00:02:15.499
멋진 새 기능을
도입하기로 하는데

00:02:15.499 --> 00:02:19.251
하지만 그 기능에
접두어를 붙여서

00:02:19.251 --> 00:02:21.739
이건 나중에 바뀔 수도 있다고
표시해 주는 거에요

00:02:21.739 --> 00:02:23.718
이건 그냥
그 브라우저의

00:02:23.718 --> 00:02:25.561
그 기능에 대한
접근일 뿐이에요

00:02:26.121 --> 00:02:27.803
크롬에서
작동하게 하려면

00:02:27.803 --> 00:02:29.154
만약 아직 기능이
준비가 되지 않았다면

00:02:29.154 --> 00:02:31.489
우리가 방금 했던 걸
복사해서

00:02:31.489 --> 00:02:34.374
앞에 'webkit'을
추가해줘야 해요

00:02:34.374 --> 00:02:37.393
그러니까
이 부분을 똑같이 쓰고

00:02:38.203 --> 00:02:41.580
'-webkit-'을
여기다 쓰세요

00:02:41.580 --> 00:02:49.879
그리고 여기도 또 쓰고
'-webkit-'을 붙이세요

00:02:49.879 --> 00:02:51.477
우와
멋져요!

00:02:51.477 --> 00:02:54.824
이제 모든 브라우저에서
커지게 될 거에요

00:02:55.384 --> 00:02:58.155
여러분이 이 영상을
볼 때 쯤이면

00:02:58.155 --> 00:03:00.250
브라우저 접두어를
안 써도 됐으면 좋겠네요

00:03:00.250 --> 00:03:02.431
하지만 이런 게 있다는 걸
알고있으면 좋아요

00:03:02.431 --> 00:03:06.205
다음에 이걸 언젠가
써야할 때가 올 지도 모르니까요

00:03:08.155 --> 00:03:11.556
CSS로 효과를 주는 방법이
또 한가지 더 있어요

00:03:11.556 --> 00:03:14.136
이건 전환 속성을
사용하는 거에요

00:03:14.136 --> 00:03:17.686
브라우저가 부드럽게
전환을 할 수있게 해줘요

00:03:17.686 --> 00:03:20.086
한 속성에서
다음 속성으로요

00:03:20.599 --> 00:03:23.380
예를 들어
글자 크기를

00:03:23.380 --> 00:03:26.539
남은 시간에 따라
커지게 하고 싶다고 해요

00:03:26.539 --> 00:03:27.993
마우스 포인터를
위에 올릴 때 말이죠

00:03:28.363 --> 00:03:30.280
이걸 자바스크립트로
할 수 있어요

00:03:30.280 --> 00:03:32.660
마우스 오버에 대한
이벤트를 주는 걸로요

00:03:32.660 --> 00:03:34.538
그리고 requestAnimationFrame
을 사용해서

00:03:34.538 --> 00:03:36.846
매번 글자 크기 속성을
증가시켜주는 거에요

00:03:36.846 --> 00:03:41.153
하지만 이걸
CSS만으로도 할 수 있어요

00:03:42.043 --> 00:03:42.784
생각해봐요

00:03:42.784 --> 00:03:45.517
일반적으로
글자 크기를 어떻게 키우죠?

00:03:45.517 --> 00:03:48.268
CSS에서 마우스를
올렸을 때 말이죠

00:03:48.668 --> 00:03:50.748
이건 호버(hover)를
사용하면 할 수 있어요

00:03:50.748 --> 00:03:53.969
'#countdown: hover'
라고 쓰고

00:03:54.569 --> 00:03:59.765
'font-size: 150px;'
라고 해요

00:03:59.765 --> 00:04:02.465
좋아요
이제 우리는 브라우저에게

00:04:02.465 --> 00:04:06.051
글자 크기 속성을
전환시키고

00:04:06.051 --> 00:04:08.655
전환이 얼마 동안
일어나야 하는지 말해줘야해요

00:04:08.655 --> 00:04:10.775
그리고 어떤
시간 함수를 쓸 지도요

00:04:11.415 --> 00:04:17.724
'transition: font-size 1s linear'
라고 쓰고

00:04:19.354 --> 00:04:21.383
이제 이 프로그램을
멈추고

00:04:21.383 --> 00:04:25.475
마우스를 올리고
어떻게 되나 보세요

00:04:25.475 --> 00:04:28.814
크롬, 파이어폭스나
익스플로러 10 이상을 쓴다면

00:04:28.814 --> 00:04:30.800
이건 천천히
커지게 될 거에요

00:04:31.420 --> 00:04:34.994
이 방식을 쓰면
브라우저 접두어는 필요없어요

00:04:35.904 --> 00:04:37.104
여러분이 할 수 있는
수많은 것들이 있어요

00:04:37.104 --> 00:04:39.260
CSS효과와 전환을
사용해서 말이죠

00:04:39.260 --> 00:04:41.891
그리고 브라우저는 빠르게
효과를 잘 만들어 줘요

00:04:41.891 --> 00:04:45.031
그러니까 두 가지 모두
많이 찾아보길 바래요