자바스크립트+jQuery 완전정복 스터디 2: jQuery편

웹 프론트엔드 개발자를 위한 필독서!

자바스크립트+jQuery

완전정복 스터디

2권_책.indb 1 2015-10-02 오후 5:06:39

목차VI

Lesson 01 _ 자바스크립트 DOM과 jQuery와의 관계 �� 8

01 _ 자바스크립트를 배운다는 건? �� 8

02 _ 자바스크립트와 jQuery와의 관계 �� 9

Lesson 02 _ DOM 소개와 기능? �� 12

01 _ DOM이란? �� 12

02 _ DOM 기능 �� 13

Lesson 03 _ DOM 구조? �� 14

01 _ W3C DOM vs� 브라우저 DOM �� 14

02 _ IDL이란? �� 16

Lesson 04 _ DOM과 HTML 페이지와의 관계? �� 18

01 _ DOM과 HTML 페이지와의 관계 �� 18

02 _ DOM과 노드와의 관계 �� 19

Lesson 05 _ 핵심 DOM 객체? �� 22

01 _ 핵심 DOM 객체 소개 �� 22

02 _ Node 객체 �� 23

03 _ Element 객체 �� 24

04 _ HTMLElement 객체 �� 25

05 _ Document 객체 �� 27

06 _ HTMLDocument 객체 �� 28

Lesson 01 _ jQuery 기능 �� 34

01 _ jQuery란? �� 34

02 _ jQuery 기능 1 �� 35

03 _ jQuery 기능 2 �� 37

Part 04

jQuery

기초와 활용

Chapter 01

자바스크립트 DOM

Chapter 02

jQuery 소개

Part 01 _ 자바스크립트 코어 기초 문법

Part 02 _ 자바스크립트 함수와 함수 단위 프로그래밍

Part 03 _ 자바스크립트 코어 라이브러리

Part 04 _ jQuery 기초와 활용

Part 05 _ 자바스크립트 클래스와 클래스 단위 프로그래밍

Part 06 _ 자바스크립트 객체지향 프로그래밍

Part 07 _ 실무활용! OOP를 적용한 UI 콘텐츠 제작

2권_책.indb 6 2015-10-02 오후 5:06:41

목차 VII

Lesson 02 _ jQuery 학습 방법? �� 38

01 _ jQuery의 정체 �� 38

02 _ 초보자가 반드시 할 줄 알아야 하는 jQuery 핵심 내용 정리 �� 38

03 _ jQuery 학습 순서 �� 45

Lesson 03 _ jQuery를 사용하는 이유 �� 47

01 _ jQuery vs� 자바스크립트 �� 47

02 _ jQuery와 CSS와의 관계 �� 53

Lesson 04 _ jQuery 개발 환경 설정 �� 56

01 _ jQuery 라이브러리 삽입 �� 56

02 _ 진입점인 ready() 메서드 설정 �� 58

03 _ DOMContentLoaded 이벤트 vs� load 이벤트 �� 59

04 _ 정리 �� 62

Lesson 05 _ jQuery의 정체 �� 63

01 _ $() 기본 사용법 �� 63

02 _ $()의 의미 �� 65

03 _ $() 함수의 리턴값 �� 66

04 _ jQuery의 정체 �� 70

Lesson 01 _ 일반 노드 찾기 �� 78

01 _ 소개 �� 78

02 _ 핵심 내용 �� 79

03 _ 정리 �� 88

Lesson 02 _ 찾은 노드 다루기 �� 89

01 _ 소개 �� 89

02 _ 핵심 내용 �� 89

03 _ 정리 �� 107

Lesson 03 _ 자식 노드 찾기 �� 108

01 _ 소개 �� 108

02 _ 핵심 내용 �� 109

03 _ 정리 �� 120

Lesson 04 _ 부모 노드 찾기 �� 121

01 _ 소개 �� 121

02 _ 핵심 내용 �� 122

03 _ 정리 �� 124

Chapter 03

노드 다루기 - 노드 찾기

2권_책.indb 7 2015-10-02 오후 5:06:41

목차VIII

Lesson 05 _ 형제 노드 찾기 �� 125

01 _ 소개 �� 125

02 _ 핵심 내용 �� 126

03 _ 정리 �� 129

Lesson 06 _ 미션 �� 130

Lesson 01 _ 노드 생성 및 추가 �� 136

01 _소개 �� 136

02 _ 핵심 내용 �� 137

03 _ 정리 �� 149

Lesson 02 _ 노드 이동 �� 150

01 _ 소개 �� 150

02 _ 핵심 내용 �� 150

03 _ 정리 �� 156

Lesson 03 _ 노드 삭제 �� 157

01 _ 소개 �� 157

02 _ 핵심 내용 �� 157

03 _ 정리 �� 161

Lesson 04 _ 노드 내용 읽기 및 변경 �� 162

01 _ 소개 �� 162

02 _ 핵심 내용 �� 163

03 _ 정리 �� 169

Lesson 05 _ 미션 �� 170

01 _ 진행 순서 �� 170

02 _ 화면 구조 �� 170

Lesson 01 _ 스타일 소개 �� 188

01 _ 스타일 종류 �� 188

02 _ 스타일을 다루는 방법 �� 189

03 _ jQuery를 활용한 스타일 다루는 방법의 특징 �� 189

Lesson 02 _ 핵심 내용 �� 195

Lesson 03 _ 미션 �� 205

Chapter 04

노드 다루기 -

노드 생성/추가/삭제/이동

Chapter 05

스타일 다루기

2권_책.indb 8 2015-10-02 오후 5:06:41

목차 IX

Lesson 01 _ 속성 소개 �� 216


Lesson 03 _ 미션 �� 224

Lesson 01 _ 이벤트 소개 �� 242

01 _ 이벤트란? �� 242

02 _ 이벤트 종류 �� 243

03 _ 이벤트 단계 �� 243

