[HTML] HTML, DOM이란? (Hypertext Markup Language, DOM)

1. HTML이란?

HTML (Hypertext Markup Language)

HTML은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다.

HTML으로 웹 페이지의 틀을 잡는다고 생각하면 됩니다.

- Hypertext 하이퍼텍스트

하이퍼텍스트는 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다.

- Markup Language

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 요소를 사용하고, 요소들은 "태그"를 통해 문서의 다른 텍스트와 구분합니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다.

HTML

 

2. DOM이란?

DOM (Document Object Model)

 

DOM은 HTML, XML 문서의 프로그래밍 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 즉, 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

DOM 계층 구조

 

DOM의 목적

1. 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용

2. 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용

 

DOM이 원본 HTML 문서 형태와 다른점

- 항상 유효한 HTML 형식

- 자바스크립트에 수정될 수 있는 동적 모델이어야 함

- 가상 요소를 포함하지 않음 (Ex. ::after)

- 보이지 않는 요소를 포함함 (Ex. display: none)