< Return to Video

DOM(Document Object Model) 소개 (비디오 버전)

  • 0:01 - 0:05
    앞으로 여러분은 제게서
    어떤 줄임말을 많이 듣게될 거에요
  • 0:05 - 0:07
    바로
    'DOM'이에요
  • 0:07 - 0:09
    돔 도돔돔돔~
  • 0:10 - 0:16
    DOM은
    Document Object Model을 뜻해요
  • 0:16 - 0:18
    이걸로 브라우저가
    개발자들에게
  • 0:18 - 0:21
    자바스크립트를 이용해
    웹을 수정할 수 있게 해줘요
  • 0:21 - 0:24
    브라우저가
    웹페이지를 로드할 때
  • 0:24 - 0:27
    HTML과 CSS를
    분석해서
  • 0:27 - 0:30
    내용을 DOM형태로
    만들어줘요
  • 0:30 - 0:34
    DOM은 아주 커다란
    자바스크립트 객체에요
  • 0:34 - 0:38
    페이지에 대해 알고 싶거나
    바꾸고 싶은 모든 부분을 갖고 있죠
  • 0:38 - 0:43
    각각의 태그들이나
    태그의 속성과 스타일 같은 걸요
  • 0:43 - 0:47
    웹에서 자바스크립트를 통해
    DOM에 접근하려면
  • 0:47 - 0:50
    전역변수인 'document'를
    이용해야 해요
  • 0:50 - 0:56
    이 객체에 대한 속성이나
    함수들을 사용할 수 있어요
  • 0:58 - 1:04
    DOM 편집의 기본 방법은
    두 단계로 되어있어요
  • 1:04 - 1:08
    여기 목록을
    작성해 볼게요
  • 1:09 - 1:13
    시작해볼까요
    여기 두 단계가 있어요
  • 1:15 - 1:17
    각각의 단계를
    알아보기로 해요
  • 1:17 - 1:23
    첫번째 단계는 접근을 통해
    DOM 노드를 찾는 거에요
  • 1:23 - 1:29
    만약 태그를 찾는다면
    정말 쉽게 접근할 수 있어요
  • 1:29 - 1:32
    'document.body'라고
    쓰면 돼요
  • 1:33 - 1:39
    두번째 단계는 찾은
    DOM노드를 편집하는 거에요
  • 1:39 - 1:43
    속성이나 스타일
    innerHTML등을 바꾸는 걸로요
  • 1:43 - 1:45
    옆에 새로운
    노드를 추가해서요
  • 1:46 - 1:50
    만약 이 태그 전체의 내용을
    대체하고 싶다면
  • 1:50 - 1:53
    'innerHTML'속성을
    사용하면 돼요
  • 1:53 - 1:59
    'document.body.innerHTML=
    "Webpage be gone!";'
  • 1:59 - 2:01
    짜잔!
    해냈어요
  • 2:02 - 2:06
    브라우저는 이 객체의
    변화를 지켜보고 있어요
  • 2:06 - 2:10
    'document.body'의
    innerHTML을 수정하자마자
  • 2:10 - 2:13
    실제 문서 페이지에
    반영해줘요
  • 2:13 - 2:14
    기억해요
  • 2:14 - 2:17
    'document'객체는
    실제 웹페이지가 아니지만
  • 2:17 - 2:23
    브라우저는 현재 페이지를
    가능한 많이 반영하려고 해요
  • 2:24 - 2:28
    첫번째 단계를 할 수 있는
    많은 방법들이 있어요
  • 2:28 - 2:33
    왜냐하면 보통은 태그
    보다는 다른 걸 찾고싶으니까요
  • 2:33 - 2:35
    특정 id를 가지는 태그를
    찾고 싶을 수도 있고
  • 2:35 - 2:37
    특정 종류의 모든 태그를
    찾고 싶을 수도 있어요
  • 2:37 - 2:41
    이 부분은 DOM 접근 방법
    강의에서 얘기할 거에요
  • 2:41 - 2:45
    두번째 단계에서도
    더 멋진 것들이 있어요
  • 2:45 - 2:49
    여러분이 찾은 태그의 속성이나
    스타일을 바꾸는 것처럼요
  • 2:49 - 2:52
    이 부분은 DOM 편집 방법
    강의에서 얘기할 거에요
  • 2:53 - 2:56
    DOM의 접근과 편집을
    배우고 나면
  • 2:56 - 2:59
    재미있게 쓸 수있는
    방법을 배울거에요
  • 2:59 - 3:02
    사용자 이벤트에 반응하거나
    움직임 효과를 만드는 것처럼요
  • 3:03 - 3:05
    지금은 약간
    바보같을 수도 있어요
  • 3:05 - 3:10
    처음엔 자바스크립트로
    HTML로도 할 수있는 걸 하니까요
  • 3:10 - 3:11
    하지만
    절 믿으세요
  • 3:11 - 3:14
    DOM 접근과 편집을
    배우고 싶을 거에요
  • 3:14 - 3:19
    나중에는 완전히 인터랙티브한 웹을
    만들 수 있을 거니까요
  • 3:19 - 3:22
    그러니까 계속해요
    곧 다시 만나요
Title:
DOM(Document Object Model) 소개 (비디오 버전)
Description:

more » « less
Video Language:
English
Duration:
03:26

Korean subtitles

Incomplete

Revisions