본문 바로가기

HTML2

[15일차] DOM(Document Object Model) 이해하기 목차DOM이란 무엇인가?DOM의 구조 이해하기DOM과 JavaScript의 관계DOM 조작의 기본실습: 간단한 DOM 구조 이해연습문제1. DOM이란 무엇인가?DOM은 HTML이나 XML 문서를 프로그래밍적으로 조작할 수 있는 객체 모델입니다.웹 브라우저는 HTML 코드를 읽어 DOM 트리라는 구조를 생성하며, 이를 통해 JavaScript가 문서의 내용, 구조, 스타일을 변경할 수 있습니다.DOM의 주요 특징:트리 구조: DOM은 HTML 요소를 트리 형태로 나타냅니다.동적 조작 가능: JavaScript로 DOM을 변경, 추가, 삭제할 수 있습니다.2. DOM의 구조 이해하기DOM은 계층 구조를 가지며, 각각의 HTML 요소는 DOM 트리의 노드(Node)로 표현됩니다.예제 HTML 코드: .. 2024. 11. 21.
[2일차] JavaScript 개발 환경 설정과 간단한 코드 작성 목차:JavaScript 코딩 환경 소개브라우저 콘솔에서 코드 실행하기코드 에디터 설치 및 사용법 (VS Code 추천)HTML 파일에서 JavaScript 연결하기간단한 JavaScript 코드 실행다음 수업을 위한 준비 1. JavaScript 코딩 환경 소개JavaScript는 특별한 프로그램 없이도 웹 브라우저와 간단한 코드 편집기만 있으면 코딩을 시작할 수 있습니다. 이 장점 덕분에 JavaScript는 배우기 쉬운 언어 중 하나로 꼽힙니다. 오늘은 브라우저 콘솔과 코드 에디터 두 가지 환경에서 JavaScript를 작성하고 실행하는 방법을 알아보겠습니다. 2. 브라우저 콘솔에서 코드 실행하기브라우저 콘솔을 활용하면 JavaScript를 빠르게 테스트해 볼 수 있습니다. 1일 차에서 간단히 사용.. 2024. 11. 8.