[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.72,0:00:04.51,Default,,0000,0000,0000,,앞으로 여러분은 제게서\N어떤 줄임말을 많이 듣게될 거에요
Dialogue: 0,0:00:05.17,0:00:06.59,Default,,0000,0000,0000,,바로\N'DOM'이에요
Dialogue: 0,0:00:06.59,0:00:08.92,Default,,0000,0000,0000,,돔 도돔돔돔~
Dialogue: 0,0:00:09.98,0:00:15.50,Default,,0000,0000,0000,,DOM은\NDocument Object Model을 뜻해요
Dialogue: 0,0:00:15.50,0:00:18.28,Default,,0000,0000,0000,,이걸로 브라우저가\N개발자들에게
Dialogue: 0,0:00:18.28,0:00:21.47,Default,,0000,0000,0000,,자바스크립트를 이용해\N웹을 수정할 수 있게 해줘요
Dialogue: 0,0:00:21.47,0:00:23.73,Default,,0000,0000,0000,,브라우저가\N웹페이지를 로드할 때
Dialogue: 0,0:00:23.73,0:00:26.73,Default,,0000,0000,0000,,HTML과 CSS를\N분석해서
Dialogue: 0,0:00:26.73,0:00:29.57,Default,,0000,0000,0000,,내용을 DOM형태로\N만들어줘요
Dialogue: 0,0:00:30.24,0:00:33.54,Default,,0000,0000,0000,,DOM은 아주 커다란\N자바스크립트 객체에요
Dialogue: 0,0:00:33.54,0:00:37.74,Default,,0000,0000,0000,,페이지에 대해 알고 싶거나\N바꾸고 싶은 모든 부분을 갖고 있죠
Dialogue: 0,0:00:37.74,0:00:42.56,Default,,0000,0000,0000,,각각의 태그들이나\N태그의 속성과 스타일 같은 걸요
Dialogue: 0,0:00:43.20,0:00:46.98,Default,,0000,0000,0000,,웹에서 자바스크립트를 통해\NDOM에 접근하려면
Dialogue: 0,0:00:46.98,0:00:49.91,Default,,0000,0000,0000,,전역변수인 'document'를\N이용해야 해요
Dialogue: 0,0:00:49.91,0:00:56.16,Default,,0000,0000,0000,,이 객체에 대한 속성이나\N함수들을 사용할 수 있어요
Dialogue: 0,0:00:57.53,0:01:03.91,Default,,0000,0000,0000,,DOM 편집의 기본 방법은\N두 단계로 되어있어요
Dialogue: 0,0:01:03.91,0:01:07.96,Default,,0000,0000,0000,,여기 목록을\N작성해 볼게요
Dialogue: 0,0:01:09.29,0:01:13.49,Default,,0000,0000,0000,,시작해볼까요\N여기 두 단계가 있어요
Dialogue: 0,0:01:14.62,0:01:16.81,Default,,0000,0000,0000,,각각의 단계를\N알아보기로 해요
Dialogue: 0,0:01:17.28,0:01:22.92,Default,,0000,0000,0000,,첫번째 단계는 접근을 통해\NDOM 노드를 찾는 거에요
Dialogue: 0,0:01:23.28,0:01:28.63,Default,,0000,0000,0000,,만약 태그를 찾는다면\N정말 쉽게 접근할 수 있어요
Dialogue: 0,0:01:28.63,0:01:32.44,Default,,0000,0000,0000,,'document.body'라고\N쓰면 돼요
Dialogue: 0,0:01:33.45,0:01:39.11,Default,,0000,0000,0000,,두번째 단계는 찾은\NDOM노드를 편집하는 거에요
Dialogue: 0,0:01:39.11,0:01:43.03,Default,,0000,0000,0000,,속성이나 스타일\NinnerHTML등을 바꾸는 걸로요
Dialogue: 0,0:01:43.03,0:01:44.60,Default,,0000,0000,0000,,옆에 새로운\N노드를 추가해서요
Dialogue: 0,0:01:45.60,0:01:49.91,Default,,0000,0000,0000,,만약 이 태그 전체의 내용을\N대체하고 싶다면
Dialogue: 0,0:01:49.91,0:01:53.18,Default,,0000,0000,0000,,'innerHTML'속성을\N사용하면 돼요
Dialogue: 0,0:01:53.18,0:01:58.63,Default,,0000,0000,0000,,'document.body.innerHTML= \N"Webpage be gone!";'
Dialogue: 0,0:01:58.63,0:02:00.84,Default,,0000,0000,0000,,짜잔!\N해냈어요
Dialogue: 0,0:02:02.07,0:02:05.100,Default,,0000,0000,0000,,브라우저는 이 객체의\N변화를 지켜보고 있어요
Dialogue: 0,0:02:05.100,0:02:09.88,Default,,0000,0000,0000,,'document.body'의\NinnerHTML을 수정하자마자
Dialogue: 0,0:02:09.88,0:02:12.74,Default,,0000,0000,0000,,실제 문서 페이지에\N반영해줘요
Dialogue: 0,0:02:13.24,0:02:14.09,Default,,0000,0000,0000,,기억해요
Dialogue: 0,0:02:14.09,0:02:17.22,Default,,0000,0000,0000,,'document'객체는\N실제 웹페이지가 아니지만
Dialogue: 0,0:02:17.22,0:02:22.52,Default,,0000,0000,0000,,브라우저는 현재 페이지를\N가능한 많이 반영하려고 해요
Dialogue: 0,0:02:23.99,0:02:28.31,Default,,0000,0000,0000,,첫번째 단계를 할 수 있는\N많은 방법들이 있어요
Dialogue: 0,0:02:28.32,0:02:32.81,Default,,0000,0000,0000,,왜냐하면 보통은 태그\N보다는 다른 걸 찾고싶으니까요
Dialogue: 0,0:02:32.81,0:02:35.20,Default,,0000,0000,0000,,특정 id를 가지는 태그를\N찾고 싶을 수도 있고
Dialogue: 0,0:02:35.20,0:02:36.99,Default,,0000,0000,0000,,특정 종류의 모든 태그를\N찾고 싶을 수도 있어요
Dialogue: 0,0:02:36.99,0:02:40.58,Default,,0000,0000,0000,,이 부분은 DOM 접근 방법\N강의에서 얘기할 거에요
Dialogue: 0,0:02:41.45,0:02:45.30,Default,,0000,0000,0000,,두번째 단계에서도\N더 멋진 것들이 있어요
Dialogue: 0,0:02:45.30,0:02:48.76,Default,,0000,0000,0000,,여러분이 찾은 태그의 속성이나\N스타일을 바꾸는 것처럼요
Dialogue: 0,0:02:48.76,0:02:51.62,Default,,0000,0000,0000,,이 부분은 DOM 편집 방법\N강의에서 얘기할 거에요
Dialogue: 0,0:02:52.52,0:02:56.16,Default,,0000,0000,0000,,DOM의 접근과 편집을\N배우고 나면
Dialogue: 0,0:02:56.16,0:02:59.07,Default,,0000,0000,0000,,재미있게 쓸 수있는\N방법을 배울거에요
Dialogue: 0,0:02:59.07,0:03:02.07,Default,,0000,0000,0000,,사용자 이벤트에 반응하거나\N움직임 효과를 만드는 것처럼요
Dialogue: 0,0:03:02.93,0:03:05.00,Default,,0000,0000,0000,,지금은 약간\N바보같을 수도 있어요
Dialogue: 0,0:03:05.00,0:03:09.56,Default,,0000,0000,0000,,처음엔 자바스크립트로\NHTML로도 할 수있는 걸 하니까요
Dialogue: 0,0:03:09.56,0:03:10.62,Default,,0000,0000,0000,,하지만\N절 믿으세요
Dialogue: 0,0:03:10.62,0:03:14.45,Default,,0000,0000,0000,,DOM 접근과 편집을\N배우고 싶을 거에요
Dialogue: 0,0:03:14.45,0:03:18.77,Default,,0000,0000,0000,,나중에는 완전히 인터랙티브한 웹을\N만들 수 있을 거니까요
Dialogue: 0,0:03:18.77,0:03:21.66,Default,,0000,0000,0000,,그러니까 계속해요\N곧 다시 만나요