1
00:00:00,740 --> 00:00:03,500
이제 여러분에게
기본적인 jQuery 사용을

2
00:00:03,500 --> 00:00:05,720
보여드리겠습니다

3
00:00:05,720 --> 00:00:08,180
우선 <script> 태그를 사용해서

4
00:00:08,180 --> 00:00:10,717
jQuery 라이브러리를 넣습니다

5
00:00:12,220 --> 00:00:16,110
이전에는 자바스크립트 코드를
 태그 안에 넣었죠

6
00:00:16,122 --> 00:00:20,276
이번에는 src 라는 속성을
추가해보겠습니다

7
00:00:20,276 --> 00:00:24,391
이 속성은 URL을 넣기 위해
필요합니다

8
00:00:24,391 --> 00:00:26,566
URL은 뭘까요?

9
00:00:26,566 --> 00:00:28,628
만약 제 컴퓨터에서 작업하다가

10
00:00:28,628 --> 00:00:30,093
jQuery를 다운 받아서

11
00:00:30,093 --> 00:00:32,525
제 웹 페이지가 있는 폴더에
저장했다면

12
00:00:32,525 --> 00:00:36,473
그냥 여기에 jquery.js 를
써주면 됩니다

13
00:00:36,473 --> 00:00:39,408
하지만 칸아카데미에서는
동작하지 않을 겁니다

14
00:00:39,408 --> 00:00:43,096
여기에는 jQuery를
받을 수 있는

15
00:00:43,096 --> 00:00:45,885
서버 URL을 적어줘야 합니다

16
00:00:45,885 --> 00:00:50,082
jquery.com에 가면
URL 리스트가 있습니다

17
00:00:50,622 --> 00:00:52,738
그 중 하나를 복사해서
여기에 넣어 보겠습니다

18
00:00:52,738 --> 00:00:54,430
됐습니다

19
00:00:54,430 --> 00:00:56,340
이제 이 URL에 대해 몇 가지만

20
00:00:56,340 --> 00:00:58,031
살펴보고 갑시다

21
00:00:58,031 --> 00:01:01,820
일단 https로 시작하는 것을
볼 수 있습니다

22
00:01:01,820 --> 00:01:05,231
이는 보안이 강화된
URL임을 의미합니다

23
00:01:05,231 --> 00:01:09,231
칸아카데미에서는
안전하게 쓸 수 있는

24
00:01:09,231 --> 00:01:11,207
웹 자원만 가져올 수 있습니다

25
00:01:11,207 --> 00:01:15,343
웹 개발에서의
좋은 관례라 할 수 있죠

26
00:01:15,660 --> 00:01:19,120
두번째로 이 자원은
googleapis.com 이라는

27
00:01:19,120 --> 00:01:22,360
구글 서버에서 가져왔음을
알 수 있습니다

28
00:01:22,751 --> 00:01:25,385
이런 서버를 CDN이라 부릅니다

29
00:01:25,385 --> 00:01:27,921
컨텐츠 전송 네트워크라고
하는 것이죠

30
00:01:27,921 --> 00:01:29,880
이 서버는 라이브러리 같이

31
00:01:29,880 --> 00:01:33,093
정적인 파일들을
아주 빨리 제공하는 데

32
00:01:33,100 --> 00:01:35,380
최적화된 서버입니다

33
00:01:35,388 --> 00:01:38,164
구글 서버는
제가 신뢰하는 곳 중 하나입니다

34
00:01:38,164 --> 00:01:41,104
일반적으로 스크립트를
가져오는 서버는

35
00:01:41,104 --> 00:01:43,000
신뢰할 수 있는 곳이어야 합니다

36
00:01:43,002 --> 00:01:47,240
어떤 곳은 여러분의 사이트에
나쁜 짓을 할 수도 있기 때문입니다

37
00:01:47,400 --> 00:01:49,520
세번째로 살펴볼 것은

38
00:01:49,520 --> 00:01:53,314
URL에 2.1.4. 라고 적힌
버전 정보입니다

39
00:01:53,807 --> 00:01:56,402
jQuery 라이브러리는
계속 발전 중이어서

40
00:01:56,402 --> 00:01:59,015
종종 새로운 버전을 내놓습니다

41
00:01:59,015 --> 00:02:00,987
왼쪽에 있는 숫자일 수록

42
00:02:00,987 --> 00:02:03,279
메이저 버전을 표현하고

43
00:02:03,279 --> 00:02:05,755
오른쪽에 있는 숫자일 수록

44
00:02:05,755 --> 00:02:08,134
마이너 버전을 나타냅니다