04 _ Event 객체 �� 253


Lesson 03 _ 미션 �� 292

Lesson 01 _ 요소의 위치 및 크기 관련 기능 �� 316

01 _ 요소의 위치 및 크기 관련 속성 소개 �� 316

02 _ 핵심 내용 �� 317

03 _ 정리 �� 354

Lesson 02 _ 문서의 위치 및 크기 관련 기능 �� 356

01 _ 소개 �� 356

02 _ 핵심 내용 �� 357

03 _ 정리 �� 358

Lesson 03 _ 화면의 위치 및 크기 관련 기능 �� 359

01 _ 소개 �� 359

02 _ 핵심 내용 �� 360

03 _ 정리 �� 361

Lesson 04 _ 윈도우의 위치 및 크기 관련 기능 �� 362

01 _ 소개 �� 362

02 _ 핵심 내용 �� 362

03 _ 정리 �� 377

Lesson 05 _ 마우스의 위치 및 크기 관련 기능 �� 378

01 _ 소개 �� 378

02 _ 핵심 내용 �� 378

03 _ 정리 �� 383

Lesson 06 _ 미션 �� 384

Chapter 07

이벤트 다루기

Chapter 08

위치/크기 관련 기능 다루기

Chapter 06

속성 다루기

2권_책.indb 9 2015-10-02 오후 5:06:41

목차X

Lesson 01 _ jQuery 애니메이션 효과 소개 �� 428

01 _ 애니메이션 방법 정리 �� 428

02 _ jQuery 애니메이션 효과 종류 �� 429

Lesson 02 _ 기본 애니메이션 효과 다루기 �� 430

01 _ 소개 �� 430

02 _ 핵심 내용 �� 430

03 _ 정리 �� 443

Lesson 03 _ 사용자 정의 애니메이션 효과 �� 444

01 _ 소개 �� 444

02 _ 핵심 내용 �� 444

03 _ 정리 �� 449

Lesson 04 _ 미션 �� 450

Chapter 09

애니메이션 효과 다루기

2권_책.indb 10 2015-10-02 오후 5:06:41

XXXI

02권: jQuery편(Part 04)

■ jQuery를 이제 막 배우는 초보자

■ jQuery를 체계적으로 배우고 싶은 초보자

■ 실무를 위해 반드시 알고 있어야 하는 핵심 내용을 배우고 싶은 초보 실무자

■ 실무에서 jQuery를 제대로 활용하고 싶은 초보 실무자

■ jQuery 최적화 방법을 배우고 싶은 초보 실무자

이번 스터디를 진행하기 위해서는다음 내용을 이해하고 있어야 합니다.

1. 인라인/블럭 태그 개념2. 기본 CSS 속성 개념3. 개인 소개 페이지 정도는 만들 수 있어야해요.

1. 자바스크립트 코어 문법 기초2. 자바스크립트 함수와 함수단위 프로그래밍3. 자바스크립트 코어 라이브러리 기초/활용

변수,연산자,

형변환,if,switch,

for,while

함수 기초/활용

일반함수, 익명함수,

중첩함수,콜백함수,클로저

타이머 함수,Math, String,Date, Array

HTML/CSS

기초

필독!

둘러보기

2권_책.indb 31 2015-10-02 오후 5:06:45

실무 스터디

07부실무활용!

OOP를 적용한UI 콘텐츠 제작

입코딩은 그만!지금까지 배운 내용을 총 동원해 실무에서 한번쯤 만들게 되는 콘텐츠를 제작하며

실무 팁과 테크닉을 배웁니다.

고급 스터디

06부자바스크립트

객체지향프로그래밍

멋진! 개발자가 되려면객체지향 프로그래밍은 필수입니다.자바스크립트를 활용해 객체지향

프로그래밍을 배웁니다.

중급 스터디

05부자바스크립트클래스 단위프로그래밍

이제 웹 프로그래밍에도클래스 개념은 필수입니다.자바스크립트를 활용해

클래스를 배웁니다.

04부jQuery

기초와 활용

전체 스터디 맵 공지: 원의 크기는 난이도를 나타냅니다.

이번 스터디영역입니다.


함수와함수 단위프로그래밍

정복!


코어라이브러리

01부자바스크립트코어 기초 문법

초급 스터디웹프로그래밍 입문자가 반드시 알고 있어야 하는

자바스크립트 문법과 활용법을 배웁니다.

정복! 정복!

04jQuery 기초와 활용

PART

2권_책.indb 2 2015-10-02 오후 5:06:46

드디어 길고 길었던 자바스크립트 코어 문법과 라이브러리를 끝내고 jQuery 영역으로 접어

들었습니다. 먼저 다음 지도와 표를 보며 이번 영역에서 배울 내용을 간단히 살펴보겠습니다.

04부 jQuery 기초와 활용

01장자바스크립트

DOM

완료

시작

02장jQuery소개

04장노드 생성/추가/삭제/

이동

05장스타일다루기

06장속성

다루기

07장이벤트다루기

08장위치/크기

다루기

09장효과

다루기

03장노드찾기

공지:원의 크기는 난이도를 나타냅니다.앞으로 갈수록 조금씩 어려워지니 차근차근 따라오세요.

01. 길잡이

2권_책.indb 3 2015-10-02 오후 5:06:46

장 주제 내용

01장 자바스크립트 DOM

Lesson 01 자바스크립트 DOM과 jQuery와의 관계

Lesson 02 DOM 소개와 기능

Lesson 03 DOM 구조

Lesson 04 DOM과 HTML 페이지와의 관계

Lesson 05 핵심 DOM 객체

02장 jQuery 소개

Lesson 01 jQuery 기능

Lesson 02 jQuery 학습 방법

Lesson 03 jQuery를 사용하는 이유

Lesson 04 jQuery 개발 환경 설정

Lesson 05 jQuery의 정체

03장 노드 찾기

