30%
53,900원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
DOM을 모르고 웹 프로그램을 말할 수 없습니다. DOM 스펙의 95% 이상을 다룹니다. DOM의 마침표를 찍을 수 있습니다. 넓고 깊으며 자세합니다. 시간, 비용, 노력을 허비하지 않습니다. 자바스크립트 활용도 같이 다루며, 바닐라 JS로 웹 애플케이션을 개발할 수 있습니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
User Interface 기본
DOM 스펙의 DOM
HTML 스펙의 DOM
HTML 스펙의 Window 오브젝트
웹 애플리케이션 개발자라면 꼭 잡아야 할
DOM의 마침표를 찍어보세요!
개발자에게 꼭 필요한
DOM 역량!
DOM(Document Object Model)은 웹 애플리케이션 개발에 필수입니다. 마우스 클릭도 DOM이며, 입력한 값을 구하는 것도 DOM입니다. 데이터를 웹 페이지에 동적으로 표현하는 것도 DOM입니다.
왜 DOM을 알아야 할까요?
웹 애플리케이션의
구상, 생각, 접근이 달라집니다!
깊고 넓으면서 자세하게 다루기 위해, 3개 강좌로 분리하여 다룹니다.
- 본 강좌는 첫 번째 강좌로 DOM 기본과 Window 오브젝트를 다룹니다.
- 두 번째 강좌는 "DOM 인터랙션"이며 Event, Web Component 등을 다룹니다.
- 세 번째 강좌는 "DOM: CSSOM"으로 CSS 중심으로 DOM 처리를 다룹니다.
DOM의 프로퍼티와 메소드는 모든 언어에서 사용하며 기능도 같습니다. 다만, 구현하는 형태가 다릅니다. 자바스크립트 언어로 강좌를 진행하지만, DOM 개념/기능 파악이 목적이라면 다른 언어 개발자도 수강할 수 있습니다.
이 강의를 통해 여러분은 DOM의 이해 정도에 관계없이 DOM 전체를 보았다는, 숲 - 나무 - 가지 - 꽃을 보았다는, 개발자에게 가장 중요한 자신감을 갖게 됩니다. 웹 애플리케이션의 구상, 생각, 접근이 달라집니다.
DOM의 프로퍼티와 메소드를 단독으로 사용하지 않고 자바스크립트와 같이 사용합니다. 자바스크립트 활용 형태도 같이 배울 수 있으며, 자바스크립트 실력도 향상시킬 수 있습니다.
DOM을 온전하게 배우는
가장 깊고 정확한 길.
DOM 스펙의 95% 이상을 다룹니다. DOM의 마침표를 찍을 수 있습니다.
넓고(Wide), 깊으며(Deep), 자세(Detail)합니다. 시간, 비용, 노력을 허비하지 않습니다.
이 강의는 시나리오를 갖고 있습니다. 즉, 배우는 순서와 배워야 할 것이 정렬되어 있습니다.
강의를 따라 학습하면 자연스럽게 DOM 전체를 배울 수 있으며, DOM의 모든 것을 느낄 수 있습니다.
인터페이스
체크 리스트를
제공합니다.
인터페이스의 프로퍼티와 메소드를 빠뜨리지 않기 위해, 아래 이미지처럼 인터페이스의 프로퍼티와 메소드를 체크 리스트 형태로 작성하여 체크했습니다.
인터페이스 리스트는 PDF 파일로 제공합니다. 이의 활용 방법은 [00-3]에서 설명하고 있습니다. 강좌의 프로퍼티와 메소드를 쉽게 찾을 수 있습니다.
인터페이스 리스트
웹 기반 기술의
로드맵 통합 강의.
웹 기반 기술은 HTML, CSS, DOM, JavaScript입니다.
트렌드 기술은 시간이 지나면 바뀌거나 없어지기도 하지만, 기반 기술은 없어지지 않으며 기술이 축적됩니다. 처음부터 깊고 넓으면서 자세하게 배울 필요가 있습니다.
개설된 4개의 자바스크립트 강의와 함께 웹 개발의 기반이 되는 기반 기술을 완전하게 마침표를 찍을 수 있습니다.
40년 이상의
경험에서 나옵니다.
40년 넘게 소프트웨어를 개발해 온 경험, 시간이 지나야 비로소 느낄 수 있는 감각적인 것, 동물적 감각이 된 것을 강의에 담았습니다.
감각을 만드는 것이
중요합니다.
DOM은 기능도 중요하지만, 더 중요한 것은 감각을 만드는 것입니다. 감각을 만들기 위해서는 코딩도 중요하지만 넓이와 깊이를 느껴야 합니다. 다양한 코드 형태를 다루며, 감각이 만들어 지도록 넓고 깊으면서 자세하게 설명합니다.
집중할 수 있는
학습 환경을 제공합니다.
코드를 실행하기 위해 강의 페이지를 벗어나는 것은 집중도가 떨어지고 강의 흐름이 끊어지게 됩니다.
이를 방지하기 위해 되도록 현재 페이지에서 진행할 수 있도록 전용 프로그램을 개발했습니다.
함께 들으면 좋은
연관 강의를 확인해보세요.
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
자바스크립트 개발자
자바스크립트 이외 언어의 웹 개발자(DOM은 모든 언어의 공통)
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
자바스크립트 기본, HTML
안녕하세요
김영보 입니다.
김영보 입니다.
40년 넘게 소프트웨어를 개발했으며, 지금도 개발하고 있습니다.
23년 넘게 JavaScript 중심으로 개발했습니다.
동영상: 10개
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js
저서: 9권
몰입! 자바스크립트, ECMAScript 6, HTML5, DOM 스크립팅
자바스크립트 정규표현식, 요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript, Ajax 활용, prototype.js 완전분석
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
커리큘럼
총 123 개
˙ 24시간 33분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
3 강
∙ 29분
섹션 1. DOM 관련 요소 기술 개념 정리
12 강
∙ 3시간 4분
1. 기술 용어, 코드 작성 기준
미리보기
14:45
2. 뉘앙스 단순화 방법: 시맨틱 그룹, DOM 접근 키워드
미리보기
15:05
3. 자바스크립트의 Host Environment: DOM 인터페이스, Host Environment
미리보기
12:58
4. 자바스크립트의 Object, Property: 함수 실행 단계, 오브젝트, 프로퍼티
미리보기
18:04
5. 함수, 메소드, Global Object
미리보기
18:36
6. 실행 Context, Scope chain: Context 개념, 스코프, 실행 콘텍스트 키워드
미리보기
14:26
7. HTML 정리: 엘리먼트, 태그, HTML, HTML5
미리보기
15:23
8. HTML의 구조, 구성, 아웃라인
미리보기
15:28
9. <section>와 아웃라인: section 엘리먼트, section 아웃라인 참고사항
미리보기
15:42
10. HTML 스펙의 엘리먼트
미리보기
13:54
11. 요구 분석, 시나리오: 시나리오 작성 형태, 이벤트 + 프로세스
미리보기
19:41
12. 실무 기준: 실무 기준, ECMAScript 스펙, 프로그램 개발, 강의 형태
미리보기
10:04
섹션 2. DOM 개요
2 강
∙ 20분
1. 다큐먼트와 인터페이스: DOM의 개념적 핵심, 인터페이스 리스트 활용 방법
10:43
2. DOM 스펙 레벨: DOM 출현 배경, DOM 레벨
09:18
섹션 3. DOM 기본 개념
5 강
∙ 59분
1. 자바스크립트 대응 용어 정리: HTML과 자바스크립트, CSS와 자바스크립트
12:50
2. DOM Document, HTML Document 인터페이스
07:00
3. 노드(Node): HTML과 DOM 트리, 노드 타입
16:52
4. Node Tree: 노드 위치 표현, 트리(Tree), Tree Order, 노드 트리, 구조/위치
12:57
5. DOM 랜더링 차이: 노드 트리 차이, 텍스트 노드 제외, 노드 트리/인터페이스
09:27
섹션 4. Document 인터페이스
10 강
∙ 2시간 16분
1. Document 프로퍼티: DocumentType, doctype 형태, document 프로퍼티
13:57
2. 엘리먼트 추출-1: getElementById(), getElementsByClassName()
17:53
3. HTMLCollection 인터페이스: HTMLCollection, item(), namedItem()
13:52
4. NodeList 인터페이스: NodeList, item()
13:12
5. childNodes, children 프로퍼티 차이
08:23
6. Event 개념: Event 요소
15:52
7. 이벤트 설정 형태: 이벤트 리스너와 핸들러
14:35
8. live, static
13:44
9. 엘리먼트 추출-2: getElementsByTagName(), getElementsByTagNameNS()
13:14
10. 엘리먼트 오브젝트 생성: createElement(), createElementNS()
12:09
섹션 5. Element 인터페이스
7 강
∙ 1시간 30분
1. XML 형태
09:37
2. XML과 Namespace
12:38
3. content 속성, IDL 속성
11:22
4. 자바스크립트로 속성값을 구하는 형태
17:02
5. DOMTokenList 인터페이스-1
11:51
6. DOMTokenList 인터페이스-2
10:44
7. DOMTokenList 인터페이스-3
17:08
섹션 6. Element 인터페이스: NamedNodeMap
3 강
∙ 39분
1. NamedNodeMap 인터페이스-1
08:21
2. NamedNodeMap 인터페이스-2
13:29
3. NamedNodeMap 인터페이스-3
17:17
섹션 7. Element 인터페이스: 속성 메소드
11 강
∙ 2시간 21분
1. 속성 작성 여부: hasAttribute(), hasAttributes()
16:35
2. 속성 작성 체크: hasAttribute(), hasAttributes()
07:53
3. 속성값 추출: getAttribute()
11:42
4. 속성 추출: 이름, 노드, getAttributeNames(), getAttributeNode()
09:53
5. 속성 생성: Attr 오브젝트, createAttribute()
13:44
6. 속성 생성: namespace 사용, createAttributeNS()
13:15
7. Attr 인터페이스
10:49
8. 속성 설정-1: setAttribute()
08:35
9. 속성 설정-2: setAttribute(), setAttributeNode()
15:34
10. 속성 삭제: removeAttribute(), removeAttributeNode()
16:06
11. 속성 토글: toggleAttribute(), toggle 활용 맛보기
17:05
섹션 8. namespace를 사용한 속성 처리
2 강
∙ 35분
1. 속성 존재 여부, 속성값 추출: hasAttributeNS(), getAttributeNS()
17:08
2. 속성 설정, 속성 삭제: setAttributeNS(), removeAttributeNS()
17:52
섹션 9. DOMImplementation 인터페이스
2 강
∙ 26분
1. DOMImplementation 인터페이스-1: implementation, createHTMLDocument()
13:37
2. DOMImplementation 인터페이스-2: createDocument(), createDocumentType()
13:20
섹션 10. Node 인터페이스
7 강
∙ 1시간 19분
1. textContent
13:00
2. innerText
09:34
3. outerText
08:37
4. innerHTML, outerHTML
14:21
5. Node Tree Position: Node와 Node Tree, Node Tree 포지션 명칭
08:38
6. insertAdjacentHTML()
09:46
7. createTextNode(), normalize()
15:34
섹션 11. Node Tree Position 프로퍼티
5 강
∙ 47분
1. 첫 번째 위치 프로퍼티: firstChild, firstElementChild
13:30
2. 마지막 위치 프로퍼티: lastChild, lastElementChild
06:27
3. 부모 위치 프로퍼티: parentNode, parentElement
12:12
4. 다음 형제 위치 프로퍼티: nextSibling, nextElementSibling
06:26
5. 앞 형제 위치 프로퍼티: previousSibling, previousElementSibling, doctype
09:15
섹션 12. Node Tree 포지션 비교
2 강
∙ 18분
1. compareDocumentPosition()
11:56
2. contains(), hasChildNodes()
06:59
섹션 13. Node 추가, 삭제, 대체, 복제
9 강
∙ 1시간 37분
1. appendChild()
11:25
2. append(), childElementCount
10:17
3. insertBefore(), prepend()
10:06
4. before(), after()
08:35
5. replaceChild(), replaceChildren(), replaceWith()
09:33
6. remove(), removeChild(), isConnected
09:43
7. cloneNode(), isEqualNode()
13:07
8. importNode(), adoptNode(), ownerDocument
14:30
9. baseURI, lookupNamespaceURI(), isDefaultNamespace(), lookupPrefix()
10:17
섹션 14. DOM Traversal
7 강
∙ 1시간 15분
1. NodeIterator 오브젝트 생성: createNodeIterator(), nextNode()
08:55
2. NodeIterator 오브젝트 생성: 노드 타입 값, createNodeIterator(), previousNode()
08:38
3. NodeIterator 오브젝트 프로퍼티: root, whatToShow, referenceNode
11:01
4. NodeFilter 인터페이스: createNodeIterator(), acceptNode(), filter 프로퍼티
12:13
5. TreeWalker 인터페이스: createTreeWalker()
14:00
6. firstChild(), lastChild()
08:55
7. parentNode(), nextNode(), nextSibling(), previousNode(), previousSibling()
11:35
섹션 15. DocumentFragment 인터페이스
1 강
∙ 12분
1. createDocumentFragment(), DocumentFragment 관련 인터페이스
12:57
섹션 16. 텍스트 처리 인터페이스
3 강
∙ 32분
1. CharacterData 인터페이스-1: appendData(), substringData()
10:07
2. CharacterData 인터페이스-2: insertData(), replaceData(), deleteData()
05:31
3. Text 인터페이스: new Text(), splitText()
16:59
섹션 17. HTML 스펙의 Document 인터페이스
8 강
∙ 1시간 25분
1. Resource metadata management
09:37
2. DOM Tree 악세서-1
10:51
3. DOM Tree 악세서-2: getElementsByName()
11:28
4. Location 인터페이스: location 프로퍼티
10:21
5. DOMStringList 인터페이스: ancestorOrigins, item(), contains()
10:52
6. Location 인터페이스: assign(), replace(), reload()
07:18
7. dynamic markup insertion: open(), write(), close()
10:59
8. user interaction: defaultView, designMode, hasFocus(), activeElement
14:22
섹션 18. Window 인터페이스 1
6 강
∙ 57분
1. current browsing context
08:53
2. BarProp 인터페이스
07:23
3. History 인터페이스: back(), forward(), go()
10:24
4. History 인터페이스: pushState()
09:24
5. History 인터페이스: replaceState()
10:17
6. History 인터페이스: scrollRestoration
11:17
섹션 19. Window 인터페이스 2
5 강
∙ 1시간
1. other browsing context: WindowProxy, length, frames
14:26
2. open()
14:17
3. current browsing context: close(), stop(), focus(), blur()
15:40
4. other browsing context: parent, top, frameElement, opener
09:31
5. user prompts: alert(), confirm(), prompt(), print()
06:08
섹션 20. Navigator 인터페이스
3 강
∙ 25분
1. NavigatorID 인터페이스: userAgent
07:44
2. NavigatorLanguage, NavigatorOnLine, NavigatorCookies 인터페이스
04:38
3. NavigatorConcurrentHardware, NavigatorContentUtils, originAgentCluster
13:04
섹션 21. Messaging System
3 강
∙ 35분
1. messaging system, postMessage()
09:16
2. postMessage(): 파라미터 3개 형태
10:54
3. postMessage()의 transfer
15:33
섹션 22. WindowOrWorkerGlobalScope 인터페이스
7 강
∙ 1시간 22분
1. structured cloning: origin, isSecureContext, structuredClone()
10:49
2. Timers: setTimeout(), clearTimeout(), setInterval(), clearInterval()
16:22
3. microtask queuing: Call Stack, Event Loop, Task, Task Queue
14:10
4. microtask queuing: queueMicrotask()
06:30
5. Base64 utility methods
12:51
6. ImageBitmap: createImageBitmap()
12:08
7. ImageBitmap 인터페이스
09:30
강의 게시일 : 2021년 12월 17일
(마지막 업데이트일 : 2021년 12월 17일)
수강평
총 9개
수강생분들이 직접 작성하신 수강평입니다.
4.6
9개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
웹개발자라면 꼭 한 번 듣기를 권장합니다.
2024-03-25
너무 친절하게 ... 하나하나 다 설명해 주시려 노력하는게 보이는 강의입니다.
그게 과해서 일부 어떤 부분에서는 집중력을 떨어뜨리게 하는 부분이 있는 것도 사실입니다.
초반에.. 그런 부분만 넘어서면 DOM 관련해서는 이 강의 말고는 따로 들을 수 있는 곳도 없어 보입니다.
2024-01-08
잘 들었습니다.
DOM관련해서 학문적인 개념들을 학습하고 싶은 학생들을 대상으로 좋은 것 같습니다.
따라서 DOM을 이해하면서 코드를 읽는 연습을 잘 하고 싶다면 추천합니다.
다만 아쉬운 점은 강의 난이도인데요, 잦은 화면 전환과 라이브 코딩의 유무가 시작하는 초심자들에게는 다소 버거울 수 있을 것 같고, 2배속으로 빠르게 학습하거나 간단한 정리가 필요한 중급 이상에게는 약간 지루하게 느껴질 수도 있을 것 같습니다.
그러나, 정성이 가득 담긴 강의인 것은 맞는 것 같습니다 :)
2022-09-07
오래 걸리더라도 끝까지 마무리 해보자는 마음으로 강의를 마쳤습니다. 부족한 부분이 많다는 것을 알게 되어, 새로운 강의들도 계속 공부하겠습니다. 감사합니다.
2023-09-20
DOM의 개념을 알게되어 정망 뜻깊은 수강이었습니다
2023-10-11
