The Document Object Model (DOM)

  • HTML5 기본은 “새로운 특징들은 HTML, CSS, DOM, JavaScript 베이스가 되어야 한다”
  • DOM은 모든 페이지를 팔로우할 수 있는 트리같은 구조를 제공
  • 컴퓨터 사이언티스트는 트리를 좋아한다. (유효한지 아닌지 증명 가능)

HTML은 DOM 에서 빌드된다.

adapted from w3schools.com

트리를 보면 HTML 만들 때 2가지 있다. (head, body)

잘 갖춰진 문서의 3가지

  • Doctype
    • 사용하는 HTML 버전
  • Head
    • Metadata
  • Body
    • 보여주는 콘텐츠

Doctype

  • HTML5
    • <!DOCTYPE html>
  • 이전 버전 호환성
    • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0|//EN”
      “http://www.w3.org/TR/html4/strict.dtd”>

Head

  • 브라우저가 사용하는 추가적인 정보
    • Metadata – 언어(페이지가 어떤 언어로 작성), 제목(페이지의 제목)
    • 지원하는 파일들 – JavaScript, Styling, Add-ons
  • title, meta-data 이외에 것은 디스플레이 안됨

Body

  • 페이지의 대부분을 차지
  • 코드를 트리처럼 잘 구성해서 작성하는 게 중요
  • 대부분의 콘텐츠는 브라우저가 디스플레이한다.

HTML 코드 확인하기

https://validator.w3.org/

Review

  • 잘 갖춰진 페이지는 DOM 구조를 사용한다.
    • 시작, 끝 tags 사용
    • 바깥 태그가 닫기 전에 안쪽 태그부터 닫음
    • 유효한 속성을 사용
  • 브라우저는 나쁜 코드를 고친다. validator 를 사용해서 코드 확인하자

공부 위치 – https://www.coursera.org/learn/html/lecture/BCsCq/02-01-the-document-object-model-dom