Lesson 01 일반 노드 찾기

Lesson 02 찾은 노드 다루기

Lesson 03 자식 노드 찾기

Lesson 04 부모 노드 찾기

Lesson 05 부모 노드 찾기

Lesson 06 형제 노드 찾기

Lesson 07 미션

04장 노드 생성/추가/삭제/이동

Lesson 01 노드 생성 및 추가

Lesson 02 노드 추가

Lesson 03 노드 삭제

Lesson 04 노드 이동

Lesson 05 미션

05장스타일 다루기

Lesson 01 스타일 다루기

Lesson 02 미션

06장 속성 다루기Lesson 01 속성 다루기

Lesson 02 미션

07장 이벤트 다루기

Lesson01 이벤트란?

Lesson02 핵심 내용

Lesson03 미션

08장 위치/크기 다루기

Lesson 01 요소의 위치 및 크기 관련 기능

Lesson 02 문서의 위치 및 크기 관련 기능

Lesson 03 화면의 위치 및 크기 관련 기능

Lesson 04 윈도우의 위치 및 크기 관련 기능

Lesson 05 마우스의 위치 및 크기 관련 기능

Lesson 06 미션

09장 애니메이션 효과 다루기

Lesson 01 jQuery 애니메이션 효과 소개

Lesson 02 기본 효과 다루기

Lesson 03 사용자 정의 효과 만들기

Lesson 04 미션

2권_책.indb 4 2015-10-02 오후 5:06:47

스터디 시작 전에 스터디 일정부터 잡아보죠. 여러분의 상황에 맞게 시작일과 종료일을 대략

잡아보세요.

자! 이제 스터디를 위한 모든 준비가 끝났습니다.

그럼 시작해볼까요?!

02. 스터디 일정 작성하기

장 내용 예상 진행시간 시작일 종료일

01장 자바스크립트 DOM 06시간

02장 jQuery 소개 03시간

03장 노드 찾기 06시간

04장 노드 생성/추가/삭제/이동 04시간

05장 스타일 다루기 02시간

06장 속성 다루기 06시간

07장 이벤트 다루기 12시간

08장 위치/크기 관련 속성 다루기 24시간

09장 애니메이션 효과 다루기 06시간

04부 jQuery 기초와 활용 영역에서는 jQuery의 수많은 내용 중 실무를 진행하려면 반드시

알고 있어야 하는 핵심 내용을 배웁니다. 내용이 많긴 하지만 다행히 논리적으로 이해해야 할

내용이 많지 않기 때문에 스타일의 선택자 개념과 자바스크립트의 함수와 메서드 개념을 이해

하고 있다면 어렵지 않게 정복할 수 있을 것입니다.

2권_책.indb 5 2015-10-02 오후 5:06:47

CHAPTER 01

자바스크립트 DOM

04부 jQuery 기초와 활용

완료

02장jQuery소개

04장노드 생성/추가/삭제/

이동

05장스타일다루기

06장속성

다루기

07장이벤트다루기

08장위치/크기

다루기

09장효과

다루기

03장노드찾기

공지:원의 크기는 난이도를 나타냅니다.앞으로 갈수록 조금씩 어려워지니 차근차근 따라오세요.

이번 스터디영역입니다.

01장자바스크립트

DOM

시작

2권_책.indb 6 2015-10-02 오후 5:06:47

들어가며 만약 여러분이 jQuery를 제대로 이해하고 나서 사용하고 싶다면 jQuery를 학습하기 전에 자

바스크립트 DOM을 이해하고 있어야 합니다. 이유는 바로 jQuery에서 제공하는 기능은 대부

분 자바스크립트 DOM으로 만들어져 있기 때문입니다.

미리 언급하자면 이번 장에서 배울 자바스크립트 DOM을 제대로 이해하기 위해서는 클래스

와 객체 개념을 이해하고 있어야 합니다. 여기서는 여러분이 클래스와 객체 개념을 이해하고

있다는 가정하에 진행됩니다.

클래스와 객체 개념을 아직 학습하지 못한 분은 잠시 학습을 중단하고 [기초편] 책 1부의 ‘부록

01 초보자를 위한 함수와 클래스’를 학습한 후 이번 장으로 다시 되돌아와 학습을 진행하길 바

랍니다.

이번 장에서 다룰 내용은 다음과 같습니다.

Lesson 01 자바스크립트 DOM과 jQuery와의 관계

Lesson 02 DOM 소개와 기능

Lesson 03 DOM 구조

Lesson 04 DOM과 HTML 페이지와의 관계

Lesson 05 핵심 DOM 객체

2권_책.indb 7 2015-10-02 오후 5:06:47

PART 04 _ jQuery 기초와 활용8

자바스크립트 DOM과 jQuery와의 관계

Lesson

01jQuery는 사실 만능이 아닙니다. jQuery는 자바스크립트로 만들어진 라이브러리일 뿐입니다. 다만 자

바스크립트 DOM 작업을 좀더 쉽게 할 수 있는 뛰어난 기능을 가지고 있습니다. 이번 레슨에서는 자바스

크립트 DOM과 jQuery가 어떤 관계를 맺고 있는지 알아보겠습니다.

01 _ 자바스크립트를 배운다는 건?

자바스크립트는 크게 4가지 요소로 구성돼 있습니다.

자바스크립트Core 문법

기본 문법과 구조,데이터 타입,

조건문(if,switch), 반복문(for, while),

함수(function),클래스(prototype)

등이 포함돼 있습니다.

자바스크립트Core 라이브러리

자바스크립트에서 기본으로 제공하는

타이머함수(setInterval...),문자열(String),

날짜및 시간(Date),수학(Math),배열(Array),

기타 전역함수 등이 포함돼 있습니다.

자바스크립트 BOM(Browser Object Model)

브라우저와 관련된Window,

Navigator,Location,History,

Document,Screen 객체들이포함돼 있습니다.

