WEBVTT

00:00:00.740 --> 00:00:03.500
이제 여러분에게
기본적인 jQuery 사용을

00:00:03.500 --> 00:00:05.720
보여드리겠습니다

00:00:05.720 --> 00:00:08.180
우선 <script> 태그를 사용해서

00:00:08.180 --> 00:00:10.717
jQuery 라이브러리를 넣습니다

00:00:12.220 --> 00:00:16.110
이전에는 자바스크립트 코드를
 태그 안에 넣었죠

00:00:16.122 --> 00:00:20.276
이번에는 src 라는 속성을
추가해보겠습니다

00:00:20.276 --> 00:00:24.391
이 속성은 URL을 넣기 위해
필요합니다

00:00:24.391 --> 00:00:26.566
URL은 뭘까요?

00:00:26.566 --> 00:00:28.628
만약 제 컴퓨터에서 작업하다가

00:00:28.628 --> 00:00:30.093
jQuery를 다운 받아서

00:00:30.093 --> 00:00:32.525
제 웹 페이지가 있는 폴더에
저장했다면

00:00:32.525 --> 00:00:36.473
그냥 여기에 jquery.js 를
써주면 됩니다

00:00:36.473 --> 00:00:39.408
하지만 칸아카데미에서는
동작하지 않을 겁니다

00:00:39.408 --> 00:00:43.096
여기에는 jQuery를
받을 수 있는

00:00:43.096 --> 00:00:45.885
서버 URL을 적어줘야 합니다

00:00:45.885 --> 00:00:50.082
jquery.com에 가면
URL 리스트가 있습니다

00:00:50.622 --> 00:00:52.738
그 중 하나를 복사해서
여기에 넣어 보겠습니다

00:00:52.738 --> 00:00:54.430
됐습니다

00:00:54.430 --> 00:00:56.340
이제 이 URL에 대해 몇 가지만

00:00:56.340 --> 00:00:58.031
살펴보고 갑시다

00:00:58.031 --> 00:01:01.820
일단 https로 시작하는 것을
볼 수 있습니다

00:01:01.820 --> 00:01:05.231
이는 보안이 강화된
URL임을 의미합니다

00:01:05.231 --> 00:01:09.231
칸아카데미에서는
안전하게 쓸 수 있는

00:01:09.231 --> 00:01:11.207
웹 자원만 가져올 수 있습니다

00:01:11.207 --> 00:01:15.343
웹 개발에서의
좋은 관례라 할 수 있죠

00:01:15.660 --> 00:01:19.120
두번째로 이 자원은
googleapis.com 이라는

00:01:19.120 --> 00:01:22.360
구글 서버에서 가져왔음을
알 수 있습니다

00:01:22.751 --> 00:01:25.385
이런 서버를 CDN이라 부릅니다

00:01:25.385 --> 00:01:27.921
컨텐츠 전송 네트워크라고
하는 것이죠

00:01:27.921 --> 00:01:29.880
이 서버는 라이브러리 같이

00:01:29.880 --> 00:01:33.093
정적인 파일들을
아주 빨리 제공하는 데

00:01:33.100 --> 00:01:35.380
최적화된 서버입니다

00:01:35.388 --> 00:01:38.164
구글 서버는
제가 신뢰하는 곳 중 하나입니다

00:01:38.164 --> 00:01:41.104
일반적으로 스크립트를
가져오는 서버는

00:01:41.104 --> 00:01:43.000
신뢰할 수 있는 곳이어야 합니다

00:01:43.002 --> 00:01:47.240
어떤 곳은 여러분의 사이트에
나쁜 짓을 할 수도 있기 때문입니다

00:01:47.400 --> 00:01:49.520
세번째로 살펴볼 것은

00:01:49.520 --> 00:01:53.314
URL에 2.1.4. 라고 적힌
버전 정보입니다

00:01:53.807 --> 00:01:56.402
jQuery 라이브러리는
계속 발전 중이어서

00:01:56.402 --> 00:01:59.015
종종 새로운 버전을 내놓습니다

00:01:59.015 --> 00:02:00.987
왼쪽에 있는 숫자일 수록

00:02:00.987 --> 00:02:03.279
메이저 버전을 표현하고

00:02:03.279 --> 00:02:05.755
오른쪽에 있는 숫자일 수록

00:02:05.755 --> 00:02:08.134
마이너 버전을 나타냅니다

