[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:03.45,Default,,0000,0000,0000,,윈스턴 그림이 있는\N페이지를 가져와봤어요
Dialogue: 0,0:00:03.45,0:00:06.56,Default,,0000,0000,0000,,이제 슬슬 추워지고\N윈스턴은 나이가 들어가니까
Dialogue: 0,0:00:06.56,0:00:08.65,Default,,0000,0000,0000,,윈스턴은 수염이\N있으면 좋겠대요
Dialogue: 0,0:00:08.65,0:00:10.75,Default,,0000,0000,0000,,제가 수염을\N그려줄 수도 있죠
Dialogue: 0,0:00:10.75,0:00:12.33,Default,,0000,0000,0000,,하지만 이게\N더 멋질 거에요
Dialogue: 0,0:00:12.33,0:00:16.41,Default,,0000,0000,0000,,사용자가 원하는 대로 수염을\N윈스턴에게 그려줄 수 있다면요
Dialogue: 0,0:00:16.41,0:00:21.09,Default,,0000,0000,0000,,긴 수염과 까칠한 부분도\N약간 있고 어떤 걸 원하든지요
Dialogue: 0,0:00:21.09,0:00:22.92,Default,,0000,0000,0000,,그럼 이걸 어떻게 할 수 있을까요?
Dialogue: 0,0:00:22.92,0:00:28.69,Default,,0000,0000,0000,,한 가지 방법은 이미지 위에서의\N마우스 움직임(mouseMove) 이벤트를 넣는 거에요
Dialogue: 0,0:00:28.69,0:00:34.44,Default,,0000,0000,0000,,사용자가 마우스를 얼굴 위로\N움직이면 함수가 호출되게요
Dialogue: 0,0:00:34.44,0:00:38.27,Default,,0000,0000,0000,,방금 배운 것으로\N한번 해볼게요
Dialogue: 0,0:00:38.27,0:00:40.09,Default,,0000,0000,0000,,첫 번째는\N요소를 찾는거에요
Dialogue: 0,0:00:40.09,0:00:42.24,Default,,0000,0000,0000,,이미지 말이죠
Dialogue: 0,0:00:42.24,0:00:46.100,Default,,0000,0000,0000,,var face = document.getElementById()
Dialogue: 0,0:00:47.01,0:00:50.56,Default,,0000,0000,0000,,id는 face라고 하죠\N괜찮은 ID네요
Dialogue: 0,0:00:50.56,0:00:53.87,Default,,0000,0000,0000,,두 번째는 콜백함수를\N만드는 거에요
Dialogue: 0,0:00:53.87,0:00:58.27,Default,,0000,0000,0000,,일단 적용되는 걸 봐야하니까\N간단한 걸로 해볼게요
Dialogue: 0,0:00:58.27,0:01:10.43,Default,,0000,0000,0000,,나중에 더 많은 걸\N만들어 볼게요
Dialogue: 0,0:01:10.43,0:01:13.31,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:01:13.31,0:01:17.95,Default,,0000,0000,0000,,마지막 단계는\N이걸 이것과 연결하는 거에요
Dialogue: 0,0:01:17.95,0:01:22.35,Default,,0000,0000,0000,,마우스 이벤트가 발생했을 때\N이 함수가 호출되어야 하니까요
Dialogue: 0,0:01:22.35,0:01:27.85,Default,,0000,0000,0000,,face.addEventListener("mousemove",\N라고 쓰고
Dialogue: 0,0:01:27.85,0:01:32.22,Default,,0000,0000,0000,,함수 이름을 쓰세요\N'onMouseMove'
Dialogue: 0,0:01:32.22,0:01:36.59,Default,,0000,0000,0000,,이제 이걸 멈추고 얼굴 위로\N마우스를 움직여봐요
Dialogue: 0,0:01:36.59,0:01:39.92,Default,,0000,0000,0000,,문구가 보이세요?
Dialogue: 0,0:01:39.92,0:01:43.86,Default,,0000,0000,0000,,이 효과가 적용되는 걸\N여러분도 봤을 거에요
Dialogue: 0,0:01:43.86,0:01:47.45,Default,,0000,0000,0000,,하지만 이게 우리가\N원하는 효과는 아니에요
Dialogue: 0,0:01:47.45,0:01:50.48,Default,,0000,0000,0000,,우린 문구를 쓰는게 아니라\N그림을 그리고 싶어요
Dialogue: 0,0:01:50.48,0:01:53.47,Default,,0000,0000,0000,,웹페이지에 어떻게\N그림을 그릴 수 있을까요?
Dialogue: 0,0:01:53.47,0:01:58.26,Default,,0000,0000,0000,,canvas 태그를 사용해서\N픽셀을 그릴 수 있어요
Dialogue: 0,0:01:58.26,0:02:01.16,Default,,0000,0000,0000,,여기 ProcessingJS에서\N하는 것 처럼요
Dialogue: 0,0:02:01.16,0:02:06.50,Default,,0000,0000,0000,,우리가 그리는 건 수염이지만 \N실제로는 수많은 검은 점일 거에요
Dialogue: 0,0:02:06.50,0:02:10.61,Default,,0000,0000,0000,,그냥 각 점에\Ndiv를 생성해서
Dialogue: 0,0:02:10.61,0:02:13.55,Default,,0000,0000,0000,,절대 위치로 div에게\N위치를 줄 수 있죠
Dialogue: 0,0:02:13.55,0:02:18.37,Default,,0000,0000,0000,,여기 수염 하나로\N해볼게요
Dialogue: 0,0:02:18.37,0:02:22.72,Default,,0000,0000,0000,,beard 클래스를 가진\Ndiv를 만들고
Dialogue: 0,0:02:22.72,0:02:29.72,Default,,0000,0000,0000,,이 수염에게 CSS를 주고요\N여기 넣을게요
Dialogue: 0,0:02:29.72,0:02:31.75,Default,,0000,0000,0000,,이건 이렇게 고칠게요
Dialogue: 0,0:02:31.75,0:02:36.47,Default,,0000,0000,0000,,이 수염의 배경색은\N검정색이고 5x5 픽셀이에요
Dialogue: 0,0:02:36.47,0:02:40.52,Default,,0000,0000,0000,,둥글게 만들려면\N여기 2픽셀의 테두리를 줘요
Dialogue: 0,0:02:40.52,0:02:44.70,Default,,0000,0000,0000,,그리고 절대 위치 값을 쓰고 있어요
Dialogue: 0,0:02:44.70,0:02:48.49,Default,,0000,0000,0000,,지금은 div가 얼굴 밑에 있네요
Dialogue: 0,0:02:48.49,0:02:51.47,Default,,0000,0000,0000,,얼굴 위로 올리려면\N어떻게 해야할까요?
Dialogue: 0,0:02:51.47,0:02:54.27,Default,,0000,0000,0000,,절대 위치를 사용한다는 것은
Dialogue: 0,0:02:54.27,0:02:57.66,Default,,0000,0000,0000,,'top'과 'left' 속성을 사용해서
Dialogue: 0,0:02:57.66,0:03:02.07,Default,,0000,0000,0000,,실제 위치를 표시해줘야해요\N절대 위치니까요
Dialogue: 0,0:03:02.07,0:03:07.92,Default,,0000,0000,0000,,여기 'top:80px'와\N'left:15px'를 줄게요
Dialogue: 0,0:03:07.92,0:03:09.48,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:03:09.48,0:03:13.75,Default,,0000,0000,0000,,이제 HTML으로는 되니까\N자바스크립트로 해볼게요
Dialogue: 0,0:03:13.75,0:03:19.06,Default,,0000,0000,0000,,사용자가 마우스를 움직일 때마다\N이 div가 생길 수 있게요
Dialogue: 0,0:03:19.06,0:03:22.91,Default,,0000,0000,0000,,자바스크립트 콜백 함수로\N돌아가 볼게요
Dialogue: 0,0:03:22.91,0:03:25.53,Default,,0000,0000,0000,,첫 번째는 div를 만드는 거에요
Dialogue: 0,0:03:25.53,0:03:31.41,Default,,0000,0000,0000,,document.createElement()\N함수로 할 수 있어요
Dialogue: 0,0:03:31.41,0:03:33.59,Default,,0000,0000,0000,,여긴 div가 되겠죠
Dialogue: 0,0:03:33.59,0:03:39.58,Default,,0000,0000,0000,,두 번째로는 클래스를 추가해요\N'beard.className = "beard";'
Dialogue: 0,0:03:39.58,0:03:42.20,Default,,0000,0000,0000,,이제 div가 생겼는데 어딘가에 떠 있어요
Dialogue: 0,0:03:42.20,0:03:47.07,Default,,0000,0000,0000,,마지막으로는 바디에 넣어주세요
Dialogue: 0,0:03:47.07,0:03:52.10,Default,,0000,0000,0000,,이제 HTML에서 한 걸\N자바스크립트로 해봤어요
Dialogue: 0,0:03:52.10,0:03:54.67,Default,,0000,0000,0000,,HTML에서는 지울게요
Dialogue: 0,0:03:54.67,0:03:58.76,Default,,0000,0000,0000,,이제 윈스턴을 클릭해 보세요
Dialogue: 0,0:03:58.76,0:04:02.54,Default,,0000,0000,0000,,어떤 일이 일어나는지 보세요
Dialogue: 0,0:04:02.54,0:04:04.93,Default,,0000,0000,0000,,수염이 생기는 거 봤어요?
Dialogue: 0,0:04:04.93,0:04:07.19,Default,,0000,0000,0000,,이걸 여러번 하면요?
Dialogue: 0,0:04:07.19,0:04:11.09,Default,,0000,0000,0000,,그러면 두 번째 클릭에서는\N아무것도 안 되는게 보일 거에요
Dialogue: 0,0:04:11.09,0:04:13.52,Default,,0000,0000,0000,,또는 아무것도\N안 되는 것처럼 보이죠
Dialogue: 0,0:04:13.52,0:04:17.86,Default,,0000,0000,0000,,왜냐하면 모든 div가\Ntop과 left 값이 같아서
Dialogue: 0,0:04:17.86,0:04:21.08,Default,,0000,0000,0000,,새 div가 예전 것 위에\N겹쳐지고 있어요
Dialogue: 0,0:04:21.08,0:04:25.49,Default,,0000,0000,0000,,우리는 div가 사용자의 마우스가\N있는 곳에 생기길 원해요
Dialogue: 0,0:04:25.49,0:04:30.39,Default,,0000,0000,0000,,마우스의 위치를\N어떻게 알 수 있을까요?
Dialogue: 0,0:04:30.39,0:04:34.32,Default,,0000,0000,0000,,브라우저는 많은 정보들을\N기록하고 있어요
Dialogue: 0,0:04:34.32,0:04:38.08,Default,,0000,0000,0000,,사용자 이벤트가 발생할 때마다\N어디서 일어나는 지 같은 것들요
Dialogue: 0,0:04:38.08,0:04:41.02,Default,,0000,0000,0000,,브라우저는 여러분들에게\N매번 그 정보를 제공해요
Dialogue: 0,0:04:41.02,0:04:43.22,Default,,0000,0000,0000,,이벤트 리스너 함수가\N호출될 때마다 불러와요
Dialogue: 0,0:04:43.22,0:04:46.80,Default,,0000,0000,0000,,그럼 어디서 어떻게 놀라운 \N정보를 얻을 수 있을까요?
Dialogue: 0,0:04:46.80,0:04:51.41,Default,,0000,0000,0000,,힌트로 한 글자만 보여줄게요
Dialogue: 0,0:04:51.41,0:04:56.07,Default,,0000,0000,0000,,이 e는 이벤트 정보 객체에요
Dialogue: 0,0:04:56.07,0:04:59.61,Default,,0000,0000,0000,,브라우저는 이 객체를\N첫 번째 인자로 전송해요
Dialogue: 0,0:04:59.61,0:05:02.13,Default,,0000,0000,0000,,이벤트 리스너 콜백 함수가\N호출되어질 때마다 말이죠
Dialogue: 0,0:05:02.13,0:05:06.18,Default,,0000,0000,0000,,전에는 필요없었으니까\N이 인자를 쓰지 않았어요
Dialogue: 0,0:05:06.18,0:05:09.00,Default,,0000,0000,0000,,하지만 이제 사용할 거니까\N객체에 이름을 줄거에요
Dialogue: 0,0:05:09.00,0:05:11.59,Default,,0000,0000,0000,,이름은 함수에서 참조하기\N쉽게 해줄거에요
Dialogue: 0,0:05:11.59,0:05:15.89,Default,,0000,0000,0000,,자바스크립트에서는 함수에 여러 개의\N인자를 줘도 호출할 수 있어요
Dialogue: 0,0:05:15.89,0:05:18.59,Default,,0000,0000,0000,,함수가 그 인자를 사용하지 않고\N참조하지 않아도 말이죠
Dialogue: 0,0:05:18.59,0:05:22.82,Default,,0000,0000,0000,,이 정보는 항상 받고있었어요\N우리가 몰랐을 뿐이죠
Dialogue: 0,0:05:22.82,0:05:28.28,Default,,0000,0000,0000,,이제 이 e의 로그를 보기 위해\N'console.log(e)'를 쓸게요
Dialogue: 0,0:05:28.28,0:05:32.16,Default,,0000,0000,0000,,이제 잠깐 윈스턴을 클릭하고\N콘솔을 관찰해보세요
Dialogue: 0,0:05:32.16,0:05:34.41,Default,,0000,0000,0000,,이 이벤트 객체의\N로그가 출력되는게 보일 거에요
Dialogue: 0,0:05:34.41,0:05:38.87,Default,,0000,0000,0000,,그리고 이 객체의\N속성을 볼 수 있어요
Dialogue: 0,0:05:38.87,0:05:43.27,Default,,0000,0000,0000,,우리가 관심있는 속성은\N두 개가 있어요
Dialogue: 0,0:05:43.27,0:05:45.59,Default,,0000,0000,0000,,'clientX'와\N'clientY'에요
Dialogue: 0,0:05:45.59,0:05:49.31,Default,,0000,0000,0000,,이벤트의 x와 y 위치가 기록되는데\N이걸 사용하게 될 거에요
Dialogue: 0,0:05:49.31,0:05:51.66,Default,,0000,0000,0000,,수염의 위치를\N지정하기 위해서요
Dialogue: 0,0:05:51.66,0:06:02.02,Default,,0000,0000,0000,,수염의 top을 e.clientY로 하고\N단위로는 px를 추가하세요
Dialogue: 0,0:06:02.02,0:06:11.34,Default,,0000,0000,0000,,left는 e.clientX로 하고\N단위로는 px를 추가하세요
Dialogue: 0,0:06:11.34,0:06:14.32,Default,,0000,0000,0000,,이제 잠시 멈추고\N마우스를 올려보세요
Dialogue: 0,0:06:14.32,0:06:18.01,Default,,0000,0000,0000,,윈스턴에게 수염을 그려주세요
Dialogue: 0,0:06:18.01,0:06:19.45,Default,,0000,0000,0000,,꽤 멋지죠?
Dialogue: 0,0:06:19.45,0:06:23.16,Default,,0000,0000,0000,,여러분이 각종 색칠 프로그램을\N상상할 수 있을거에요
Dialogue: 0,0:06:23.16,0:06:25.56,Default,,0000,0000,0000,,clientX와 clientY를 이용해서요
Dialogue: 0,0:06:25.56,0:06:28.79,Default,,0000,0000,0000,,콘솔에서 본 것 처럼\N여러 속성들이 있어요
Dialogue: 0,0:06:28.79,0:06:31.25,Default,,0000,0000,0000,,여러분이 이벤트 객체에서\N사용할 수 있는 것들이요
Dialogue: 0,0:06:31.25,0:06:35.35,Default,,0000,0000,0000,,제 생각에 가장 유용한 것은\N키보드와 관련된 거에요
Dialogue: 0,0:06:35.35,0:06:38.11,Default,,0000,0000,0000,,여러분은 사용자가 누르고\N있던 키를 알 수 있어요
Dialogue: 0,0:06:38.11,0:06:39.97,Default,,0000,0000,0000,,이벤트가 일어날 때 말이죠
Dialogue: 0,0:06:39.97,0:06:45.69,Default,,0000,0000,0000,,이걸로 키보드를 사용하는 인터페이스나\N아주 재밌는 게임을 만들 수 있어요
Dialogue: 0,0:06:45.69,0:06:47.21,Default,,0000,0000,0000,,한 가지 더 있어요
Dialogue: 0,0:06:47.21,0:06:49.70,Default,,0000,0000,0000,,이 인자를 e라고\N부르지 않아도 돼요
Dialogue: 0,0:06:49.70,0:06:57.31,Default,,0000,0000,0000,,일반적이지만 어떤 개발자들은\Nevt나 evert라고 불러요
Dialogue: 0,0:06:57.31,0:06:59.35,Default,,0000,0000,0000,,뭐라고 부르든지 상관없어요
Dialogue: 0,0:06:59.35,0:07:03.70,Default,,0000,0000,0000,,그게 브라우저가 여러분의 함수에\N전달하는 첫번째 인자라면요
Dialogue: 0,0:07:03.70,0:07:09.48,Default,,0000,0000,0000,,그리고 그 객체를 이런 방식으로\N참조할 것이라면요
Dialogue: 0,0:07:09.48,0:07:13.28,Default,,0000,0000,0000,,만약 문제가 생긴다면\Nconsole.log를 사용하도록 해요
Dialogue: 0,0:07:13.28,0:07:15.64,Default,,0000,0000,0000,,어떤 일이 일어나는지\N디버깅을 도와줄거에요
Dialogue: 0,0:07:15.64,0:07:17.24,Default,,0000,0000,0000,,여러분이 웹 개발자가 되면
Dialogue: 0,0:07:17.24,0:07:20.67,Default,,0000,0000,0000,,콘솔은 아마 여러분의\N가장 친한 친구가 될거에요
Dialogue: 0,0:07:20.67,0:07:21.91,Default,,0000,0000,0000,,쓰세요!