자바스크립트 DOM(Document Object Model)

노드, 스타일,속성, 이벤트,

위치및 크기 등을 다룰 수 있는 다양한 기능이

포함돼 있습니다.

자바스크립트를 배운다는 건바로 이 네 가지를 배우는 것과같습니다.

2권_책.indb 8 2015-10-02 오후 5:06:47

CHAPTER 01 _ 자바스크립트 DOM 9

02 _ 자바스크립트와 jQuery와의 관계

그럼 자바스크립트와 jQuery는 어떤 관계가 있을까요?

간단히 설명하면 jQuery는 자바스크립트 요소 중 실무에서 가장 많이 사용하는 자바스크립트 DOM 작

업을 좀더 쉽게 처리할 수 있게 도와주는 라이브러리입니다.

자바스크립트Core 문법

기본 문법과 구조,데이터 타입,

조건문(if,switch), 반복문(for, while),

함수(function),클래스(prototype)

등이 포함돼 있습니다.

자바스크립트Core 라이브러리

자바스크립트에서 기본으로 제공하는

타이머함수(setInterval...),문자열(String),

날짜및 시간(Date),수학(Math),배열(Array),

기타 전역함수 등이 포함돼 있습니다.

자바스크립트 BOM(Browser Object Model)

브라우저와 관련된Window,

Navigator,Location,History,

Document,Screen 객체들이포함돼 있습니다.

자바스크립트 DOM(Document Object Model)

노드, 스타일,속성, 이벤트,

위치 및 크기 등을 다룰 수 있는 다양한 기능이

포함돼 있습니다.

jQuery란?자바스크립트 요소 중"자바스크립트 DOM" 부분을 좀더 쉽게 사용할 수 있게 도와주는라이브러리입니다.

위 그림에서도 알 수 있는 것처럼 jQuery는 오직 자바스크립트 DOM 작업을 좀더 쉽게 도와주는 라이브

러리일 뿐이지 자바스크립트 문법이나 라이브러리를 대체할 수 있는 새로운 프로그래밍 언어가 절대 아

니라는 점을 꼭 알아두세요.

2권_책.indb 9 2015-10-02 오후 5:06:47


또 하나 여러분이 알아야 할 중요한 사실이 하나 더 있는데요. 사실 jQuery는 자바스크립트 문법과 자바

스크립트 DOM으로 작성된 일련의 작업들을 좀더 쉽게 사용하기 위해 감싸고 있는 껍데기라는 것입니

다. 이해를 돕기 위해 간단한 예를 들어보겠습니다.

다음과 같이 메뉴 항목이 있다고 해보죠.

<body>

<ul id="menu">

<li>menu1</li>

<li>menu2</li>

<li>menu3</li>

<li>menu4</li>

<li>menu5</li>

</ul>

</body>

이때 스크립트를 이용해 메뉴 항목의 글자 색을 빨간색으로 변경하는 예제를 만드는 경우 jQuery를 이용

하면 다음과 같이 작성할 수 있습니다.

$("#menu li").css("color", "#f00");

jQuery를 이용하면 5개의 메뉴 글자 색 변경을 단 한 줄로 처리할 수 있습니다. 이뿐만 아니라 여러분이

이미 알고 있을 CSS 선택자를 그대로 이용해 원하는 태그 요소를 찾아 처리할 수 있습니다.

그렇다면 여기서 방금 작성한 jQuery 코드의 내부는 과연 무엇으로 채워져 있을까요? 바로 다음과 같이

자바스크립트 코어 문법과 자바스크립트 DOM으로 가득 차 있습니다.

//#menu 노드 찾기

var menu = document.getElementById("menu");

// li 리스트 구하기

var liList = menu.getElementsByTagName("li");

// li 개수만큼 루프 돌며 스타일 변경

for(var i=0;i<liList.length;i++){

// n번째 li 접근

var li = liList[i];

// 스타일 변경

li.style.color="#f00";

}

2권_책.indb 10 2015-10-02 오후 5:06:47


자바스크립트 기능 구문 설명

자바스크립트 기본 문법

var menu

var liList

var li

for(초깃값; 조건식; 증감)

변수 선언

변수 선언

변수 선언

반복문 for

자바스크립트 DOM 기능

document.getElementById()

요소.getElementsByTagName()

요소.style.속성=값

아이디로 요소 찾기

태그이름으로 특정 요소의 자식 요소 찾기

요소의 스타일 속성값 변경

이처럼 jQuery는 특정 기능을 하는 처리 코드를 포장만 하고 있을 뿐 특정 노드를 찾는다거나 스타일을

변경하는 중요한 작업은 모두 jQuery 내부에서 사용하는 자바스크립트 DOM이 처리하게 됩니다.

jQuery의 실제 모든 작업은 jQuery 내부에 있는자바스크립트 DOM이 처리합니다.

1. jQuery군!글자색을 변경해줘!$("#target").css("color","#f00");

자바스크립트DOM

jQuery

2.자바스크립트 DOM 뭐하노!일들어왔다!어서 글자색 변경해!var target = document.getElementById("target");target.style.color="#f00";

호출

바로 이런 이유 때문에 jQuery를 제대로 이해하고 사용하기 위해서는 반드시 자바스크립트 코어 기초 문

법과 코어 라이브러리 그리고 자바스크립트 DOM을 제대로 이해하고 있어야 합니다. 자바스크립트 코어

기초 문법과 코어 라이브러리는 이미 1부와 2부 그리고 3부를 통해 자세히 알아봤으니 여러분은 자바스

크립트 DOM에 대해서만 배우면 됩니다.

자! 그럼 jQuery는 2장부터 자세히 배우기로 하고 지금부터 DOM에 대해 자세히 알아보겠습니다.

2권_책.indb 11 2015-10-02 오후 5:06:47


DOM 소개와 기능?

Lesson

