0:00:00.720,0:00:04.510
앞으로 여러분은 제게서[br]어떤 줄임말을 많이 듣게될 거에요

0:00:05.170,0:00:06.590
바로[br]'DOM'이에요

0:00:06.590,0:00:08.918
돔 도돔돔돔~

0:00:09.978,0:00:15.502
DOM은[br]Document Object Model을 뜻해요

0:00:15.502,0:00:18.277
이걸로 브라우저가[br]개발자들에게

0:00:18.277,0:00:21.467
자바스크립트를 이용해[br]웹을 수정할 수 있게 해줘요

0:00:21.467,0:00:23.726
브라우저가[br]웹페이지를 로드할 때

0:00:23.726,0:00:26.726
HTML과 CSS를[br]분석해서

0:00:26.726,0:00:29.566
내용을 DOM형태로[br]만들어줘요

0:00:30.236,0:00:33.538
DOM은 아주 커다란[br]자바스크립트 객체에요

0:00:33.538,0:00:37.739
페이지에 대해 알고 싶거나[br]바꾸고 싶은 모든 부분을 갖고 있죠

0:00:37.739,0:00:42.561
각각의 태그들이나[br]태그의 속성과 스타일 같은 걸요

0:00:43.201,0:00:46.980
웹에서 자바스크립트를 통해[br]DOM에 접근하려면

0:00:46.980,0:00:49.913
전역변수인 'document'를[br]이용해야 해요

0:00:49.913,0:00:56.163
이 객체에 대한 속성이나[br]함수들을 사용할 수 있어요

0:00:57.533,0:01:03.910
DOM 편집의 기본 방법은[br]두 단계로 되어있어요

0:01:03.910,0:01:07.956
여기 목록을[br]작성해 볼게요

0:01:09.286,0:01:13.489
시작해볼까요[br]여기 두 단계가 있어요

0:01:14.619,0:01:16.809
각각의 단계를[br]알아보기로 해요

0:01:17.279,0:01:22.923
첫번째 단계는 접근을 통해[br]DOM 노드를 찾는 거에요

0:01:23.283,0:01:28.633
만약 태그를 찾는다면[br]정말 쉽게 접근할 수 있어요

0:01:28.633,0:01:32.439
'document.body'라고[br]쓰면 돼요

0:01:33.449,0:01:39.114
두번째 단계는 찾은[br]DOM노드를 편집하는 거에요

0:01:39.114,0:01:43.030
속성이나 스타일[br]innerHTML등을 바꾸는 걸로요

0:01:43.030,0:01:44.596
옆에 새로운[br]노드를 추가해서요

0:01:45.596,0:01:49.914
만약 이 태그 전체의 내용을[br]대체하고 싶다면

0:01:49.914,0:01:53.175
'innerHTML'속성을[br]사용하면 돼요

0:01:53.175,0:01:58.628
'document.body.innerHTML= [br]"Webpage be gone!";'

0:01:58.628,0:02:00.843
짜잔![br]해냈어요

0:02:02.073,0:02:05.998
브라우저는 이 객체의[br]변화를 지켜보고 있어요

0:02:05.998,0:02:09.884
'document.body'의[br]innerHTML을 수정하자마자

0:02:09.884,0:02:12.744
실제 문서 페이지에[br]반영해줘요

0:02:13.244,0:02:14.094
기억해요

0:02:14.094,0:02:17.220
'document'객체는[br]실제 웹페이지가 아니지만

0:02:17.220,0:02:22.518
브라우저는 현재 페이지를[br]가능한 많이 반영하려고 해요

0:02:23.988,0:02:28.309
첫번째 단계를 할 수 있는[br]많은 방법들이 있어요

0:02:28.319,0:02:32.809
왜냐하면 보통은 태그[br]보다는 다른 걸 찾고싶으니까요

0:02:32.809,0:02:35.204
특정 id를 가지는 태그를[br]찾고 싶을 수도 있고

0:02:35.204,0:02:36.994
특정 종류의 모든 태그를[br]찾고 싶을 수도 있어요

0:02:36.994,0:02:40.583
이 부분은 DOM 접근 방법[br]강의에서 얘기할 거에요

0:02:41.453,0:02:45.302
두번째 단계에서도[br]더 멋진 것들이 있어요

0:02:45.302,0:02:48.760
여러분이 찾은 태그의 속성이나[br]스타일을 바꾸는 것처럼요

0:02:48.760,0:02:51.615
이 부분은 DOM 편집 방법[br]강의에서 얘기할 거에요

0:02:52.525,0:02:56.161
DOM의 접근과 편집을[br]배우고 나면

0:02:56.161,0:02:59.071
재미있게 쓸 수있는[br]방법을 배울거에요

0:02:59.071,0:03:02.071
사용자 이벤트에 반응하거나[br]움직임 효과를 만드는 것처럼요

0:03:02.931,0:03:05.005
지금은 약간[br]바보같을 수도 있어요

0:03:05.005,0:03:09.557
처음엔 자바스크립트로[br]HTML로도 할 수있는 걸 하니까요

0:03:09.557,0:03:10.617
하지만[br]절 믿으세요

0:03:10.617,0:03:14.453
DOM 접근과 편집을[br]배우고 싶을 거에요

0:03:14.453,0:03:18.767
나중에는 완전히 인터랙티브한 웹을[br]만들 수 있을 거니까요

0:03:18.767,0:03:21.663
그러니까 계속해요[br]곧 다시 만나요