웹 개발을 시작하면 DOM, Element, Tag라는 용어를 자주 접하게 된다.
HTML을 작성하고 JavaScript로 웹 페이지를 조작하기 위해서는 이 세 가지 개념의 차이를 이해하는 것이 중요하다.
이번 글에서는 DOM, Element, Tag가 각각 무엇을 의미하는지 정리해 보았다.
1. DOM이란?
DOM은 Document Object Model의 약자로, HTML 문서를 객체로 표현하는 모델이다.
브라우저가 HTML 문서를 읽으면 HTML의 구조를 하나의 객체 구조로 만들게 되는데, 이를 DOM이라고 한다.
DOM은 HTML 문서를 트리(Tree) 구조로 표현한다.
예를 들어 다음과 같은 HTML이 있다고 하자.
<html>
<body>
<div>
<p>Hello</p>
<a href="https://www.naver.com">네이버</a>
</div>
</body>
</html>DOM에서는 다음과 같이 부모와 자식 관계를 가지는 트리 구조로 표현된다.
html
└── body
└── div
├── p
│ └── "Hello"
└── a
└── "네이버"
이러한 구조를 이용하면 JavaScript를 통해 웹 페이지의 구조나 내용을 동적으로 변경할 수 있다.
예를 들어 특정 HTML 요소의 내용을 변경하거나, 새로운 요소를 추가하거나, 요소를 삭제하는 등의 작업이 가능하다.
즉, DOM은 HTML 문서를 JavaScript에서 다룰 수 있도록 객체 형태의 구조로 표현한 것이라고 이해할 수 있다.
2. Element란?
Element는 HTML 문서를 구성하는 하나의 요소를 의미한다.
예를 들어 다음과 같은 HTML이 있다.
<div>안녕하세요.</div>
<p>반갑습니다.</p>
<span>환영합니다.</span>
여기서 각각의 <div>, <p>, <span>으로 만들어진 요소가 Element이다.
<div>안녕하세요.</div>
위 코드 전체가 하나의 HTML Element라고 볼 수 있다.
Element는 DOM을 구성하는 중요한 요소이기도 하다.
앞에서 살펴본 DOM 트리에서도 각각의 HTML Element가 부모와 자식 관계를 이루며 트리를 구성한다.
3. Tag란?
Tag는 HTML에서 Element의 구조와 의미를 정의하기 위해 사용하는 마크업 문법이다.
예를 들어 다음과 같은 Element가 있다.
<div>안녕하세요.</div>
여기서
<div>
는 시작 Tag이고,
</div>
는 종료 Tag이다.
Tag는 Element를 만드는 데 사용된다.
따라서 Tag와 Element는 같은 의미가 아니다.
- Tag: HTML에서 요소를 정의하기 위해 사용하는 문법
- Element: Tag와 내용을 포함하여 만들어진 HTML 요소
4. 자주 사용하는 HTML Tag
HTML에는 다양한 목적을 가진 Element가 존재한다.
<div>
<div>는 특별한 의미를 가지지 않는 일반적인 컨테이너이다.
<div>
내용
</div>
여러 HTML 요소를 하나로 묶거나 CSS를 적용할 때 자주 사용한다.
<a>
<a>는 다른 페이지나 특정 위치로 이동하는 링크이다.
<a href="https://www.naver.com">네이버</a>여기서 href는 링크를 클릭했을 때 이동할 목적지를 지정하는 속성이다.
href="https://www.naver.com"
따라서 위 코드는 사용자가 "네이버"라는 링크를 클릭하면 지정한 주소로 이동하도록 만든다.
5. 속성(Attribute)이란?
HTML Tag에는 추가적인 정보를 전달하기 위해 속성(Attribute)을 사용할 수 있다.
<a>의 href가 이에 해당한다.
<a href="https://www.naver.com">네이버</a>또한 HTML에서는 다음과 같이 다양한 속성을 사용할 수 있다.
<div class="container">
내용
</div>
여기서 class="container"가 <div>에 추가된 속성이다.
속성을 이용하면 추가적인 정보를 전달하거나 CSS, JavaScript에서 특정 Element를 선택하는 데 활용할 수 있다.
'Frontend > React' 카테고리의 다른 글
| [React] 이벤트와 State (0) | 2026.08.11 |
|---|---|
| [React] JSX 기본 문법 (0) | 2026.08.11 |
| [React] Props와 구조 분해 할당으로 컴포넌트 재사용하기 (0) | 2026.08.11 |
| [React] Tailwind CSS로 React 스타일링하기 (0) | 2026.08.11 |
| React 컴포넌트와 JSX 기본 문법 이해하기 (0) | 2026.08.11 |
댓글