02jQuery를 사용한다는 건 DOM(Document Object Modle)을 다룬다는 의미와 같기 때문에 jQuery를

제대로 이해하기 위해서는 DOM의 개념을 확실히 알고 있어야 합니다. 이번 레슨에서는 DOM이 무엇인

지 알아보겠습니다.

01 _ DOM이란?

간단히 설명하자면 DOM이란? 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩

어리입니다(DOM과 자바스크립트 DOM 모두 동일한 의미입니다).

Document Element

HTMLElementHTML

Document

AtrributeNode

......... ...

...

...

......

Text

HTMLDivElement<div>

HTMLAnchorElement<a>

HTMLBodyElement<body>

HTMLParagraphElement<p>

메모 _ 위 그림을 보면 흔히 사용하는 마크업 태그인 <a>와 <p> 그리고 <div> 태그가 눈에 보입니다. 과연 이 태그들과

DOM은 어떤 관계가 있을까요? 여러분도 궁금하지 않나요? 이에 대한 해답은 잠시 후 ‘Lesson 04 DOM과 HTML 페이지

와의 관계’에서 알게 됩니다.

2권_책.indb 12 2015-10-02 오후 5:06:47


DOM에서 제공하는 일반적인 기능은 위의 이미지처럼 여러 개의 DOM 객체로 나눠 구성돼 있습니다.

마치 자바스크립트 코어 라이브러리에서 문자열 기능은 String 객체에, 배열 기능은 Array 객체에 들어

있는 것처럼 말이지요.

이 의미는 DOM을 어떤 식으로 공부해야 하는지를 알려주는 중요한 단서가 됩니다. 자바스크립트 코어

라이브러리의 객체들을 공부했던 것처럼 먼저 이들이 어떤 관계를 맺고 있는지 파악한 후 각각의 기능을

하나씩 알아가는 방식으로 학습해 나가야 합니다.

02 _ DOM 기능

DOM(Document Object Model) 기능을 큰 단위로 살펴보면 웹 페이지에서 홍보용 이미지를 인터랙

티브하게 보여주는 이미지 슬라이더부터 메뉴 항목에 마우스를 올려놓으면 부드럽게 열리는 아코디언 메

뉴와 쇼핑몰 메뉴 그리고 서버에서 데이터를 받아 화면에 멋지게 출력하는 기능을 만들 때도 모두 DOM

의 기능을 활용하게 됩니다.

DOM 기능을 작은 단위로 살펴보면 스크립트를 이용해 웹 페이지의 글자 색과 글자 크기를 바꾸고 싶을

때나 이미지 위에 마우스 커서가 올려진 경우, 그 위로 커다란 말풍선을 멋들어지게 띄우고 싶을 때도 모

두 DOM의 기능을 활용하게 됩니다.

2권_책.indb 13 2015-10-02 오후 5:06:47


DOM 구조?

Lesson

03이번 레슨에서는 DOM의 구조에 대해 학습합니다. 추가로 웹브라우저와 DOM의 관계에 대해서도 다룹

니다.

01 _ W3C DOM vs. 브라우저 DOM

DOM은 정의 부분(명세서)과 구현 부분으로 나눠집니다. 정의 부분인 명세서에는 웹 페이지(또는 XML)

문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는

전혀 존재하지 않습니다. 이는 함수 이름만 있고 함수 내부에 있어야 할 구현코드가 없는 것과 같습니다.

정말 문서 그 자체입니다. 그리고 이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C입

니다. 그렇다면 과연 구현 부분은 어디에 있을까요?

구현 부분은 바로 브라우저 내부에 존재합니다. 브라우저(IE, Chrome, Firefox, Safari) 업체는 저마다

의 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현합니다.

다음 그림을 보면 좀더 확실히 알 수 있습니다.

Node

Text

Atrribute

Element

Document

HTMLElement

HTMLDocument

Node

Text

Atrribute

Element

Document

HTMLElement

HTMLDocument

IDL

IDL

IDL

IDLIDL

IDL

IDL

IDL을구현한 소스들







이곳에는 구현 소스 코드가전혀 없습니다.단지, 지켜야될 약속(규약)만

딸랑 적혀 있습니다.

이곳에는 동작되는 구현 소스 코드는 전혀 없습니다.

웹브라우저들은 자신들만의 특화된 고유 기술을 이용해서

DOM 인터페이스를 구현합니다.W3C

보이죠?인터페이스가 구현소스로모두 꽉꽉! 차 있습니다.

N

W

S

E

NW

SW

SE

NE

2권_책.indb 14 2015-10-02 오후 5:06:48


Node

Text

Atrribute

Element

Document

HTMLElement

HTMLDocument

Node

Text

Atrribute

Element

Document

HTMLElement

HTMLDocument

IDL

IDL

IDL

IDLIDL

IDL

IDL








이곳에는 구현 소스 코드가전혀 없습니다.단지, 지켜야될 약속(규약)만

딸랑 적혀 있습니다.

이곳에는 동작되는 구현 소스 코드는 전혀 없습니다.

웹브라우저들은 자신들만의 특화된 고유 기술을 이용해서

DOM 인터페이스를 구현합니다.W3C

보이죠?인터페이스가 구현소스로모두 꽉꽉! 차 있습니다.

N

W

S

E

NW

SW

SE

NE

예를 들어 이벤트를 등록하는 기능은 반드시 addEventListener()라는 메서드에 구현돼 있어야 하며 매

개변수 첫 번째는 이벤트 리스너로 사용할 함수가 와야 한다는 식으로 정해져 있습니다.

이때 W3C에서 작성한 규칙대로 이벤트 기능을 구현한 경우 우리는 웹 표준을 지원하는 브라우저라고

부릅니다. IE7 같은 경우 addEventListener() 대신 attachEvent()를 이용해 이벤트를 등록하기 때문에

IE7을 웹 표준을 지원하지 않는 브라우저라고 부르는 이유입니다.

