[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.52,Default,,0000,0000,0000,,지금까지는 페이지 상에\N존재하는 요소들을 수정해봤어요
Dialogue: 0,0:00:06.52,0:00:09.91,Default,,0000,0000,0000,,만약 페이지에\N새로운 요소를 넣고 싶다면요?
Dialogue: 0,0:00:09.91,0:00:12.98,Default,,0000,0000,0000,,'innerHTML'로\N할 수 있어요
Dialogue: 0,0:00:12.98,0:00:18.93,Default,,0000,0000,0000,,여기서 한 것 처럼\N태그 안에 문자열을 쓰는거에요
Dialogue: 0,0:00:18.93,0:00:21.07,Default,,0000,0000,0000,,약간 지저분해\N질수도 있어요
Dialogue: 0,0:00:21.07,0:00:25.54,Default,,0000,0000,0000,,특히 태그들이 서로 다른 속성과\N스타일과 클래스를 가진다면요
Dialogue: 0,0:00:25.54,0:00:31.10,Default,,0000,0000,0000,,그래서 대신에\N굉장히 예쁜 방식을 쓸 거에요
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,처음부터 요소를 만들어서\N페이지에 넣을 거에요
Dialogue: 0,0:00:35.39,0:00:40.68,Default,,0000,0000,0000,,페이지에 고양이 그림을\N넣고 싶다고 해봐요
Dialogue: 0,0:00:40.68,0:00:44.02,Default,,0000,0000,0000,,왜냐하면\N좀 더 필요할 것 같으니까요
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,첫번째 단계는\N''요소를 만드는 거에요
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,저걸 만들고\N싶어요
Dialogue: 0,0:00:50.79,0:00:54.52,Default,,0000,0000,0000,,그럼 이 요소를 넣을\N변수를 만들어요
Dialogue: 0,0:00:54.52,0:00:55.98,Default,,0000,0000,0000,,'catEl'
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,그 다음에는 이걸 쓸거에요\N'document.createElement'
Dialogue: 0,0:01:00.94,0:01:03.62,Default,,0000,0000,0000,,그리고 우리가 만드는\N태그의 이름을 넣어요
Dialogue: 0,0:01:03.62,0:01:06.62,Default,,0000,0000,0000,,'img'
Dialogue: 0,0:01:06.62,0:01:12.06,Default,,0000,0000,0000,,이제 브라우저가 이미지 태그를\N만들었다고 할 수 있죠
Dialogue: 0,0:01:12.06,0:01:15.07,Default,,0000,0000,0000,,여기 어딘가\N돌아다니고 있을거에요
Dialogue: 0,0:01:15.07,0:01:19.11,Default,,0000,0000,0000,,다음 단계는\N경로를 추가하는 거에요
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,그러니까\N'catEl.src ='
Dialogue: 0,0:01:23.31,0:01:29.38,Default,,0000,0000,0000,,그리고 여기서\N경로를 가져와서
Dialogue: 0,0:01:29.38,0:01:34.76,Default,,0000,0000,0000,,'alt'를 추가해야해요\N좀 더 접근이 용이하게요
Dialogue: 0,0:01:34.76,0:01:42.08,Default,,0000,0000,0000,,지금까지 하진 않았지만\N'alt'태그를 추가해줘야해요
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,이제 우리가 만든\N태그에 'src'가 있고
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,"Photo of cute cat"\N이라는 'alt'도 있어요
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,좋아요 이게 지금까지\N자바스크립트로 만든 거에요
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,우리가 만든 ''태그는\N아직 어딘가 돌아다니고 있어요
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,왜냐하면 브라우저에게 이걸\N어디 놓을지 지정하지 않았으니까요
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,그리고 DOM에는 이걸\N넣을 수 있는 곳들이 아주 많아요
Dialogue: 0,0:02:15.83,0:02:18.34,Default,,0000,0000,0000,,가장 쉬운\N방법으로 해보죠
Dialogue: 0,0:02:18.34,0:02:21.34,Default,,0000,0000,0000,,페이지 하단에\N보이게 하는거에요
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,이건 태그의\N뒤에 붙여주면 될거에요
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,그러니까\N'document.body.appendChild(catEl);'
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,하하\N저기 있네요!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,게다가\N꽤 크기까지 해요
Dialogue: 0,0:02:32.71,0:02:34.98,Default,,0000,0000,0000,,정말 큰 고양이네요\N무서워라
Dialogue: 0,0:02:34.98,0:02:41.20,Default,,0000,0000,0000,,여러분은 'appendChild'를\N아무 DOM에다가 붙일 수 있어요
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,그럼 그 DOM의\N마지막에 이 요소를 붙일 거에요
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,이걸 보면 DOM을\N트리 형태로 생각할 수 있어요
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,태그가\N트리의 노드이고
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,거기에 여러 자식 노드가 있어요\N이나 처럼요
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,여러분은 이 자식 노드 다음에\N다른 자식 노드를 더하는 거에요
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,그러니까 그건 여기있는\N태그 다음에 올 거에요
Dialogue: 0,0:03:09.07,0:03:11.95,Default,,0000,0000,0000,,DOM방식을 사용하면\N이론적으로는
Dialogue: 0,0:03:11.95,0:03:15.53,Default,,0000,0000,0000,,DOM트리 안의 어디든\N요소들을 붙일 수 있어요
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,우리는 가장 쉽고\N가장 뻔한 곳에 넣었어요
Dialogue: 0,0:03:19.45,0:03:22.02,Default,,0000,0000,0000,,좋아요\N하나 더 해봐요
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,여기에는 'innerHTML'을 써서\N안에 태그를 썼어요
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,대신에\N'createElement'를 쓸 수 있어요
Dialogue: 0,0:03:31.44,0:03:39.62,Default,,0000,0000,0000,,그러니까 'var strongEl =\Ndocument.createElement("strong");'
Dialogue: 0,0:03:39.62,0:03:43.82,Default,,0000,0000,0000,,철자가 틀렸는데\N철자는 매우 중요해요
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,비어있는 태그를\N어딘가 떠다니게 만들었어요
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,첫번째로 할 것은\N텍스트를 지정하는 거에요
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,그러니까\N'strongEl.textContent = "cat";'
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,그렇죠?
Dialogue: 0,0:03:57.75,0:04:01.82,Default,,0000,0000,0000,,대신에 우리는\N다른 걸로도 할 수 있어요
Dialogue: 0,0:04:01.82,0:04:04.58,Default,,0000,0000,0000,,'textNode'라는 걸\N만들어서 말이죠
Dialogue: 0,0:04:04.58,0:04:08.50,Default,,0000,0000,0000,,DOM트리의 여러 DOM노드는\N특별한 노드를 가질 수 있어요
Dialogue: 0,0:04:08.50,0:04:10.73,Default,,0000,0000,0000,,'textNode'를\N그들의 자식으로 말이죠
Dialogue: 0,0:04:10.73,0:04:14.100,Default,,0000,0000,0000,,이 노드들은 요소는 아니지만\NDOM트리의 노드에요
Dialogue: 0,0:04:14.100,0:04:16.50,Default,,0000,0000,0000,,이걸 '잎 노드'라고\N불러요
Dialogue: 0,0:04:16.50,0:04:20.09,Default,,0000,0000,0000,,왜냐하면 트리의\N마지막에 오는 노드니까요
Dialogue: 0,0:04:20.09,0:04:27.55,Default,,0000,0000,0000,,그러니까 'var stongText =\Ndocument.createTextNode('
Dialogue: 0,0:04:27.55,0:04:31.82,Default,,0000,0000,0000,,여기다 텍스트를 넣을게요\N"cat"
Dialogue: 0,0:04:31.82,0:04:33.74,Default,,0000,0000,0000,,이 방법을\N쓰게 된다면
Dialogue: 0,0:04:33.74,0:04:39.75,Default,,0000,0000,0000,,이제 돌아다니는\N두 개의 노드를 만든 거에요
Dialogue: 0,0:04:39.75,0:04:41.94,Default,,0000,0000,0000,, 태그와\N
Dialogue: 0,0:04:41.94,0:04:46.86,Default,,0000,0000,0000,,"cat"을 담은\N'textNode'죠
Dialogue: 0,0:04:46.86,0:04:50.11,Default,,0000,0000,0000,,이걸 서로\N연결시켜줘야 해요
Dialogue: 0,0:04:50.11,0:04:55.10,Default,,0000,0000,0000,,이\N"cat"의 부모가 돼야해요
Dialogue: 0,0:04:55.10,0:05:01.50,Default,,0000,0000,0000,,그러면 이렇게\N'strongEl.appendChild(strongText);'
Dialogue: 0,0:05:03.39,0:05:10.44,Default,,0000,0000,0000,,좋아요 이제\N안에 "cat"이 있어요
Dialogue: 0,0:05:12.51,0:05:17.85,Default,,0000,0000,0000,,이걸 원하는 곳에 넣어야해요\N아직 떠다니고 있으니까요
Dialogue: 0,0:05:17.85,0:05:22.29,Default,,0000,0000,0000,,우리는 'nameEls'의\N'for'문안에 있고
Dialogue: 0,0:05:23.19,0:05:27.07,Default,,0000,0000,0000,,각 'nameEl'에다가\N태그를 붙이고 싶어요
Dialogue: 0,0:05:27.07,0:05:34.56,Default,,0000,0000,0000,,그럼 여기\N'nameEls[i].appendChild(strongEl);'
Dialogue: 0,0:05:36.22,0:05:42.74,Default,,0000,0000,0000,,이제 두 개를 볼 수 있네요\N저번 것이 아직 있기 때문이죠
Dialogue: 0,0:05:42.74,0:05:47.41,Default,,0000,0000,0000,,그러니까 태그에\N이 있는데 또 붙어있어요
Dialogue: 0,0:05:47.41,0:05:52.50,Default,,0000,0000,0000,,이 부분은 'innerHTML'에\N빈 문자열을 넣으면 돼요
Dialogue: 0,0:05:52.50,0:05:56.32,Default,,0000,0000,0000,,이게 붙은 안을\N지워줄거에요
Dialogue: 0,0:05:57.94,0:06:03.46,Default,,0000,0000,0000,,지금 봤듯이 이건 'innerHTML'보다\N훨씬 더 많은 코드를 써야해요
Dialogue: 0,0:06:05.10,0:06:07.40,Default,,0000,0000,0000,,그러면\N왜 이렇게 하는 걸까요?
Dialogue: 0,0:06:07.40,0:06:10.78,Default,,0000,0000,0000,,많은 개발자들은 이런 방식으로\N수정하는 걸 좋아하지 않아요
Dialogue: 0,0:06:10.78,0:06:13.79,Default,,0000,0000,0000,,왜냐하면 코드를\N더 많이 써야하니까요
Dialogue: 0,0:06:13.79,0:06:17.03,Default,,0000,0000,0000,,보통 개발자들은\NjQuery같은 라이브러리를 써요
Dialogue: 0,0:06:17.03,0:06:19.66,Default,,0000,0000,0000,,그들이 DOM을\N수정할 때요
Dialogue: 0,0:06:19.66,0:06:26.80,Default,,0000,0000,0000,,개발자로서는 코드를 덜 쓰고도\N같은 기능을 만들 수 있게 돼요
Dialogue: 0,0:06:26.80,0:06:29.78,Default,,0000,0000,0000,,왜냐하면 대신에\N라이브러리 함수를 쓰니까요
Dialogue: 0,0:06:29.78,0:06:32.45,Default,,0000,0000,0000,,저는 이런 식으로\N코드를 쓰는 걸 좋아해요
Dialogue: 0,0:06:32.45,0:06:36.23,Default,,0000,0000,0000,,어떻게 DOM트리를\N수정하는지 볼 수 있으니까요
Dialogue: 0,0:06:36.23,0:06:38.28,Default,,0000,0000,0000,,한번에\N하나씩 말이죠
Dialogue: 0,0:06:38.28,0:06:39.91,Default,,0000,0000,0000,,그리고\N더 깔끔해 보여요
Dialogue: 0,0:06:39.91,0:06:43.04,Default,,0000,0000,0000,,innerHTML안에 문자열로\N다 집어넣는 것보다 말이죠
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,하지만 여러분은\N싫어할 수도 있어요
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,어떤 방법으로든 이제 여러분은\N이런 게 있다는 걸 알아요
Dialogue: 0,0:06:47.19,0:06:49.53,Default,,0000,0000,0000,,만약 여러분이 필요하다면\N사용할 수 있고
Dialogue: 0,0:06:49.53,0:06:54.66,Default,,0000,0000,0000,,jQuery같은 라이브러리가\N뒤에서 뭘 하는지 알 수 있어요