1
00:00:00,720 --> 00:00:04,510
앞으로 여러분은 제게서
어떤 줄임말을 많이 듣게될 거에요

2
00:00:05,170 --> 00:00:06,590
바로
'DOM'이에요

3
00:00:06,590 --> 00:00:08,918
돔 도돔돔돔~

4
00:00:09,978 --> 00:00:15,502
DOM은
Document Object Model을 뜻해요

5
00:00:15,502 --> 00:00:18,277
이걸로 브라우저가
개발자들에게

6
00:00:18,277 --> 00:00:21,467
자바스크립트를 이용해
웹을 수정할 수 있게 해줘요

7
00:00:21,467 --> 00:00:23,726
브라우저가
웹페이지를 로드할 때

8
00:00:23,726 --> 00:00:26,726
HTML과 CSS를
분석해서

9
00:00:26,726 --> 00:00:29,566
내용을 DOM형태로
만들어줘요

10
00:00:30,236 --> 00:00:33,538
DOM은 아주 커다란
자바스크립트 객체에요

11
00:00:33,538 --> 00:00:37,739
페이지에 대해 알고 싶거나
바꾸고 싶은 모든 부분을 갖고 있죠

12
00:00:37,739 --> 00:00:42,561
각각의 태그들이나
태그의 속성과 스타일 같은 걸요

13
00:00:43,201 --> 00:00:46,980
웹에서 자바스크립트를 통해
DOM에 접근하려면

14
00:00:46,980 --> 00:00:49,913
전역변수인 'document'를
이용해야 해요

15
00:00:49,913 --> 00:00:56,163
이 객체에 대한 속성이나
함수들을 사용할 수 있어요

16
00:00:57,533 --> 00:01:03,910
DOM 편집의 기본 방법은
두 단계로 되어있어요

17
00:01:03,910 --> 00:01:07,956
여기 목록을
작성해 볼게요

18
00:01:09,286 --> 00:01:13,489
시작해볼까요
여기 두 단계가 있어요

19
00:01:14,619 --> 00:01:16,809
각각의 단계를
알아보기로 해요

20
00:01:17,279 --> 00:01:22,923
첫번째 단계는 접근을 통해
DOM 노드를 찾는 거에요

21
00:01:23,283 --> 00:01:28,633
만약 태그를 찾는다면
정말 쉽게 접근할 수 있어요

22
00:01:28,633 --> 00:01:32,439
'document.body'라고
쓰면 돼요

23
00:01:33,449 --> 00:01:39,114
두번째 단계는 찾은
DOM노드를 편집하는 거에요

24
00:01:39,114 --> 00:01:43,030
속성이나 스타일
innerHTML등을 바꾸는 걸로요

25
00:01:43,030 --> 00:01:44,596
옆에 새로운
노드를 추가해서요

26
00:01:45,596 --> 00:01:49,914
만약 이 태그 전체의 내용을
대체하고 싶다면

27
00:01:49,914 --> 00:01:53,175
'innerHTML'속성을
사용하면 돼요

28
00:01:53,175 --> 00:01:58,628
'document.body.innerHTML= 
"Webpage be gone!";'

29
00:01:58,628 --> 00:02:00,843
짜잔!
해냈어요

30
00:02:02,073 --> 00:02:05,998
브라우저는 이 객체의
변화를 지켜보고 있어요

31
00:02:05,998 --> 00:02:09,884
'document.body'의
innerHTML을 수정하자마자

32
00:02:09,884 --> 00:02:12,744
실제 문서 페이지에
반영해줘요

33
00:02:13,244 --> 00:02:14,094
기억해요

34
00:02:14,094 --> 00:02:17,220
'document'객체는
실제 웹페이지가 아니지만

35
00:02:17,220 --> 00:02:22,518
브라우저는 현재 페이지를
가능한 많이 반영하려고 해요

36
00:02:23,988 --> 00:02:28,309
첫번째 단계를 할 수 있는
많은 방법들이 있어요

37
00:02:28,319 --> 00:02:32,809
왜냐하면 보통은 태그
보다는 다른 걸 찾고싶으니까요

38
00:02:32,809 --> 00:02:35,204
특정 id를 가지는 태그를
찾고 싶을 수도 있고

39
00:02:35,204 --> 00:02:36,994
특정 종류의 모든 태그를
찾고 싶을 수도 있어요

40
00:02:36,994 --> 00:02:40,583
이 부분은 DOM 접근 방법
강의에서 얘기할 거에요

41
00:02:41,453 --> 00:02:45,302
두번째 단계에서도
더 멋진 것들이 있어요

42
00:02:45,302 --> 00:02:48,760
여러분이 찾은 태그의 속성이나
스타일을 바꾸는 것처럼요

43
00:02:48,760 --> 00:02:51,615
이 부분은 DOM 편집 방법
강의에서 얘기할 거에요

44
00:02:52,525 --> 00:02:56,161
DOM의 접근과 편집을
배우고 나면

45
00:02:56,161 --> 00:02:59,071
재미있게 쓸 수있는
방법을 배울거에요

46
00:02:59,071 --> 00:03:02,071
사용자 이벤트에 반응하거나
움직임 효과를 만드는 것처럼요

47
00:03:02,931 --> 00:03:05,005
지금은 약간
바보같을 수도 있어요

48
00:03:05,005 --> 00:03:09,557
처음엔 자바스크립트로
HTML로도 할 수있는 걸 하니까요

49
00:03:09,557 --> 00:03:10,617
하지만
절 믿으세요

50
00:03:10,617 --> 00:03:14,453
DOM 접근과 편집을
배우고 싶을 거에요

51
00:03:14,453 --> 00:03:18,767
나중에는 완전히 인터랙티브한 웹을
만들 수 있을 거니까요

52
00:03:18,767 --> 00:03:21,663
그러니까 계속해요
곧 다시 만나요