1
00:00:01,287 --> 00:00:07,387
저는 'All about dogs'라는 멋진 웹페이지를 가지고 있어요

2
00:00:07,387 --> 00:00:12,583
물론 모든 사람들이 그러지는 않겠지만,
저는 고양이를 더 좋아하고

3
00:00:12,583 --> 00:00:17,178
이 페이지를 'All about cats"로 바꾸고 싶어요

4
00:00:17,178 --> 00:00:23,267
단순히 HTML을 고치는 대신에
JavaScript를 사용해보도록 하죠

5
00:00:23,267 --> 00:00:26,431
이 방식을 사용하여
이 페이지를 고양이에 대한 것으로

6
00:00:26,431 --> 00:00:32,096
바꾸어주는 브라우저 확장프로그램으로
변환할 수 있습니다

7
00:00:32,096 --> 00:00:37,450
고양이에 대한 페이지이라니 놀랍지 않나요?

8
00:00:37,450 --> 00:00:44,761
이 웹페이지는 머리글(heading), 본문(paragraph) 
그리고 사진을 몇개로 이루어져있습니다

9
00:00:44,761 --> 00:00:50,340
이제부터 배울 두 단계를 사용하면
머리글 부터 시작하여

10
00:00:50,340 --> 00:00:53,909
각 부분별로 각각 바꾸어 볼 수 있을 것입니다.

11
00:00:53,909 --> 00:00:59,268
첫번째 단계는 머리글에 포함되어 있는
DOM node를 찾는 것입니다

12
00:00:59,268 --> 00:01:06,895
document.body전에 있는 DOM node를 찾는 방법이죠

13
00:01:06,895 --> 00:01:12,492
하지만 저는 보다 특별한 무언가를 원해요
이 h1처럼 말이죠

14
00:01:12,492 --> 00:01:14,700
그러니까 이 h1 은 ID를 가지고 있습니다

15
00:01:14,700 --> 00:01:19,743
이것은 이 페이지에서 오직 
이 태그값을 나타내는 ID를 의미하고

16
00:01:19,743 --> 00:01:24,980
그리고 찾고자 하는 DOM 노드가
ID를 가지고 있으면 찾는것은 매우 쉽습니다

17
00:01:24,980 --> 00:01:30,342
'getElementById'라는 
document object의 메서드를 사용하면됩니다

18
00:01:30,342 --> 00:01:33,198
 태그 안에 바로 여기에서

19
00:01:33,198 --> 00:01:38,527
`var headingEl` 를 입력하여 
값을 저장할 변수를 만드는 것부터 시작해보죠

20
00:01:38,527 --> 00:01:42,299
보통 저는 변수의 마지막부분이 El이나 Node가 되도록 만든답니다

21
00:01:42,299 --> 00:01:47,390
그리고 나서 우리가 흔히 node라고 부르는 element를 하나 저장합니다

22
00:01:47,390 --> 00:01:52,743
그리고 global document object에 이를 붙이는
메서드를 사용할 것입니다

23
00:01:52,743 --> 00:01:58,964
우선 document를 입력하고 점을 입력한다음
getElementByID를 입력하세요

24
00:01:58,964 --> 00:02:04,753
그리고 함수이므로 괄호를 입력합니다
다만 이것만으로는 어떠한 것을 찾을 수 없습니다

25
00:02:04,753 --> 00:02:07,733
왜냐면 어떤 ID를 찾을지 알려주지 않았기 때문이죠

26
00:02:07,733 --> 00:02:12,011
괄호안에서 우리가 찾기를 원하는 것을

27
00:02:12,011 --> 00:02:21,354
따옴표를 포함하여 문자열의 형태로 입력합니다
즉, "heading"을 입력합니다

28
00:02:21,354 --> 00:02:24,098
여러분이 수정을 하기전에
어떠한 element를

29
00:02:24,098 --> 00:02:26,537
어떻게 찾아야 하는지 아시겠죠?

30
00:02:26,537 --> 00:02:31,770
하나의 방법은 console.log 함수를 사용하는 것입니다

31
00:02:31,770 --> 00:02:36,202
하던일을 잠시 멈추고 개발자도구를 열어볼게요

32
00:02:36,202 --> 00:02:40,896
맥에서는 command키와 option키와 i키를

33
00:02:40,896 --> 00:02:48,029
윈도우에서는 Ctrl키와 Shift키와 i키를 눌러보세요

34
00:02:48,029 --> 00:02:54,833
콘솔 화면에서 h1이 사라진 것이 보이나요?
그렇다면 첫 단계는 완료한 것입니다

35
00:02:54,833 --> 00:03:00,255
우리는 element를 찾았고 
이제 그것을 변수에 저장하였습니다

36
00:03:00,255 --> 00:03:06,359
두번째 단계로 우리가 이미 알고있는
innerHTML을 바꾸는 방법을 사용하여

37
00:03:06,359 --> 00:03:10,679
해당 element를 조절해봅시다
우선 'headingEl.innerHTML ='을

38
00:03:10,679 --> 00:03:17,627
입력하고 그 다음에 원하는 내용을 써보겠습니다
진실을 보여줄 시간이 오고있어요

39
00:03:17,627 --> 00:03:22,721
우리가 수정한대로
"All about cats"가 되었네요

40
00:03:22,721 --> 00:03:26,655
이렇게 우리는 고양이를 좋아하는 사람이 되어 보았습니다

41
00:03:26,655 --> 00:03:32,320
지금부터는 이런 방식으로 다른 것도 수정해보도록 해보세요