웹페이지

1.비표준인MS 인터넷 익스플로러 브라우저에서는 이벤트 등록 시element.attachEvent()를 사용해야 해요.

비표준 브라우저

표준 브라우저

2.W3C DOM 표준을 지키는브라우저에서는 공통으로이벤트 등록 시element.addEventListener()를 사용한답니다.

N

W

S

E

NW

SW

SE

NE

웹페이지

표준 브라우저

만약 모든 브라우저가 웹표준을지킨다면 이벤트 등록 시공통으로element.addEventListner()를 사용하면 됩니다.

N

W

S

E

NW

SW

SE

NE

2권_책.indb 15 2015-10-02 오후 5:06:49


웹페이지

1.비표준인MS 인터넷 익스플로러 브라우저에서는 이벤트 등록 시element.attachEvent()를 사용해야 해요.

비표준 브라우저

표준 브라우저

2.W3C DOM 표준을 지키는브라우저에서는 공통으로이벤트 등록 시element.addEventListener()를 사용한답니다.

N

W

S

E

NW

SW

SE

NE

웹페이지

표준 브라우저

만약 모든 브라우저가 웹표준을지킨다면 이벤트 등록 시공통으로element.addEventListner()를 사용하면 됩니다.

N

W

S

E

NW

SW

SE

NE

02 _ IDL이란?

IDL(Interface Definition Language)은 DOM의 정의 부분을 만들 때 사용하는 인터페이스 정의 전용

언어입니다. 자바스크립트 프로그래밍처럼 IDL 역시 프로그래밍 언어 중 하나이며 고유의 문법이 있습

니다.

다음 내용은 여러분이 흔히 사용하는 <div> 태그의 실제 기능을 하는 HTMLDivElement DOM 명세서

입니다. 자! 보세요. 선언만 있을 뿐 실제 동작하는 코드는 그 어디에도 없답니다.

출처: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22445964

브라우저 업체는 이렇게 IDL로 작성된 명세서에 따라 저마다의 구현 방법으로 실제 구현 코드를 제작하

는 거죠.

그렇다고 IDL을 배워야 하는 건 아닙니다. 그냥 “DOM 문서는 인터페이스 정의 문서(IDL)로 작성돼 있

구나.”라고만 알고 있으면 됩니다.

2권_책.indb 16 2015-10-02 오후 5:06:49


Node

Text

Atrribute

Element

Document

HTMLElement

HTMLDocument

IDL

IDL

IDL

IDLIDL

IDL

IDL

이곳에는 실제 동작하는소스 코드가 전혀 없습니다.

단지, 지켜야 할약속(규약)만 적혀 있습니다.

W3C DOM 인터페이스

이렇게 해서 DOM이 무엇이고, 어떻게 구성돼 있는지 자세히 알아봤습니다. 다음으로 DOM이 웹페이지

와 브라우저에 어떤 식으로 연결되어 사용되는지 알아보겠습니다.

2권_책.indb 17 2015-10-02 오후 5:06:49


DOM과 HTML 페이지와의 관계?

Lesson

04미리 언급하자면 사실 여러분이 작성하는 웹페이지는 일종의 메타 데이터로써 태그 정보는 웹브라우저에

의해 DOM 객체로 만들어지게 됩니다.

01 _ DOM과 HTML 페이지와의 관계

테스트<html> <head> <title>DOM과 HTML 페이지와의 관계</title> </head>

<body> <div id="intro"> <div class="header"> <h1>소개</h1> </div> <div class="content"> <img src="images/fish.png"><br> 안녕하세요. </div> </div> </body></htm>

HTML 페이지 로딩

파싱단계를 거쳐 웹페이지에 작성된 태그와 1:1 매칭되는 DOM 객체 생성

브라우저 화면에 출력

소개

안녕하세요.

document

html

headbody

