1
00:00:01,031 --> 00:00:03,742
좋아요
지금쯤 여러분은

2
00:00:03,742 --> 00:00:05,535
'setInterval'을 쓸 지

3
00:00:05,535 --> 00:00:07,198
'requestAnimationFrame'
을 쓸 지 고민이 될 거에요

4
00:00:07,198 --> 00:00:08,851
여러분이
효과를 주고 싶을 때요

5
00:00:08,851 --> 00:00:10,222
하지만 전
더 나아가서

6
00:00:10,222 --> 00:00:12,121
다른 선택지를
제시할게요

7
00:00:13,583 --> 00:00:16,933
크롬, 파이어폭스와
익스플로러 10 이상에서는

8
00:00:16,933 --> 00:00:21,613
CSS로 효과를 주는
다른 방법이 있어요

9
00:00:21,613 --> 00:00:24,244
자바스크립트를
사용하지 않고 말이죠

10
00:00:24,724 --> 00:00:27,655
방금 쓴 코드를
주석 처리하고

11
00:00:27,655 --> 00:00:29,817
ohnoes 효과를
적용해 볼게요

12
00:00:30,987 --> 00:00:35,867
여기 전체를
주석 처리할게요

13
00:00:36,797 --> 00:00:40,674
 태그를
추가하는 걸로 시작해보죠

14
00:00:40,674 --> 00:00:44,064
그리고 CSS 규칙같은 걸
추가할거에요

15
00:00:44,064 --> 00:00:47,174
하지만 사실 이건
효과를 정의하는 것이죠

16
00:00:47,174 --> 00:00:50,628
여기에
'@keyframes'을 쓰고

17
00:00:50,628 --> 00:00:53,306
효과의 이름을
쓰세요


18
00:00:53,306 --> 00:00:54,790
'getbigger'

19
00:00:54,790 --> 00:00:56,335
그리고
중괄호를 닫아요

20
00:00:57,205 --> 00:00:58,921
이 간단한 효과를
주기 위해서는

21
00:00:58,921 --> 00:01:01,163
한 상태에서
다른 상태로 전환시킬 때요

22
00:01:01,163 --> 00:01:06,513
이걸 시작(from)과
종료(to)상태라고 할게요

23
00:01:07,303 --> 00:01:08,737
시작상태(from)
안에는

24
00:01:08,737 --> 00:01:12,116
시작 CSS 속성에 대해
적어주면 돼요

25
00:01:12,116 --> 00:01:15,503
처음에 50픽셀로
정했던 것 기억나죠?

26
00:01:16,243 --> 00:01:17,597
종료상태(to)
안에는

27
00:01:17,597 --> 00:01:21,268
종료 속성에 대해
적어주면 돼요

28
00:01:21,268 --> 00:01:24,365
이건 아마 300픽셀 정도
였을거에요

29
00:01:24,365 --> 00:01:25,246
기억나시죠?

30
00:01:25,936 --> 00:01:27,969
이제 효과를
정의했으니까

31
00:01:27,969 --> 00:01:29,551
브라우저에게
말해줘야해요

32
00:01:29,551 --> 00:01:32,551
어떤 요소에
이 효과를 적용할 지 말이죠

33
00:01:33,461 --> 00:01:37,311
그래서 ohnoes에게
일반적인 CSS규칙을 줄 거에요

34
00:01:38,791 --> 00:01:42,742
이 안에서는
효과 이름을 정해주고

35
00:01:43,832 --> 00:01:46,150
그러니까
'getbigger'죠

36
00:01:47,680 --> 00:01:50,927
효과 지속시간을
정해줘요

37
00:01:50,927 --> 00:01:52,202
3초 겠네요

38
00:01:53,062 --> 00:01:54,544
여러분이 사용하는
브라우저에 따라서

39
00:01:54,544 --> 00:01:56,406
이렇게 생각하고
있을지도 몰라요

40
00:01:56,406 --> 00:01:58,255
우와 멋져요
작동하네요!

41
00:01:58,775 --> 00:01:59,981
하지만
다른 브라우저에서는

42
00:01:59,981 --> 00:02:01,634
사파리나
크롬에서는 말이죠

43
00:02:01,634 --> 00:02:03,517
작동하지
않을 수도 있어요

44
00:02:03,517 --> 00:02:07,899
그건 '브라우저 접두어'
(vendor prefix) 때문이에요

45
00:02:09,409 --> 00:02:11,796
종종
브라우저는

46
00:02:11,796 --> 00:02:15,499
멋진 새 기능을
도입하기로 하는데

47
00:02:15,499 --> 00:02:19,251
하지만 그 기능에
접두어를 붙여서

48
00:02:19,251 --> 00:02:21,739
이건 나중에 바뀔 수도 있다고
표시해 주는 거에요

49
00:02:21,739 --> 00:02:23,718
이건 그냥
그 브라우저의

