웹페이지를 조작하는 DOM

1. 웹 이란?
웹 이란, 우리 모두가 알고있는 것처럼, 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부른다.
웹 사이트란, google.com 과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있다.
웹 사이트들은 보통 HTML, CSS, 자바스크립트로 이루어져 있다.

1) HTML과 CSS
HTML은 Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 하고, CSS는 Cascading Style Sheets의 약자로, 말 그대로 웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet 이다.
네이버 메인 페이지를 예시로 보면, 초록색, 이미지, 아이콘, 폰트 등은 CSS를 통해 설정 가능하고, 검색창, 글자, 로그인 버튼 등의 요소들은 HTML을 통해 생성 가능하며, 로그인 버튼 클릭, 검색하기, 다른 페이지로 이동하기 등의 동적인 기능들은 자바스크립트로 개발 가능하다.
정리하면, HTML 은 웹 요소들을 구성하고, CSS 는 웹 요소들을 꾸며주고, Javascript는 웹 요소들을 생성, 삭제, 변형 한다.


2. DOM 이란?
DOM이란 Document Object Model 문서 객체 모델로, HTML로 작성된 여러 요소들에 자바스크립트가 접근할 수 있도록 브라우저가 변환시킨 객체이다. 웹 브라우저는 이 HTML 문서를 불러 온 다음 이를 상하 관계를 한 눈에 볼 수 있는 트리 구조로 나타내는데, 이를 DOM Tree라고 부른다. DOM Tree에서 아이템 하나 하나를 노드(Node)라고 부르며, 이 노드들은 전부 하나의 객체로 이루어져 있고, 웹 브라우저는 이 DOM Tree를 통해 웹 요소들을 웹 페이지에 나타낼 수 있다.
이러한 DOM은 자바스크립트가 자신에게 접근해 DOM을 조작하고 수정할 수 있는 방법을 제공하는데, 이 방법을 DOM API 라고 부르며, 자바스크립트는 DOM이 제공하는 DOM API를 통해 웹 요소들을 수정하고 조작할 수 있다.


참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의