1
00:00:00,737 --> 00:00:06,762
이것처럼 기본적인 페이지는
HTML태그로 만들어져있어요

2
00:00:06,762 --> 00:00:09,180
웹페이지에
스타일을 주고 싶을 때

3
00:00:09,180 --> 00:00:12,180
CSS를
어떻게 넣을까요?

4
00:00:12,180 --> 00:00:14,397
태그를
추가하면 돼요

5
00:00:14,397 --> 00:00:17,349
그리고 브라우저가
'style'태그를 보면

6
00:00:17,349 --> 00:00:20,195
CSS 처리기를 써서
그 태그를 처리해요

7
00:00:20,195 --> 00:00:23,383
보통은 안에
태그를 넣어요

8
00:00:23,383 --> 00:00:27,352
왜냐하면 브라우저가
스타일을 처리할 때

9
00:00:27,352 --> 00:00:30,959
HTML태그가 오기 전에
처리하길 원하니까요

10
00:00:30,959 --> 00:00:35,326
만약 여기 아래에
을 넣으면

11
00:00:35,326 --> 00:00:37,927
'스.적.않.내'를
보게 돼요

12
00:00:37,927 --> 00:00:40,277
'스타일이 적용되지
않은 내용'을요

13
00:00:40,277 --> 00:00:44,726
그러면 사람들은 페이지가
벌거벗은 걸 보게 되잖아요!

14
00:00:44,726 --> 00:00:48,484
원래 있어야 하는 곳으로
돌려 놓을게요

15
00:00:48,484 --> 00:00:51,734
좋아요 이제 페이지에
스타일이 적용되었어요

16
00:00:51,734 --> 00:00:57,954
만약 인터랙티브하게 하려면
자바스크립트를 어떻게 넣으면 될까요?

17
00:00:57,954 --> 00:01:01,255
그러려면
태그를 넣으세요

18
00:01:01,255 --> 00:01:04,385
태그를
넣을 가장 좋은 곳은

19
00:01:04,385 --> 00:01:10,517
페이지의 가장 아래의
태그 바로 뒤에요

20
00:01:10,517 --> 00:01:15,150
여기에 넣었는데
이따가 설명해줄게요

21
00:01:15,150 --> 00:01:20,084
태그 안에는
무엇을 넣을 수 있을까요?

22
00:01:20,084 --> 00:01:25,354
유효한 자바스크립트를 넣어요
'var four = 2+2;' 처럼요

23
00:01:25,354 --> 00:01:27,854
하지만 아주
재미있지는 않아요

24
00:01:27,854 --> 00:01:30,176
페이지 상에는
아무 일도 일어나지 않으니까요

25
00:01:30,176 --> 00:01:31,732
칸 아카데미에서
공부하고 있다면

26
00:01:31,732 --> 00:01:35,026
4가 2 더하기 2라는 건
이미 알고 있을거에요

27
00:01:35,026 --> 00:01:37,982
이게 작동한다는 것을
보려면

28
00:01:37,982 --> 00:01:42,092
이 코드를
써야해요

29
00:01:42,092 --> 00:01:45,350
좋아요
아무 것도 안 보이죠?

30
00:01:45,350 --> 00:01:49,447
아마 이 함수를 본 적이
없기 때문일 거에요

31
00:01:49,447 --> 00:01:52,340
'console.log'는
특별한 함수인데

32
00:01:52,340 --> 00:01:54,720
많은 자바스크립트 환경에서
사용할 수 있어요

33
00:01:54,720 --> 00:01:56,326
브라우저를
포함해서요

34
00:01:56,326 --> 00:01:59,490
그러면 자바스크립트 콘솔에
뭔가가 나올 거에요

35
00:01:59,490 --> 00:02:01,651
여러분의 브라우저에서
이 콘솔을 찾을 수 있어요

36
00:02:01,651 --> 00:02:10,490
Cmd+Opt+i나
Ctrl+Opt+i를 누르면 돼요

37
00:02:10,490 --> 00:02:14,825
아니면 오른쪽 클릭해서
'요소 보기'를 눌러도 돼요

