WEBVTT

00:00:00.000 --> 00:00:03.450
윈스턴 그림이 있는
페이지를 가져와봤어요

00:00:03.450 --> 00:00:06.556
이제 슬슬 추워지고
윈스턴은 나이가 들어가니까

00:00:06.556 --> 00:00:08.646
윈스턴은 수염이
있으면 좋겠대요

00:00:08.646 --> 00:00:10.750
제가 수염을
그려줄 수도 있죠

00:00:10.750 --> 00:00:12.333
하지만 이게
더 멋질 거에요

00:00:12.333 --> 00:00:16.412
사용자가 원하는 대로 수염을
윈스턴에게 그려줄 수 있다면요

00:00:16.412 --> 00:00:21.090
긴 수염과 까칠한 부분도
약간 있고 어떤 걸 원하든지요

00:00:21.090 --> 00:00:22.921
그럼 이걸 어떻게 할 수 있을까요?

00:00:22.921 --> 00:00:28.693
한 가지 방법은 이미지 위에서의
마우스 움직임(mouseMove) 이벤트를 넣는 거에요

00:00:28.693 --> 00:00:34.441
사용자가 마우스를 얼굴 위로
움직이면 함수가 호출되게요

00:00:34.441 --> 00:00:38.274
방금 배운 것으로
한번 해볼게요

00:00:38.274 --> 00:00:40.092
첫 번째는
요소를 찾는거에요

00:00:40.092 --> 00:00:42.241
이미지 말이죠

00:00:42.241 --> 00:00:46.996
var face = document.getElementById()

00:00:47.009 --> 00:00:50.561
id는 face라고 하죠
괜찮은 ID네요

00:00:50.561 --> 00:00:53.866
두 번째는 콜백함수를
만드는 거에요

00:00:53.866 --> 00:00:58.267
일단 적용되는 걸 봐야하니까
간단한 걸로 해볼게요

00:00:58.267 --> 00:01:10.426
나중에 더 많은 걸
만들어 볼게요

00:01:10.426 --> 00:01:13.308
좋아요

00:01:13.308 --> 00:01:17.946
마지막 단계는
이걸 이것과 연결하는 거에요

00:01:17.946 --> 00:01:22.351
마우스 이벤트가 발생했을 때
이 함수가 호출되어야 하니까요