50
00:02:23,718 --> 00:02:25,561
그 기능에 대한
접근일 뿐이에요

51
00:02:26,121 --> 00:02:27,803
크롬에서
작동하게 하려면

52
00:02:27,803 --> 00:02:29,154
만약 아직 기능이
준비가 되지 않았다면

53
00:02:29,154 --> 00:02:31,489
우리가 방금 했던 걸
복사해서

54
00:02:31,489 --> 00:02:34,374
앞에 'webkit'을
추가해줘야 해요

55
00:02:34,374 --> 00:02:37,393
그러니까
이 부분을 똑같이 쓰고

56
00:02:38,203 --> 00:02:41,580
'-webkit-'을
여기다 쓰세요

57
00:02:41,580 --> 00:02:49,879
그리고 여기도 또 쓰고
'-webkit-'을 붙이세요

58
00:02:49,879 --> 00:02:51,477
우와
멋져요!

59
00:02:51,477 --> 00:02:54,824
이제 모든 브라우저에서
커지게 될 거에요

60
00:02:55,384 --> 00:02:58,155
여러분이 이 영상을
볼 때 쯤이면

61
00:02:58,155 --> 00:03:00,250
브라우저 접두어를
안 써도 됐으면 좋겠네요

62
00:03:00,250 --> 00:03:02,431
하지만 이런 게 있다는 걸
알고있으면 좋아요

63
00:03:02,431 --> 00:03:06,205
다음에 이걸 언젠가
써야할 때가 올 지도 모르니까요

64
00:03:08,155 --> 00:03:11,556
CSS로 효과를 주는 방법이
또 한가지 더 있어요

65
00:03:11,556 --> 00:03:14,136
이건 전환 속성을
사용하는 거에요

66
00:03:14,136 --> 00:03:17,686
브라우저가 부드럽게
전환을 할 수있게 해줘요

67
00:03:17,686 --> 00:03:20,086
한 속성에서
다음 속성으로요

68
00:03:20,599 --> 00:03:23,380
예를 들어
글자 크기를

69
00:03:23,380 --> 00:03:26,539
남은 시간에 따라
커지게 하고 싶다고 해요

70
00:03:26,539 --> 00:03:27,993
마우스 포인터를
위에 올릴 때 말이죠

71
00:03:28,363 --> 00:03:30,280
이걸 자바스크립트로
할 수 있어요

72
00:03:30,280 --> 00:03:32,660
마우스 오버에 대한
이벤트를 주는 걸로요

73
00:03:32,660 --> 00:03:34,538
그리고 requestAnimationFrame
을 사용해서

74
00:03:34,538 --> 00:03:36,846
매번 글자 크기 속성을
증가시켜주는 거에요

75
00:03:36,846 --> 00:03:41,153
하지만 이걸
CSS만으로도 할 수 있어요

76
00:03:42,043 --> 00:03:42,784
생각해봐요

77
00:03:42,784 --> 00:03:45,517
일반적으로
글자 크기를 어떻게 키우죠?

78
00:03:45,517 --> 00:03:48,268
CSS에서 마우스를
올렸을 때 말이죠

79
00:03:48,668 --> 00:03:50,748
이건 호버(hover)를
사용하면 할 수 있어요

80
00:03:50,748 --> 00:03:53,969
'#countdown: hover'
라고 쓰고

81
00:03:54,569 --> 00:03:59,765
'font-size: 150px;'
라고 해요

82
00:03:59,765 --> 00:04:02,465
좋아요
이제 우리는 브라우저에게

83
00:04:02,465 --> 00:04:06,051
글자 크기 속성을
전환시키고

84
00:04:06,051 --> 00:04:08,655
전환이 얼마 동안
일어나야 하는지 말해줘야해요

85
00:04:08,655 --> 00:04:10,775
그리고 어떤
시간 함수를 쓸 지도요

86
00:04:11,415 --> 00:04:17,724
'transition: font-size 1s linear'
라고 쓰고

87
00:04:19,354 --> 00:04:21,383
이제 이 프로그램을
멈추고

88
00:04:21,383 --> 00:04:25,475
마우스를 올리고
어떻게 되나 보세요

89
00:04:25,475 --> 00:04:28,814
크롬, 파이어폭스나
익스플로러 10 이상을 쓴다면

90
00:04:28,814 --> 00:04:30,800
이건 천천히
커지게 될 거에요

91
00:04:31,420 --> 00:04:34,994
이 방식을 쓰면
브라우저 접두어는 필요없어요

92
00:04:35,904 --> 00:04:37,104
여러분이 할 수 있는
수많은 것들이 있어요

93
00:04:37,104 --> 00:04:39,260
CSS효과와 전환을
사용해서 말이죠

94
00:04:39,260 --> 00:04:41,891
그리고 브라우저는 빠르게
효과를 잘 만들어 줘요

95
00:04:41,891 --> 00:04:45,031
그러니까 두 가지 모두
많이 찾아보길 바래요