00:02:08.140 --> 00:02:10.200
저는 jQuery 2를
사용하고 있습니다

00:02:10.200 --> 00:02:12.295
요즘 브라우저에서
동작하는 버전이죠

00:02:12.295 --> 00:02:14.484
하지만 IE8에서는
작동하지 않습니다

00:02:14.484 --> 00:02:15.800
여러분의 웹 사이트에서

00:02:15.800 --> 00:02:19.620
필요사항에 따라 어떤 버전을 쓸 지
결정할 수 있습니다

00:02:19.627 --> 00:02:22.809
이제 jQuery를 포함시켰으니

00:02:22.809 --> 00:02:24.973
또 다른 <script> 태그 안에서

00:02:24.973 --> 00:02:28.266
실제로 사용해봅시다

00:02:30.226 --> 00:02:33.309
모든 자바스크립트 라이브러리들은
함수들이 노출돼있고

00:02:33.309 --> 00:02:35.358
함수의 이름을 제공합니다

00:02:35.360 --> 00:02:37.240
사용 설명서를 찾아봐서

00:02:37.240 --> 00:02:39.260
함수의 이름은 무엇이며

00:02:39.262 --> 00:02:41.761
어떤 일을 하는 지
알아야 합니다

00:02:41.761 --> 00:02:45.444
jQuery 라이브러리는
메인 함수 하나를 노출하고 있는데요

00:02:45.444 --> 00:02:47.524
아주 짧은 이름을 가지고 있습니다

00:02:47.524 --> 00:02:50.637
바로 달러 기호이죠

00:02:50.637 --> 00:02:52.259
그 말은 우리가
제일 먼저 써야할 것은

00:02:52.259 --> 00:02:53.556
바로 달러라는 거죠

00:02:53.556 --> 00:02:56.526
이건 함수니까
괄호를 쳐주고요

00:02:56.526 --> 00:02:59.412
당연히 세미콜론도 찍어야겠죠

00:02:59.412 --> 00:03:01.928
함수 이름이 짧아서 좋군요

00:03:01.928 --> 00:03:05.756
왜냐면 이 함수를 호출할 일이
매우 많거든요

00:03:06.226 --> 00:03:08.928
이 함수에는 매우 많은 걸
전달할 수 있습니다

00:03:08.928 --> 00:03:13.874
예시로 h1이라는 문자열을
넘겨보겠습니다

00:03:16.380 --> 00:03:19.720
이걸 쓰면
jQuery는 이 웹 페이지의

00:03:19.724 --> 00:03:23.091
모든 h1 요소를 찾아줍니다

00:03:23.095 --> 00:03:28.050
그리고 jQuery 콜렉션 객체로
반환해줍니다

00:03:28.140 --> 00:03:30.100
객체를 반환 받았으니

00:03:30.100 --> 00:03:33.233
jQuery 객체의 메소드들을 호출함으로써

00:03:33.233 --> 00:03:37.200
아까 찾은 h1 요소들을
조작할 수 있습니다

00:03:37.200 --> 00:03:39.939
예를 들면 text 함수를 사용해서

00:03:39.939 --> 00:03:43.356
모든 h1 요소의
텍스트를 바꿀 수 있습니다

00:03:43.356 --> 00:03:46.044
문자열을 전달해서 말이죠

00:03:47.244 --> 00:03:48.492
바뀌고 있네요

00:03:48.492 --> 00:03:49.792
바뀌고 있네요

00:03:49.792 --> 00:03:50.804
자 끝났습니다

00:03:50.804 --> 00:03:53.029
첫 jQuery 맛보기였습니다

00:03:53.029 --> 00:03:56.910
<script> 태그에 jQuery 라이브러리를
포함시키고

00:03:56.910 --> 00:03:59.819
jQuery에게 모든 h1 태그를 찾게 한 다음

00:03:59.819 --> 00:04:03.643
텍스트를 바꿔 보았습니다

00:04:03.643 --> 00:04:06.077
이 수업을 계속 들으면
매우 많은 것들을

00:04:06.083 --> 00:04:07.840
더 자세하게
배울 수 있을 겁니다

00:04:07.840 --> 00:04:11.117
요소를 선택하고 조작하는
다양한 방법과

00:04:11.117 --> 00:04:14.353
사용자 이벤트에 반응하는 웹 페이지와

00:04:14.353 --> 00:04:18.558
재미있는 애니메이션 효과들도
배울 수 있을 겁니다