45
00:02:08,140 --> 00:02:10,200
저는 jQuery 2를
사용하고 있습니다

46
00:02:10,200 --> 00:02:12,295
요즘 브라우저에서
동작하는 버전이죠

47
00:02:12,295 --> 00:02:14,484
하지만 IE8에서는
작동하지 않습니다

48
00:02:14,484 --> 00:02:15,800
여러분의 웹 사이트에서

49
00:02:15,800 --> 00:02:19,620
필요사항에 따라 어떤 버전을 쓸 지
결정할 수 있습니다

50
00:02:19,627 --> 00:02:22,809
이제 jQuery를 포함시켰으니

51
00:02:22,809 --> 00:02:24,973
또 다른 <script> 태그 안에서

52
00:02:24,973 --> 00:02:28,266
실제로 사용해봅시다

53
00:02:30,226 --> 00:02:33,309
모든 자바스크립트 라이브러리들은
함수들이 노출돼있고

54
00:02:33,309 --> 00:02:35,358
함수의 이름을 제공합니다

55
00:02:35,360 --> 00:02:37,240
사용 설명서를 찾아봐서

56
00:02:37,240 --> 00:02:39,260
함수의 이름은 무엇이며

57
00:02:39,262 --> 00:02:41,761
어떤 일을 하는 지
알아야 합니다

58
00:02:41,761 --> 00:02:45,444
jQuery 라이브러리는
메인 함수 하나를 노출하고 있는데요

59
00:02:45,444 --> 00:02:47,524
아주 짧은 이름을 가지고 있습니다

60
00:02:47,524 --> 00:02:50,637
바로 달러 기호이죠

61
00:02:50,637 --> 00:02:52,259
그 말은 우리가
제일 먼저 써야할 것은

62
00:02:52,259 --> 00:02:53,556
바로 달러라는 거죠

63
00:02:53,556 --> 00:02:56,526
이건 함수니까
괄호를 쳐주고요

64
00:02:56,526 --> 00:02:59,412
당연히 세미콜론도 찍어야겠죠

65
00:02:59,412 --> 00:03:01,928
함수 이름이 짧아서 좋군요

66
00:03:01,928 --> 00:03:05,756
왜냐면 이 함수를 호출할 일이
매우 많거든요

67
00:03:06,226 --> 00:03:08,928
이 함수에는 매우 많은 걸
전달할 수 있습니다

68
00:03:08,928 --> 00:03:13,874
예시로 h1이라는 문자열을
넘겨보겠습니다

69
00:03:16,380 --> 00:03:19,720
이걸 쓰면
jQuery는 이 웹 페이지의

70
00:03:19,724 --> 00:03:23,091
모든 h1 요소를 찾아줍니다

71
00:03:23,095 --> 00:03:28,050
그리고 jQuery 콜렉션 객체로
반환해줍니다

72
00:03:28,140 --> 00:03:30,100
객체를 반환 받았으니

73
00:03:30,100 --> 00:03:33,233
jQuery 객체의 메소드들을 호출함으로써

74
00:03:33,233 --> 00:03:37,200
아까 찾은 h1 요소들을
조작할 수 있습니다

75
00:03:37,200 --> 00:03:39,939
예를 들면 text 함수를 사용해서

76
00:03:39,939 --> 00:03:43,356
모든 h1 요소의
텍스트를 바꿀 수 있습니다

77
00:03:43,356 --> 00:03:46,044
문자열을 전달해서 말이죠

78
00:03:47,244 --> 00:03:48,492
바뀌고 있네요

79
00:03:48,492 --> 00:03:49,792
바뀌고 있네요

80
00:03:49,792 --> 00:03:50,804
자 끝났습니다

81
00:03:50,804 --> 00:03:53,029
첫 jQuery 맛보기였습니다

82
00:03:53,029 --> 00:03:56,910
<script> 태그에 jQuery 라이브러리를
포함시키고

83
00:03:56,910 --> 00:03:59,819
jQuery에게 모든 h1 태그를 찾게 한 다음

84
00:03:59,819 --> 00:04:03,643
텍스트를 바꿔 보았습니다

85
00:04:03,643 --> 00:04:06,077
이 수업을 계속 들으면
매우 많은 것들을

86
00:04:06,083 --> 00:04:07,840
더 자세하게
배울 수 있을 겁니다

87
00:04:07,840 --> 00:04:11,117
요소를 선택하고 조작하는
다양한 방법과

88
00:04:11,117 --> 00:04:14,353
사용자 이벤트에 반응하는 웹 페이지와

89
00:04:14,353 --> 00:04:18,558
재미있는 애니메이션 효과들도
배울 수 있을 겁니다