DOM & CSSOM - 프론트엔드 개발자 필수지식

#DOM #coding #programming

이번 영상에서는 웹 페이지의 작동 방식과 프론트엔드 개발의 핵심 요소인 DOM(Document Object Model)과 CSSOM(CSS Object Model)에 대해 다룹니다. DOM은 HTML 문서를 읽는 브라우저가 HTML의 구조와 내용을 확인하고 해당 구조에 맞는 '객체'를 만들어 내는 것이며, 이 과정을 '파싱'이라 합니다. 모든 HTML 태그, 태그의 속성, 태그 내부의 텍스트 등은 모두 DOM 내부에서 노드로서 자리를 차지하게 됩니다. 이렇게 만들어진 DOM은 마치 나무와 같은 트리 구조를 형성하게 됩니다. 또한, CSSOM은 CSS로부터 생성되며, DOM과 함께 브라우저가 Web 페이지의 구조를 이해하고 렌더링하는데 사용됩니다. 가장 중요한 점은, 웹페이지가 한 번 로드된 이후 자바스크립트를 사용해서 동적으로 변화를 가하는 것이 DOM을 통해 이루어진다는 것입니다. CSSOM도 자바스크립트를 통해 CSS rule들을 변경하는 기능이 제공되지만, 보통은 DOM을 통해 스타일을 변경하는 것이 일반적입니다. 결국, DOM과 CSSOM은 웹페이지가 단순히 HTML 설계도 위에 디자인된 모습을 화면에 투영하는 것에 그치지 않고, 웹페이지가 다양한 방식으로 조작될 수 있도록 해주는 중요한 요소입니다.

= = =

🏠 얄코사이트: https://www.yalco.kr
📖 얄코 도서: https://www.yalco.kr/book/
🧑‍🏫 얄코 강의: https://www.yalco.kr/#lectures

🎥 제대로 파는 Git & GitHub:    • 제대로 파는 Git & GitHub (대학생 전체강의 반값할인)  
🎥 제대로 파는 자바:    • 제대로 파는 자바 - Java 끝장내기  
🎥 제대로 파는 파이썬:    • 제대로 파는 파이썬 - Python 끝장내기  
🎥 제대로 파는 자바스크립트:    • (구판) 제대로 파는 자바스크립트 - 고정댓글에 새 버전 링크  
🎥 제대로 파는 HTML & CSS:    • 제대로 파는 HTML & CSS  
🎥 갖고 노는 MySQL 강좌:    • 왕초보용! 갖고 노는 MySQL 데이터베이스 강좌  
🎥 반응형 프로그래밍 RxJS 강좌:    • 반응형 프로그래밍이 뭔가요? (+ ReactiveX 강좌)