[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.74,0:00:03.50,Default,,0000,0000,0000,,이제 여러분에게\N기본적인 jQuery 사용을
Dialogue: 0,0:00:03.50,0:00:05.72,Default,,0000,0000,0000,,보여드리겠습니다
Dialogue: 0,0:00:05.72,0:00:08.18,Default,,0000,0000,0000,,우선 <script> 태그를 사용해서
Dialogue: 0,0:00:08.18,0:00:10.72,Default,,0000,0000,0000,,jQuery 라이브러리를 넣습니다
Dialogue: 0,0:00:12.22,0:00:16.11,Default,,0000,0000,0000,,이전에는 자바스크립트 코드를\N 태그 안에 넣었죠
Dialogue: 0,0:00:16.12,0:00:20.28,Default,,0000,0000,0000,,이번에는 src 라는 속성을\N추가해보겠습니다
Dialogue: 0,0:00:20.28,0:00:24.39,Default,,0000,0000,0000,,이 속성은 URL을 넣기 위해\N필요합니다
Dialogue: 0,0:00:24.39,0:00:26.57,Default,,0000,0000,0000,,URL은 뭘까요?
Dialogue: 0,0:00:26.57,0:00:28.63,Default,,0000,0000,0000,,만약 제 컴퓨터에서 작업하다가
Dialogue: 0,0:00:28.63,0:00:30.09,Default,,0000,0000,0000,,jQuery를 다운 받아서
Dialogue: 0,0:00:30.09,0:00:32.52,Default,,0000,0000,0000,,제 웹 페이지가 있는 폴더에\N저장했다면
Dialogue: 0,0:00:32.52,0:00:36.47,Default,,0000,0000,0000,,그냥 여기에 jquery.js 를\N써주면 됩니다
Dialogue: 0,0:00:36.47,0:00:39.41,Default,,0000,0000,0000,,하지만 칸아카데미에서는\N동작하지 않을 겁니다
Dialogue: 0,0:00:39.41,0:00:43.10,Default,,0000,0000,0000,,여기에는 jQuery를\N받을 수 있는
Dialogue: 0,0:00:43.10,0:00:45.88,Default,,0000,0000,0000,,서버 URL을 적어줘야 합니다
Dialogue: 0,0:00:45.88,0:00:50.08,Default,,0000,0000,0000,,jquery.com에 가면\NURL 리스트가 있습니다
Dialogue: 0,0:00:50.62,0:00:52.74,Default,,0000,0000,0000,,그 중 하나를 복사해서\N여기에 넣어 보겠습니다
Dialogue: 0,0:00:52.74,0:00:54.43,Default,,0000,0000,0000,,됐습니다
Dialogue: 0,0:00:54.43,0:00:56.34,Default,,0000,0000,0000,,이제 이 URL에 대해 몇 가지만
Dialogue: 0,0:00:56.34,0:00:58.03,Default,,0000,0000,0000,,살펴보고 갑시다
Dialogue: 0,0:00:58.03,0:01:01.82,Default,,0000,0000,0000,,일단 https로 시작하는 것을\N볼 수 있습니다
Dialogue: 0,0:01:01.82,0:01:05.23,Default,,0000,0000,0000,,이는 보안이 강화된\NURL임을 의미합니다
Dialogue: 0,0:01:05.23,0:01:09.23,Default,,0000,0000,0000,,칸아카데미에서는\N안전하게 쓸 수 있는
Dialogue: 0,0:01:09.23,0:01:11.21,Default,,0000,0000,0000,,웹 자원만 가져올 수 있습니다
Dialogue: 0,0:01:11.21,0:01:15.34,Default,,0000,0000,0000,,웹 개발에서의\N좋은 관례라 할 수 있죠
Dialogue: 0,0:01:15.66,0:01:19.12,Default,,0000,0000,0000,,두번째로 이 자원은\Ngoogleapis.com 이라는
Dialogue: 0,0:01:19.12,0:01:22.36,Default,,0000,0000,0000,,구글 서버에서 가져왔음을\N알 수 있습니다
Dialogue: 0,0:01:22.75,0:01:25.38,Default,,0000,0000,0000,,이런 서버를 CDN이라 부릅니다
Dialogue: 0,0:01:25.38,0:01:27.92,Default,,0000,0000,0000,,컨텐츠 전송 네트워크라고\N하는 것이죠
Dialogue: 0,0:01:27.92,0:01:29.88,Default,,0000,0000,0000,,이 서버는 라이브러리 같이
Dialogue: 0,0:01:29.88,0:01:33.09,Default,,0000,0000,0000,,정적인 파일들을\N아주 빨리 제공하는 데
Dialogue: 0,0:01:33.10,0:01:35.38,Default,,0000,0000,0000,,최적화된 서버입니다
Dialogue: 0,0:01:35.39,0:01:38.16,Default,,0000,0000,0000,,구글 서버는\N제가 신뢰하는 곳 중 하나입니다
Dialogue: 0,0:01:38.16,0:01:41.10,Default,,0000,0000,0000,,일반적으로 스크립트를\N가져오는 서버는
Dialogue: 0,0:01:41.10,0:01:43.00,Default,,0000,0000,0000,,신뢰할 수 있는 곳이어야 합니다
Dialogue: 0,0:01:43.00,0:01:47.24,Default,,0000,0000,0000,,어떤 곳은 여러분의 사이트에\N나쁜 짓을 할 수도 있기 때문입니다
Dialogue: 0,0:01:47.40,0:01:49.52,Default,,0000,0000,0000,,세번째로 살펴볼 것은
Dialogue: 0,0:01:49.52,0:01:53.31,Default,,0000,0000,0000,,URL에 2.1.4. 라고 적힌\N버전 정보입니다
Dialogue: 0,0:01:53.81,0:01:56.40,Default,,0000,0000,0000,,jQuery 라이브러리는\N계속 발전 중이어서
Dialogue: 0,0:01:56.40,0:01:59.02,Default,,0000,0000,0000,,종종 새로운 버전을 내놓습니다
Dialogue: 0,0:01:59.02,0:02:00.99,Default,,0000,0000,0000,,왼쪽에 있는 숫자일 수록
Dialogue: 0,0:02:00.99,0:02:03.28,Default,,0000,0000,0000,,메이저 버전을 표현하고
Dialogue: 0,0:02:03.28,0:02:05.76,Default,,0000,0000,0000,,오른쪽에 있는 숫자일 수록
Dialogue: 0,0:02:05.76,0:02:08.13,Default,,0000,0000,0000,,마이너 버전을 나타냅니다
Dialogue: 0,0:02:08.14,0:02:10.20,Default,,0000,0000,0000,,저는 jQuery 2를\N사용하고 있습니다
Dialogue: 0,0:02:10.20,0:02:12.30,Default,,0000,0000,0000,,요즘 브라우저에서\N동작하는 버전이죠
Dialogue: 0,0:02:12.30,0:02:14.48,Default,,0000,0000,0000,,하지만 IE8에서는\N작동하지 않습니다
Dialogue: 0,0:02:14.48,0:02:15.80,Default,,0000,0000,0000,,여러분의 웹 사이트에서
Dialogue: 0,0:02:15.80,0:02:19.62,Default,,0000,0000,0000,,필요사항에 따라 어떤 버전을 쓸 지\N결정할 수 있습니다
Dialogue: 0,0:02:19.63,0:02:22.81,Default,,0000,0000,0000,,이제 jQuery를 포함시켰으니
Dialogue: 0,0:02:22.81,0:02:24.97,Default,,0000,0000,0000,,또 다른 <script> 태그 안에서
Dialogue: 0,0:02:24.97,0:02:28.27,Default,,0000,0000,0000,,실제로 사용해봅시다
Dialogue: 0,0:02:30.23,0:02:33.31,Default,,0000,0000,0000,,모든 자바스크립트 라이브러리들은\N함수들이 노출돼있고
Dialogue: 0,0:02:33.31,0:02:35.36,Default,,0000,0000,0000,,함수의 이름을 제공합니다
Dialogue: 0,0:02:35.36,0:02:37.24,Default,,0000,0000,0000,,사용 설명서를 찾아봐서
Dialogue: 0,0:02:37.24,0:02:39.26,Default,,0000,0000,0000,,함수의 이름은 무엇이며
Dialogue: 0,0:02:39.26,0:02:41.76,Default,,0000,0000,0000,,어떤 일을 하는 지\N알아야 합니다
Dialogue: 0,0:02:41.76,0:02:45.44,Default,,0000,0000,0000,,jQuery 라이브러리는\N메인 함수 하나를 노출하고 있는데요
Dialogue: 0,0:02:45.44,0:02:47.52,Default,,0000,0000,0000,,아주 짧은 이름을 가지고 있습니다
Dialogue: 0,0:02:47.52,0:02:50.64,Default,,0000,0000,0000,,바로 달러 기호이죠
Dialogue: 0,0:02:50.64,0:02:52.26,Default,,0000,0000,0000,,그 말은 우리가\N제일 먼저 써야할 것은
Dialogue: 0,0:02:52.26,0:02:53.56,Default,,0000,0000,0000,,바로 달러라는 거죠
Dialogue: 0,0:02:53.56,0:02:56.53,Default,,0000,0000,0000,,이건 함수니까\N괄호를 쳐주고요
Dialogue: 0,0:02:56.53,0:02:59.41,Default,,0000,0000,0000,,당연히 세미콜론도 찍어야겠죠
Dialogue: 0,0:02:59.41,0:03:01.93,Default,,0000,0000,0000,,함수 이름이 짧아서 좋군요
Dialogue: 0,0:03:01.93,0:03:05.76,Default,,0000,0000,0000,,왜냐면 이 함수를 호출할 일이\N매우 많거든요
Dialogue: 0,0:03:06.23,0:03:08.93,Default,,0000,0000,0000,,이 함수에는 매우 많은 걸\N전달할 수 있습니다
Dialogue: 0,0:03:08.93,0:03:13.87,Default,,0000,0000,0000,,예시로 h1이라는 문자열을\N넘겨보겠습니다
Dialogue: 0,0:03:16.38,0:03:19.72,Default,,0000,0000,0000,,이걸 쓰면\NjQuery는 이 웹 페이지의
Dialogue: 0,0:03:19.72,0:03:23.09,Default,,0000,0000,0000,,모든 h1 요소를 찾아줍니다
Dialogue: 0,0:03:23.10,0:03:28.05,Default,,0000,0000,0000,,그리고 jQuery 콜렉션 객체로\N반환해줍니다
Dialogue: 0,0:03:28.14,0:03:30.10,Default,,0000,0000,0000,,객체를 반환 받았으니
Dialogue: 0,0:03:30.10,0:03:33.23,Default,,0000,0000,0000,,jQuery 객체의 메소드들을 호출함으로써
Dialogue: 0,0:03:33.23,0:03:37.20,Default,,0000,0000,0000,,아까 찾은 h1 요소들을\N조작할 수 있습니다
Dialogue: 0,0:03:37.20,0:03:39.94,Default,,0000,0000,0000,,예를 들면 text 함수를 사용해서
Dialogue: 0,0:03:39.94,0:03:43.36,Default,,0000,0000,0000,,모든 h1 요소의\N텍스트를 바꿀 수 있습니다
Dialogue: 0,0:03:43.36,0:03:46.04,Default,,0000,0000,0000,,문자열을 전달해서 말이죠
Dialogue: 0,0:03:47.24,0:03:48.49,Default,,0000,0000,0000,,바뀌고 있네요
Dialogue: 0,0:03:48.49,0:03:49.79,Default,,0000,0000,0000,,바뀌고 있네요
Dialogue: 0,0:03:49.79,0:03:50.80,Default,,0000,0000,0000,,자 끝났습니다
Dialogue: 0,0:03:50.80,0:03:53.03,Default,,0000,0000,0000,,첫 jQuery 맛보기였습니다
Dialogue: 0,0:03:53.03,0:03:56.91,Default,,0000,0000,0000,,<script> 태그에 jQuery 라이브러리를\N포함시키고
Dialogue: 0,0:03:56.91,0:03:59.82,Default,,0000,0000,0000,,jQuery에게 모든 h1 태그를 찾게 한 다음
Dialogue: 0,0:03:59.82,0:04:03.64,Default,,0000,0000,0000,,텍스트를 바꿔 보았습니다
Dialogue: 0,0:04:03.64,0:04:06.08,Default,,0000,0000,0000,,이 수업을 계속 들으면\N매우 많은 것들을
Dialogue: 0,0:04:06.08,0:04:07.84,Default,,0000,0000,0000,,더 자세하게\N배울 수 있을 겁니다
Dialogue: 0,0:04:07.84,0:04:11.12,Default,,0000,0000,0000,,요소를 선택하고 조작하는\N다양한 방법과
Dialogue: 0,0:04:11.12,0:04:14.35,Default,,0000,0000,0000,,사용자 이벤트에 반응하는 웹 페이지와
Dialogue: 0,0:04:14.35,0:04:18.56,Default,,0000,0000,0000,,재미있는 애니메이션 효과들도\N배울 수 있을 겁니다