div(#intro)

div(.header)"" ""

h1

"소개"

"안녕하세요.""" "" img"" "" ""

div(.content) ""

br

브라우저가 웹 페이지를 처리하는 과정을 간단히 요약해서 살펴보면 다음과 같습니다.

01. 웹페이지 읽기

먼저 브라우저는 HTML 페이지를 읽습니다�

02. 파싱 단계

이어서 파싱(parsing) 단계를 거쳐 웹 페이지 내용을 해석하게 되는데 이때 여러분이 작성한 마크업 태그와 1:1 매칭

이 되는 DOM 클래스의 객체를 생성합니다� 이렇게 생성된 객체는 저마다의 고유 기능을 하게 됩니다�

03. 출력

마지막으로 웹브라우저는 생성한 DOM 객체를 가지고 여러분이 보고 있는 웹페이지 화면을 만들게 됩니다�

01� 02� 03�

2권_책.indb 18 2015-10-02 오후 5:06:50


여기서 ‘02. 파싱 단계’를 좀더 자세히 살펴보면, 웹브라우저가 HTML 페이지를 읽은 후 파싱 단계에서

<div>를 만나게 되면 HTMLDivElement라는 클래스의 인스턴스(객체)를 생성하고

<img> 태그를 만나면 HTMLImageElement 클래스의 인스턴스를 생성한다는 의미입니다.

정리해보면 HTML 페이지에 작성하는 마크업은 웹브라우저에게 알려주는 일종의 DOM 클래스의 메타

정보일 뿐이라는 것입니다. 브라우저는 이 마크업 태그와 1:1 매칭되는 DOM 클래스의 객체를 생성해 보

관하고 있게 됩니다. 이렇게 만들어진 DOM 객체는 웹브라우저만 사용하는 것은 아닙니다. 화면의 요소

를 다루기 위해 바로 여러분과 저 같은 개발자가 웹브라우저가 가지고 있는 DOM 객체에 접근해서 사용

하게 됩니다.

예를 들어 다음과 같이 jQuery 구문을 만들어 #target이라는 노드를 찾아 사용한다고 해보죠.

var $target = $("#target");

이때 이 구문의 정확한 의미는 브라우저가 파싱 단계에서 만들어 가지고 있는 자바스크립트 DOM 객체

중 #target이라는 이름을 가진 DOM 객체에 접근하는 의미와 같습니다.

자! 어떤가요? DOM과 HTML 페이지 사이에 이런 엄청난 비밀이 숨어 있었다는 것이 놀랍지 않나요?

그럼 다음으로 태그와 DOM 객체와의 관계를 좀더 자세히 알아보겠습니다.

02 _ DOM과 노드와의 관계

노드는 HTML 웹페이지 구성 요소의 가장 작은 단위입니다. 여러분이 자주 사용하는 <p>, <div>와 같은

태그뿐 아니라 주석까지 모두 노드에 해당합니다.

HTML 페이지의 <body>,<div>,<h1>,<img>

태그뿐만 아니라텍스트및 주석까지

모두 노드라 부릅니다.

<body> <div id="intro"> <div> class="header"> <h1>소개</div> </div>  <div class="content"> <img src="images/ch2.png"><br> 이런 텍스트 역시 노드의 일종입니다. </div> </div></body>

2권_책.indb 19 2015-10-02 오후 5:06:50


앞에서도 살펴본 것처럼 웹브라우저는 이런 노드로 가득 찬 웹페이지를 읽어 들여 해석한 후 각 노드와

1:1 대응하는 DOM 객체를 생성합니다.

DOM 객체가 생성되는 순서를 좀더 자세히 살펴보면, 웹브라우저는 가장 먼저 최상위에 해당하는 HT-

MLDocument 클래스의 객체를 생성합니다. 이후 생성하는 모든 DOM 객체는 HTMLDocument 객체

의 자식 객체로 만들어집니다. 즉 부모와 자식 간의 관계를 형성하며 일종의 트리 구조를 갖추게 됩니다.

아래처럼 말이죠.

document

html

headbody

div(#intro)

div(.header)"" ""

h1

"소개"

"안녕하세요.""" "" img"" "" ""br

div(.content) ""

HTMLDocument

HTMLHtmlElement

HTMLBodyElement

HTMLDivElement

Text Text

Text

Text

HTMLHeadElement

HTMLImageElement

HTMLHeadingElement

HTMLBRElement

사실 이 개념은 HTML 페이지뿐 아니라 XML 문서를 다룰 때도 그대로 적용됩니다.

HTML 페이지뿐만 아니라XML 파일도 DOM으로제어할 수 있기 때문에

<image_list>, <image> 등도노드라고 부릅니다.

<?xml version="1.0" encoding="utf-8"?><image_list> <image src="images/img1.png" /> <image src="images/img2.png" /> <image src="images/img3.png" /> <image src="images/img4.png" /> <image src="images/img5.png" /></image_list>

2권_책.indb 20 2015-10-02 오후 5:06:50


XML 파일의 <image_list> 등도 노드라고 하며, 브라우저에서 파싱한 HTML 페이지와 똑같은 트리 구조

로 DOM 객체가 만들어집니다.

document

image_list

image"" ""

Document

Element

Text Element Text

image ""

Element Text

image ""

Element Text

image ""

Element Text

image ""

Element Text

즉, HTML뿐 아니라 XML의 노드를 조작할 때도 DOM을 이용한다는 것입니다.

2권_책.indb 21 2015-10-02 오후 5:06:50


핵심 DOM 객체?

Lesson

05DOM은 여러 개의 객체로 구성돼 있는데요, 이번 레슨에서는 이 중에서 핵심적인 DOM 객체들을 선별

한 후 이들이 가진 기능을 자세히 알아보겠습니다. 이번 레슨을 학습하기 위해서는 객체의 개념이 반드시

필요합니다.

01 _ 핵심 DOM 객체 소개

앞에서 언급한 대로 DOM은 하나의 객체가 아니라 여러 개의 DOM 객체로 구성돼 있으며 각자 고유의

책임과 기능을 가지고 있습니다.

Node

Text

Attribute

ElementDocument

HTMLElementHTMLDocument

Node 객체에는 노드를 다루는기본 기능과 프로퍼티를 제공합니다. 노드를 탐색하고 조작하고 싶다면이 객체를 이용하세요.

HTML,XML 태그 요소의기본 기능과 프로퍼티를 제공합니다.속성과 이벤트를 제어하고 싶다면Element를 이용하세요.

Element 객체를 상속받은HTML 태그 요소 전용으로써HTML 태그 요소의 기본 기능과 프로퍼티를제공합니다.우리가 자주 이용하는 id,className,style 등이 이 객체에 존재합니다.

텍스트 노드,엘리먼트 노드,속성 노드를생성하고 싶다면 Document를 이용하세요~이곳엔 노드를 생성하는 팩토리 메서드로가득 차 있습니다.

속성을 다루는기능이있습니다.

텍스트를 다루는 기능이 있습니다.

Document 객체를 확장하여HTML용 프로퍼티와 메서드를추가한 객체입니다.친숙한 body가 이 객체의 프로퍼티이지요.

그럼 지금부터 DOM 동네에서 서로 조화롭게 살고 있는 객체 중 가장 핵심적인 객체를 만나 이들이 제공

하는 주요 기능과 프로퍼티를 직접 알아보겠습니다. 그리고 첫 만남이니만큼 다소 어려울 수 있으니 조금

씩 알아간다는 느낌으로 접근해 보겠습니다. 자! 가시죠.

2권_책.indb 22 2015-10-02 오후 5:06:50


02 _ Node 객체

노드란?

먼저 노드란? 앞에서 언급한 것처럼 문서를 이루는 모든 요소를 통합해서 부르는 용어입니다.

HTML 페이지의 <body>,<div>,<h1>,<img>

태그뿐만 아니라 텍스트및 주석까지 모두 노드라 부릅니다.

HTML 페이지 뿐만 아니라XML파일도 DOM으로

다룰 수 있기 때문에 <image_list>, <image> 등도 노드라고 부릅니다.



위의 이미지에서 확인할 수 있는 것처럼 < body> 태그 노드, 텍스트 노드, 주석 노드라고 부릅니다.

Node 객체란?

Node 객체는 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메서드가 정의돼 있는 Node 인터페이스

를 구현한 객체입니다. Node 객체에서 제공하는 기능을 이용하면 노드 타입을 파악하거나 부모, 형제 그

리고 자식 노드를 알아내서 접근하거나, 또는 자식 노드를 추가, 삭제, 교체할 수 있습니다.

좀더 자세히 설명하자면 Node 객체는 DOM 객체 가운데 가장 최상위 객체이자 모든 하위 노드 객체들

이 상속받는 객체입니다.

-노드타입을 알수 있는 속성-부모 노드에 접근할 수 있는 기능-형제 노드에 접근할 수 있는 기능-자식 노드에 접근할 수 있는 기능-자식 노드를 추가, 삭제, 교체할 수 있는 기능

NodeNode 객체에는

모든 DOM 객체들이기본으로 가지고 있어야 되는

기능과 속성이 있습니다.사람으로 비교하면

이름, 성별, 나이 등이 되겠죠?

2권_책.indb 23 2015-10-02 오후 5:06:51


이는 자바스크립트 클래스 상속처럼 모든 클래스가 공통으로 Object()라는 클래스를 모두 상속받는 경우

와 동일합니다. 핫! 정말 신기하지 않나요? DOM 객체에 객체지향 프로그래밍 개념이 적용돼 만들어졌

다니 말이지요. 클래스와 객체 그리고 객체지향 개념에 대해서는 5부와 6부에서 각각 자세히 배웁니다.

03 _ Element 객체

Element란?

Element는 노드 중 주석 노드와 텍스트 노드를 제외한 나머지 노드를 통합해서 부르는 용어입니다.

html페이지의 <body>, <div>, <h1>, <img>와 같은 태그들을

모두 통틀어서엘리먼트 노드라고 부릅니다.

XML의<image_list>, <image> 등도

엘리먼트 노드라고 부릅니다.



주의!주석 노드와 텍스트 노드는

엘리먼트 노드가아닙니다.

Element 객체란?



Node

-태그이름을 알 수 있는 속성-속성 제거 및 속성값을 구하고, 설정할 수 있는 기능-이벤트와 관련된 기능


Element

Element 객체에는Node 객체의 모든 기능을

모두 물려(상속)받기 때문에Node 객체기능 + Element 객체에 새롭게 추가된 기능까지 모두

이용할 수 있습니다.

상속

Element 객체 기능

2권_책.indb 24 2015-10-02 오후 5:06:51


Element 객체 역시 노드의 한 종류이며 Element 인터페이스를 구현한 객체입니다. 또, Element 객체

는 Node 객체의 자식이므로 Node 객체가 가지고 있는 기능을 모두 사용할 수도 있습니다. 여기에 추가

로 HTML과 XML의 태그 노드를 조작하기 위한 기본적인 프로퍼티와 메서드가 포함돼 있습니다.

Element 객체의 주요 기능으로는 태그 이름이 담긴 프로퍼티와 속성(Attribute)을 알아내고 설정하는

기능과 이벤트를 추가하거나 삭제하거나 발생시키는 기능이 있습니다.

04 _ HTMLElement 객체

HTMLElement란?

HTMLElement는 오직 HTML 문서에만 있는 노드를 통합해서 부르는 말입니다. 이는 여러분이 즐겨 사

용하는 HTML 태그와 동일합니다.

HTMLElement 객체에는 오직 HTML 문서 중<body>, <div>,<h1>과 같은 HTML 태그와 관련된

공통된 기능이 추가로 담겨져 있습니다. HTMLElement 객체는

XML 문서와는 관련이 전혀없답니다.



2권_책.indb 25 2015-10-02 오후 5:06:51


HTMLElement 객체란?


Node객체 기능들

Node


-태그이름을 알 수 있는 속성- 속성 제거 및 속성값을 구하고, 설정할 수 있는 기능- 이벤트와 관련된 기능

+Element

-ID, className 속성-오프셋 위치와 관련된 속성-마우스 이벤트와 관련된 기능-키보드 이벤트와 관련된 기능

-ID, className속성-오프셋 위치와 관련된 속성-마우스 이벤트와 관련된 기능-키보드 이벤트와 관련된 기능

HTMLElement

HTMLAnchorElement=<a>

HTMLBodyElement=<body>

HTMLDivElement=<div>

Element 객체에는Node 객체의 모든 기능을

모두 물려(상속)받기 때문에Node 객체 기능 + Element 객체에

새롭게 추가된 기능까지 모두 이용할 수 있습니다.

HTMLElement 객체에는Node 객체 기능 +

Element 객체 기능 +HTMLElement 객체에

새롭게 추가된 기능까지 모두사용할 수 있습니다.

상속

상속

Element 객체 기능

Element객체 기능들

Node객체 기능들

+

HTMLElement 객체 기능

상속

HTMLElement 객체에는 Element 객체의 기능 외에도 오직 HTML 페이지의 p, div 태그와 같은

HTML 태그에서만 쓸 수 있는 공통적인 속성과 기능이 포함돼 있습니다. 이곳에는 앞으로 여러분이 가

장 자주 사용하게 될 id와 className 프로퍼티가 정의돼 있습니다. 또, HTMLElement 객체는 HTML-

DivElement, HTMLImageElement, HTMLBodyElement와 같은 객체의 부모 객체이기도 합니다.

2권_책.indb 26 2015-10-02 오후 5:06:51

Documents

자바스크립트+jQuery 완전정복 스터디 2: jQuery편