25%
57,750원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
[프론트엔드, 웹 개발] 강의입니다.
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년 넘게 소프트웨어 개발자로 살았으며, 지금도 개발하고 있습니다.
그 중에서 20년 넘게 JavaScript 중심으로 개발했습니다.
저서:
요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript
몰입! 자바스크립트
ECMAScript 6
자바스크립트 정규표현식
HTML5
DOM 스크립팅
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 Environmen
미리보기
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일)
수강평
총 6개
수강생분들이 직접 작성하신 수강평입니다.
4.3
6개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
오래 걸리더라도 끝까지 마무리 해보자는 마음으로 강의를 마쳤습니다. 부족한 부분이 많다는 것을 알게 되어, 새로운 강의들도 계속 공부하겠습니다. 감사합니다.
2023-09-20
잘 들었습니다.
DOM관련해서 학문적인 개념들을 학습하고 싶은 학생들을 대상으로 좋은 것 같습니다.
따라서 DOM을 이해하면서 코드를 읽는 연습을 잘 하고 싶다면 추천합니다.
다만 아쉬운 점은 강의 난이도인데요, 잦은 화면 전환과 라이브 코딩의 유무가 시작하는 초심자들에게는 다소 버거울 수 있을 것 같고, 2배속으로 빠르게 학습하거나 간단한 정리가 필요한 중급 이상에게는 약간 지루하게 느껴질 수도 있을 것 같습니다.
그러나, 정성이 가득 담긴 강의인 것은 맞는 것 같습니다 :)
2022-09-07
이런강의많이찍어주세요.
리액트,뷰 강의는 찍으실생각이 없으신지요
2023-01-14
알기쉽고 재밌어요
2023-07-31
도움되었습니다!!
2023-07-01