38
00:02:14,825 --> 00:02:18,839
이 프로그램을 멈추고
개발자 콘솔을 띄워서

39
00:02:18,839 --> 00:02:21,707
저 메시지가
나오는 걸 보세요

40
00:02:21,707 --> 00:02:24,599
해봤어요?
좋아요!

41
00:02:24,599 --> 00:02:26,656
이제 원하면
콘솔을 닫아도 돼요

42
00:02:26,656 --> 00:02:28,580
자리를 많이
차지하고 있으니까요

43
00:02:28,580 --> 00:02:32,962
약간 거슬릴 수도 있어요
쓰고있을 때 에러를 모두 보여주거든요

44
00:02:32,962 --> 00:02:35,515
하지만 디버깅할 때는
좋은 도구에요

45
00:02:35,515 --> 00:02:38,359
그러니까 도구 상자에
집어 넣어두세요

46
00:02:38,359 --> 00:02:42,325
이제 자바스크립트로
뭔가를 해볼거에요

47
00:02:42,325 --> 00:02:46,540
아직 무슨 뜻인지는 모르겠지만
몇 줄의 코드를 써볼거에요

48
00:02:46,540 --> 00:02:55,790
'document.body.innerHTML = 
"와! 네 페이지에 들어왔지롱!";'

49
00:02:57,091 --> 00:02:58,646
어떻게 됐는지
봤어요?

50
00:02:58,646 --> 00:03:03,128
페이지가 사라졌고
해커 메시지로 대체됐어요

51
00:03:03,128 --> 00:03:07,895
이 코드가 어떻게 작동하는지는
다음에 알아볼 거에요

52
00:03:07,895 --> 00:03:12,219
이 코드는 태그를 찾아서
그 속의 내용을 바꿨어요

53
00:03:12,219 --> 00:03:16,530
이 태그를 넣었을 때
무슨 일이 일어날까요?

54
00:03:16,530 --> 00:03:20,963
그리고 에
와 함께 넣는다면요?

55
00:03:20,963 --> 00:03:24,145
작동하지 않을 거에요
왜일까요?

56
00:03:24,145 --> 00:03:26,861
페이지는 태그를
먼저 검증하게 돼요

57
00:03:26,861 --> 00:03:29,093
태그를
보기 전에 말이죠

58
00:03:29,093 --> 00:03:35,208
그럼 페이지는 "앗 나는 아직
'document.body'를 보지도 못했어"

59
00:03:35,208 --> 00:03:38,494
"근데 이걸 수정하려고 하다니!
그런 건 안 돼" 라고 하겠죠

60
00:03:38,494 --> 00:03:43,762
그래서 태그를
페이지 마지막에 둬야해요

61
00:03:43,762 --> 00:03:46,861
그래서 웹페이지가
를 먼저 보고

62
00:03:46,861 --> 00:03:51,219
그 안의 내용을 모두 본 후
거기에다 뭔가를 하게 돼요

63
00:03:51,219 --> 00:03:54,809
먼저 웹페이지가
존재하게 해야하는 거죠

64
00:03:54,809 --> 00:03:56,672
그게 CSS와
다른 점이에요

65
00:03:56,672 --> 00:03:58,976
태그는
처음에 넣어야해요

66
00:03:58,976 --> 00:04:02,530
왜냐하면 CSS처리기가
스타일을 적용할 때는

67
00:04:02,530 --> 00:04:04,095
아직 없는 것에도
가능하기 때문이죠

68
00:04:04,095 --> 00:04:06,246
그게 보이면
적용할 거에요

69
00:04:06,246 --> 00:04:09,909
하지만 자바스크립트
DOM은 그렇지 못해요

70
00:04:09,909 --> 00:04:12,973
그러니까 여기 아래에
넣도록 해요

71
00:04:12,973 --> 00:04:16,357
에 추가하는 것은
다음에 해볼 거에요

72
00:04:16,357 --> 00:04:18,916
먼저 이걸 아래에
놓도록 해요

73
00:04:18,916 --> 00:04:24,245
그러면 제가 이 부분에 대해
더 많이 설명해드릴게요