[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.29,0:00:07.39,Default,,0000,0000,0000,,저는 'All about dogs'라는 멋진 웹페이지를 가지고 있어요
Dialogue: 0,0:00:07.39,0:00:12.58,Default,,0000,0000,0000,,물론 모든 사람들이 그러지는 않겠지만,\N저는 고양이를 더 좋아하고
Dialogue: 0,0:00:12.58,0:00:17.18,Default,,0000,0000,0000,,이 페이지를 'All about cats"로 바꾸고 싶어요
Dialogue: 0,0:00:17.18,0:00:23.27,Default,,0000,0000,0000,,단순히 HTML을 고치는 대신에\NJavaScript를 사용해보도록 하죠
Dialogue: 0,0:00:23.27,0:00:26.43,Default,,0000,0000,0000,,이 방식을 사용하여\N이 페이지를 고양이에 대한 것으로
Dialogue: 0,0:00:26.43,0:00:32.10,Default,,0000,0000,0000,,바꾸어주는 브라우저 확장프로그램으로\N변환할 수 있습니다
Dialogue: 0,0:00:32.10,0:00:37.45,Default,,0000,0000,0000,,고양이에 대한 페이지이라니 놀랍지 않나요?
Dialogue: 0,0:00:37.45,0:00:44.76,Default,,0000,0000,0000,,이 웹페이지는 머리글(heading), 본문(paragraph) \N그리고 사진을 몇개로 이루어져있습니다
Dialogue: 0,0:00:44.76,0:00:50.34,Default,,0000,0000,0000,,이제부터 배울 두 단계를 사용하면\N머리글 부터 시작하여
Dialogue: 0,0:00:50.34,0:00:53.91,Default,,0000,0000,0000,,각 부분별로 각각 바꾸어 볼 수 있을 것입니다.
Dialogue: 0,0:00:53.91,0:00:59.27,Default,,0000,0000,0000,,첫번째 단계는 머리글에 포함되어 있는\NDOM node를 찾는 것입니다
Dialogue: 0,0:00:59.27,0:01:06.90,Default,,0000,0000,0000,,document.body전에 있는 DOM node를 찾는 방법이죠
Dialogue: 0,0:01:06.90,0:01:12.49,Default,,0000,0000,0000,,하지만 저는 보다 특별한 무언가를 원해요\N이 h1처럼 말이죠
Dialogue: 0,0:01:12.49,0:01:14.70,Default,,0000,0000,0000,,그러니까 이 h1 은 ID를 가지고 있습니다
Dialogue: 0,0:01:14.70,0:01:19.74,Default,,0000,0000,0000,,이것은 이 페이지에서 오직 \N이 태그값을 나타내는 ID를 의미하고
Dialogue: 0,0:01:19.74,0:01:24.98,Default,,0000,0000,0000,,그리고 찾고자 하는 DOM 노드가\NID를 가지고 있으면 찾는것은 매우 쉽습니다
Dialogue: 0,0:01:24.98,0:01:30.34,Default,,0000,0000,0000,,'getElementById'라는 \Ndocument object의 메서드를 사용하면됩니다
Dialogue: 0,0:01:30.34,0:01:33.20,Default,,0000,0000,0000,, 태그 안에 바로 여기에서
Dialogue: 0,0:01:33.20,0:01:38.53,Default,,0000,0000,0000,,`var headingEl` 를 입력하여 \N값을 저장할 변수를 만드는 것부터 시작해보죠
Dialogue: 0,0:01:38.53,0:01:42.30,Default,,0000,0000,0000,,보통 저는 변수의 마지막부분이 El이나 Node가 되도록 만든답니다
Dialogue: 0,0:01:42.30,0:01:47.39,Default,,0000,0000,0000,,그리고 나서 우리가 흔히 node라고 부르는 element를 하나 저장합니다
Dialogue: 0,0:01:47.39,0:01:52.74,Default,,0000,0000,0000,,그리고 global document object에 이를 붙이는\N메서드를 사용할 것입니다
Dialogue: 0,0:01:52.74,0:01:58.96,Default,,0000,0000,0000,,우선 document를 입력하고 점을 입력한다음\NgetElementByID를 입력하세요
Dialogue: 0,0:01:58.96,0:02:04.75,Default,,0000,0000,0000,,그리고 함수이므로 괄호를 입력합니다\N다만 이것만으로는 어떠한 것을 찾을 수 없습니다
Dialogue: 0,0:02:04.75,0:02:07.73,Default,,0000,0000,0000,,왜냐면 어떤 ID를 찾을지 알려주지 않았기 때문이죠
Dialogue: 0,0:02:07.73,0:02:12.01,Default,,0000,0000,0000,,괄호안에서 우리가 찾기를 원하는 것을
Dialogue: 0,0:02:12.01,0:02:21.35,Default,,0000,0000,0000,,따옴표를 포함하여 문자열의 형태로 입력합니다\N즉, "heading"을 입력합니다
Dialogue: 0,0:02:21.35,0:02:24.10,Default,,0000,0000,0000,,여러분이 수정을 하기전에\N어떠한 element를
Dialogue: 0,0:02:24.10,0:02:26.54,Default,,0000,0000,0000,,어떻게 찾아야 하는지 아시겠죠?
Dialogue: 0,0:02:26.54,0:02:31.77,Default,,0000,0000,0000,,하나의 방법은 console.log 함수를 사용하는 것입니다
Dialogue: 0,0:02:31.77,0:02:36.20,Default,,0000,0000,0000,,하던일을 잠시 멈추고 개발자도구를 열어볼게요
Dialogue: 0,0:02:36.20,0:02:40.90,Default,,0000,0000,0000,,맥에서는 command키와 option키와 i키를
Dialogue: 0,0:02:40.90,0:02:48.03,Default,,0000,0000,0000,,윈도우에서는 Ctrl키와 Shift키와 i키를 눌러보세요
Dialogue: 0,0:02:48.03,0:02:54.83,Default,,0000,0000,0000,,콘솔 화면에서 h1이 사라진 것이 보이나요?\N그렇다면 첫 단계는 완료한 것입니다
Dialogue: 0,0:02:54.83,0:03:00.26,Default,,0000,0000,0000,,우리는 element를 찾았고 \N이제 그것을 변수에 저장하였습니다
Dialogue: 0,0:03:00.26,0:03:06.36,Default,,0000,0000,0000,,두번째 단계로 우리가 이미 알고있는\NinnerHTML을 바꾸는 방법을 사용하여
Dialogue: 0,0:03:06.36,0:03:10.68,Default,,0000,0000,0000,,해당 element를 조절해봅시다\N우선 'headingEl.innerHTML ='을
Dialogue: 0,0:03:10.68,0:03:17.63,Default,,0000,0000,0000,,입력하고 그 다음에 원하는 내용을 써보겠습니다\N진실을 보여줄 시간이 오고있어요
Dialogue: 0,0:03:17.63,0:03:22.72,Default,,0000,0000,0000,,우리가 수정한대로\N"All about cats"가 되었네요
Dialogue: 0,0:03:22.72,0:03:26.66,Default,,0000,0000,0000,,이렇게 우리는 고양이를 좋아하는 사람이 되어 보았습니다
Dialogue: 0,0:03:26.66,0:03:32.32,Default,,0000,0000,0000,,지금부터는 이런 방식으로 다른 것도 수정해보도록 해보세요