웹이란
웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.
웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다.
웹 사이트의 구성
HTML (Hyper Text Markup Language)
브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 한다.
CSS (Cascading Style Sheet)
웹 페이지의 요소들을 꾸며주는 역할을 한다.
JavaSCript
웹 페이지의 요소들을 생성, 삭제, 변형하는 역할을 한다.
그렇다면, 자바스크립트는 어떻게 HTML로 작성된 웹 요소에 접근해 웹 페이지를 동적으로 만들고 변형시킬 수 있는 것일까? 그에대한 대답은 바로 DOM에 있다.
DOM이란
DOM(Document Object Model)은 문서 객체 모델로, HTML을 자바스크립트가 이해하고 조작할 수 있게 브라우저가 객체로 변환한 것이다.
<body>
<div class="today-info">
<div class="date" id="date">
02.10.수요일
</div>
<div class="date" id="clock">
21:36
</div>
</div>
</body>위 HTML은 브라우저에 의해 다음과 같은 DOM Tree 구조로 변환된다.
DOM Tree에서는 각각의 아이템을 노드(Node)라고 부르며, 이 노드들을 전부 하나의 객체로 이루어져 있다.
예를 들어, <div> 태그는 요소 노드, "02.10.금요일"은 텍스트 노드, class와 id는 속성 노드가 된다.
'TIL' 카테고리의 다른 글
| [TS] 타입 좁히기 (0) | 2025.10.31 |
|---|---|
| [TS] 타입 단언 (0) | 2025.10.31 |
| spread와 rest (0) | 2025.10.31 |
| 구조 분해 할당 (0) | 2025.10.31 |
| [TS] 타입 추론 및 타입 정의 연습 (0) | 2025.10.31 |