00:01:22.351 --> 00:01:27.854
face.addEventListener("mousemove",
라고 쓰고

00:01:27.854 --> 00:01:32.220
함수 이름을 쓰세요
'onMouseMove'

00:01:32.220 --> 00:01:36.590
이제 이걸 멈추고 얼굴 위로
마우스를 움직여봐요

00:01:36.590 --> 00:01:39.915
문구가 보이세요?

00:01:39.915 --> 00:01:43.856
이 효과가 적용되는 걸
여러분도 봤을 거에요

00:01:43.856 --> 00:01:47.454
하지만 이게 우리가
원하는 효과는 아니에요

00:01:47.454 --> 00:01:50.480
우린 문구를 쓰는게 아니라
그림을 그리고 싶어요

00:01:50.480 --> 00:01:53.466
웹페이지에 어떻게
그림을 그릴 수 있을까요?

00:01:53.466 --> 00:01:58.256
canvas 태그를 사용해서
픽셀을 그릴 수 있어요

00:01:58.256 --> 00:02:01.162
여기 ProcessingJS에서
하는 것 처럼요

00:02:01.162 --> 00:02:06.502
우리가 그리는 건 수염이지만 
실제로는 수많은 검은 점일 거에요

00:02:06.502 --> 00:02:10.606
그냥 각 점에
div를 생성해서

00:02:10.606 --> 00:02:13.551
절대 위치로 div에게
위치를 줄 수 있죠

00:02:13.551 --> 00:02:18.370
여기 수염 하나로
해볼게요

00:02:18.370 --> 00:02:22.724
beard 클래스를 가진
div를 만들고

00:02:22.724 --> 00:02:29.721
이 수염에게 CSS를 주고요
여기 넣을게요

00:02:29.721 --> 00:02:31.750
이건 이렇게 고칠게요

00:02:31.750 --> 00:02:36.471
이 수염의 배경색은
검정색이고 5x5 픽셀이에요

00:02:36.471 --> 00:02:40.525
둥글게 만들려면
여기 2픽셀의 테두리를 줘요

00:02:40.525 --> 00:02:44.704
그리고 절대 위치 값을 쓰고 있어요

00:02:44.704 --> 00:02:48.488
지금은 div가 얼굴 밑에 있네요

00:02:48.488 --> 00:02:51.473
얼굴 위로 올리려면
어떻게 해야할까요?

00:02:51.473 --> 00:02:54.271
절대 위치를 사용한다는 것은

00:02:54.271 --> 00:02:57.657
'top'과 'left' 속성을 사용해서

00:02:57.657 --> 00:03:02.073
실제 위치를 표시해줘야해요
절대 위치니까요

00:03:02.073 --> 00:03:07.923
여기 'top:80px'와
'left:15px'를 줄게요

00:03:07.923 --> 00:03:09.482
좋아요

00:03:09.482 --> 00:03:13.750
이제 HTML으로는 되니까
자바스크립트로 해볼게요

00:03:13.750 --> 00:03:19.055
사용자가 마우스를 움직일 때마다
이 div가 생길 수 있게요

00:03:19.055 --> 00:03:22.908
자바스크립트 콜백 함수로
돌아가 볼게요

00:03:22.908 --> 00:03:25.534
첫 번째는 div를 만드는 거에요

00:03:25.534 --> 00:03:31.406
document.createElement()
함수로 할 수 있어요

00:03:31.406 --> 00:03:33.590
여긴 div가 되겠죠

00:03:33.590 --> 00:03:39.580
두 번째로는 클래스를 추가해요
'beard.className = "beard";'

00:03:39.580 --> 00:03:42.198
이제 div가 생겼는데 어딘가에 떠 있어요

00:03:42.198 --> 00:03:47.072
마지막으로는 바디에 넣어주세요

00:03:47.072 --> 00:03:52.103
이제 HTML에서 한 걸
자바스크립트로 해봤어요

00:03:52.103 --> 00:03:54.666
HTML에서는 지울게요

00:03:54.666 --> 00:03:58.764
이제 윈스턴을 클릭해 보세요

00:03:58.764 --> 00:04:02.542
어떤 일이 일어나는지 보세요

00:04:02.542 --> 00:04:04.933
수염이 생기는 거 봤어요?

00:04:04.933 --> 00:04:07.191
이걸 여러번 하면요?

00:04:07.191 --> 00:04:11.090
그러면 두 번째 클릭에서는
아무것도 안 되는게 보일 거에요

00:04:11.090 --> 00:04:13.525
또는 아무것도
안 되는 것처럼 보이죠

00:04:13.525 --> 00:04:17.863
왜냐하면 모든 div가
top과 left 값이 같아서

00:04:17.863 --> 00:04:21.081
새 div가 예전 것 위에
겹쳐지고 있어요

00:04:21.081 --> 00:04:25.493
우리는 div가 사용자의 마우스가
있는 곳에 생기길 원해요

00:04:25.493 --> 00:04:30.386
마우스의 위치를
어떻게 알 수 있을까요?

00:04:30.386 --> 00:04:34.317
브라우저는 많은 정보들을
기록하고 있어요

00:04:34.317 --> 00:04:38.082
사용자 이벤트가 발생할 때마다
어디서 일어나는 지 같은 것들요

00:04:38.082 --> 00:04:41.018
브라우저는 여러분들에게
매번 그 정보를 제공해요

00:04:41.018 --> 00:04:43.224
이벤트 리스너 함수가
호출될 때마다 불러와요

00:04:43.224 --> 00:04:46.804
그럼 어디서 어떻게 놀라운 
정보를 얻을 수 있을까요?

00:04:46.804 --> 00:04:51.412
힌트로 한 글자만 보여줄게요

00:04:51.412 --> 00:04:56.074
이 e는 이벤트 정보 객체에요

00:04:56.074 --> 00:04:59.609
브라우저는 이 객체를
첫 번째 인자로 전송해요

00:04:59.609 --> 00:05:02.129
이벤트 리스너 콜백 함수가
호출되어질 때마다 말이죠

00:05:02.129 --> 00:05:06.178
전에는 필요없었으니까
이 인자를 쓰지 않았어요

00:05:06.178 --> 00:05:09.002
하지만 이제 사용할 거니까
객체에 이름을 줄거에요

00:05:09.002 --> 00:05:11.594
이름은 함수에서 참조하기
쉽게 해줄거에요

00:05:11.594 --> 00:05:15.886
자바스크립트에서는 함수에 여러 개의
인자를 줘도 호출할 수 있어요

00:05:15.886 --> 00:05:18.588
함수가 그 인자를 사용하지 않고
참조하지 않아도 말이죠

00:05:18.588 --> 00:05:22.821
이 정보는 항상 받고있었어요
우리가 몰랐을 뿐이죠

00:05:22.821 --> 00:05:28.278
이제 이 e의 로그를 보기 위해
'console.log(e)'를 쓸게요

00:05:28.278 --> 00:05:32.162
이제 잠깐 윈스턴을 클릭하고
콘솔을 관찰해보세요

00:05:32.162 --> 00:05:34.410
이 이벤트 객체의
로그가 출력되는게 보일 거에요

00:05:34.410 --> 00:05:38.871
그리고 이 객체의
속성을 볼 수 있어요

00:05:38.871 --> 00:05:43.267
우리가 관심있는 속성은
두 개가 있어요

00:05:43.267 --> 00:05:45.594
'clientX'와
'clientY'에요

00:05:45.594 --> 00:05:49.314
이벤트의 x와 y 위치가 기록되는데
이걸 사용하게 될 거에요

00:05:49.314 --> 00:05:51.665
수염의 위치를
지정하기 위해서요

00:05:51.665 --> 00:06:02.015
수염의 top을 e.clientY로 하고
단위로는 px를 추가하세요

00:06:02.015 --> 00:06:11.343
left는 e.clientX로 하고
단위로는 px를 추가하세요

00:06:11.343 --> 00:06:14.320
이제 잠시 멈추고
마우스를 올려보세요

00:06:14.320 --> 00:06:18.007
윈스턴에게 수염을 그려주세요

00:06:18.007 --> 00:06:19.454
꽤 멋지죠?

00:06:19.454 --> 00:06:23.157
여러분이 각종 색칠 프로그램을
상상할 수 있을거에요

00:06:23.157 --> 00:06:25.559
clientX와 clientY를 이용해서요

00:06:25.559 --> 00:06:28.793
콘솔에서 본 것 처럼
여러 속성들이 있어요

00:06:28.793 --> 00:06:31.251
여러분이 이벤트 객체에서
사용할 수 있는 것들이요

00:06:31.251 --> 00:06:35.354
제 생각에 가장 유용한 것은
키보드와 관련된 거에요

00:06:35.354 --> 00:06:38.107
여러분은 사용자가 누르고
있던 키를 알 수 있어요

00:06:38.107 --> 00:06:39.971
이벤트가 일어날 때 말이죠

00:06:39.971 --> 00:06:45.692
이걸로 키보드를 사용하는 인터페이스나
아주 재밌는 게임을 만들 수 있어요

00:06:45.692 --> 00:06:47.206
한 가지 더 있어요

00:06:47.206 --> 00:06:49.700
이 인자를 e라고
부르지 않아도 돼요

00:06:49.700 --> 00:06:57.312
일반적이지만 어떤 개발자들은
evt나 evert라고 불러요

00:06:57.312 --> 00:06:59.352
뭐라고 부르든지 상관없어요

00:06:59.352 --> 00:07:03.695
그게 브라우저가 여러분의 함수에
전달하는 첫번째 인자라면요

00:07:03.695 --> 00:07:09.485
그리고 그 객체를 이런 방식으로
참조할 것이라면요

00:07:09.485 --> 00:07:13.281
만약 문제가 생긴다면
console.log를 사용하도록 해요

00:07:13.281 --> 00:07:15.639
어떤 일이 일어나는지
디버깅을 도와줄거에요

00:07:15.639 --> 00:07:17.235
여러분이 웹 개발자가 되면

00:07:17.235 --> 00:07:20.666
콘솔은 아마 여러분의
가장 친한 친구가 될거에요

00:07:20.666 --> 00:07:21.914
쓰세요!