웹접근성과 관련된 툴바를 사용하기 위하여 플러그 인을 열심히 다운로드 받았다.
web_developer-1.1.8-fx+sm.xpi
xpi 파일은 도대체 어떻게 사용하는거야? FireFox 폴더안에 카피해 넣어야 되나? 고민 고민...
파이어폭스 사용해서 다운로드를 하면 바로 설치창이 떠서 편리하게 플러그인 설치할 수 있지만,
Explore 인경우에는 저장이나 열기창이 뜬다.
일딴 파일을 다운받은 다음 확장자xpi를 FireFox에 Drag and Drop하시거나
해당 파일을 클릭하여 열리는 창에서
"목록에서 프로그램 선택(S)"을 통하여, 프로그램 선택창에서 FireFox를 선택하면된다.
다이내믹한 웹 표준 사이트를 위한 DOM 스크립트
(에이콘 웹 프로페셔널 시리즈 7)
기존의 자바스크립트 책과는 완전히 다릅니다!
마크업에서 자바스크립트를 깨끗이 분리하고 핵심 기능은 그대로 살리면서도 다이내믹한 웹을 만들 수 있는 새로운 발상! 웹 디자이너와 웹 개발자가 함께 보는 웹 표준 준수 자바스크립트 필독서.
웹 표준 기반의 멋진 DOM 스크립트 예제, 다이내믹한 웹사이트를 위한 고려 사항 등 한국어판 특별 부록 수록
목차
1장. 간단히 살펴보는 자바스크립트 역사 27
자바스크립트의 출현 28 문서 객체 모델(DOM)에 대해서 29 브라우저 업체 간 전쟁 30
DHTML은 모호한 용어 31 브라우저 간 비호환 문제 발생 31 표준의 중요성 인식 32
다른 분야에서의 표준 33 브라우저 전쟁 종전 선언 34웹 표준 시대의 개막 34
2장에서 다룰 내용 35
2장. 자바스크립트 문법 익히기 37
코드 작성 전에 알아야 할 점 38 문법 공부 40 명령문 41
주석 41 변수 43 데이터 형식 45
문자열 46 숫자 47 불린 값 48
배열 48 결합형 배열 51연산자 52
산술 연산자 52조건문 55비교 연산자 56
논리 연산자 57 반복문 59 while문 59
do...while문 60 for문 61 함수 62
변수 유효 영역 65 객체 66 네이티브 객체 68
호스트 객체 693장에서 다룰 내용 69
3장. 문서 객체 모델(DOM)이란? 71
D는 문서입니다 72
O는 객체입니다 72
M은 모델입니다 73
노드 76
요소 노드 76
텍스트 노드 77
속성 노드 77
CSS와의 관계 78
getElementById 81
getElementsByTagName 83
속성 다루기 85
getAttribute 85
setAttribute 87
4장에서 다룰 내용 89
4장. 자바스크립트로 만드는 온라인 사진첩 91
마크업 코드 작성하기 92
자바스크립트 작성하기 95
DOM 전환 97
함수 완성 97
자바스크립트 적용하기 98
이벤트 핸들러 99
함수 확장 101
childNodes 프로퍼티 102
nodeType 프로퍼티 103
마크업에 설명문 요소 추가 104
설명문을 자바스크립트로 바꾸기 105
nodeValue 프로퍼티 106
firstChild와 lastChild 107
nodeValue로 설명 추가하기 108
5장에서 다룰 내용 112
5장. 꼭 알아야 할 핵심 기본기 113
자바스크립트에 대한 오해 114
문제점 많은 코드의 전파 115
플래시 사례 116
꼭 필요한지 철저히 검토하기 117
단계적 기능 축소 118
javascript: 슈도 프로토콜 119
인라인 이벤트 핸들러 120
사용자 배려 120
CSS 기술의 교훈 122
단계적 기능 향상 123
스크립트 분리 125
하위 호환성 127
브라우저 검사 130
6장에서 다룰 내용 130
6장. 사진첩 기능 개선하기 133
복습 134
단계적 기능 축소가 가능한가? 135
스크립트를 분리했는가? 136
이벤트 핸들러 추가 138
점검 사항 138
변수 지정하기 141
반복 구문 만들기 142
동작 변경 143
마무리 144
작업 나누기 145
검증 코드 작성 147
미세 조정 151
키보드 접근법 153
onkeypress 다시 보기 155
CSS와 지시자 공유하기 157
DOM 코어와 HTML-DOM 161
7장에서 다룰 내용 163
7장. 실행 시에 마크업 코드 생성하기 165
d0cument.write 166
innerHTML 169
찬반 양론 172
DOM 메소드 173
createElement 173
appendChild 175
createTextNode 176
좀더 복잡한 조합 179
사진첩 다시 살펴보기 181
insertBefore 184
insertAfter 함수 만들기 185
insertAfter 함수 사용 187
사진첩 마무리 188
요약 193
8장에서 다룰 내용 194
8장. 의미가 살도록 컨텐츠 개선하기 195
하면 안 되는 것 196
속성을 화면에 표시하기 197
내용 198
HTML이냐? XHTML이냐? 199
마크업 200
CSS 202
자바스크립트 203
축약어 목록 표시 203
displayAbbreviations 함수 만들기 204
마크업 생성 207
웹 브라우저 불발탄 215
인용구 표시 219
displayCitations 함수 만들기 220
접근키 표시 227
마크업 227
자바스크립트 229
요약 231
9장에서 다룰 내용 232
9장. CSS와 DOM 연동하기 233
웹 문서의 세 가지 요소 234
구조 234
표현 235
동작 235
세 가지 요소 분리하기 236
style 프로퍼티 236
스타일 가져오기 238
인라인 스타일만 동작 243
스타일 지정하기 245
DOM을 이용한 스타일 지정이 유용한 사례 247
특정 노드의 모양을 꾸밀 경우 247
반복되는 스타일일 경우 252
이벤트 처리 결과를 보여주는 경우 257
className 260
함수 추상화 264
10장에서 다룰 내용 265
10장. 애니메이션 슬라이드쇼 만들기 267
애니메이션이란? 268
위치 268
시간 271
setTimeout 272
동작 바꾸기 273
재활용 함수 만들기 276
애니메이션 실전 286
요구 사항 286
해결 방법 288
CSS 289
자바스크립트 292
변수 영역 문제 해결 296
부드럽게 만들기 299
마지막 손질 303
마크업 만들기 305
11장에서 다룰 내용 309
11장. 총정리: 더블트랙 밴드 웹사이트 제작 311
소개 312
기본 초안 312
사이트 구조 313
웹 문서 구조 314
디자인 315
CSS 316
색상 318
레이아웃 320
글꼴 322
마크업 324
자바스크립트 325
문서 하이라이트 327
슬라이드 쇼 332
내부 네비게이션 338
자바스크립트 사진첩 343
테이블 기능 향상 347
폼 기능 향상 353
레이블 355
기본 값 356
폼 유효성 확인 360
요약 364
12장에서 다룰 내용 365
12장. DOM 스크립트의 미래 367
웹이란? 368 웹 브라우저 369 파이어폭스 등장 369 웹 디자이너 371
삼각 의자 372 DOM 스크립트 태스크 포스 373 Ajax 374 XMLHttpRequest 객체 376
Ajax 기반 서비스 예제 378 Ajax에 대한 도전 381 Ajax 기능 바르게 쓰기 382 Hijax 383
Ajax의 미래 385 웹 애플리케이션 385 마지막 부탁 387
부록 Ⅰ. 유용한 DOM 메소드와 프로퍼티 389
메소드 390 노드 만들기 390 createElement 390 createTextNode 392 노드 복사하기 393
cloneNode 393 노드 추가 395 appendChild 395 insertBefore 396 노드 삭제 397
removeChild 398 노드 바꾸기 398 replaceChild 398 노드 값 변경 399 setAttribute 400
노드 찾기 400 getAttribute 401 getElementById 401 getElementsByTagName 402
hasChildNodes 403 프로퍼티 404 노드 프로퍼티 404 nodeName 404nodeType 405
nodeValue 406 노드 내부 구조 보기 407
childNodes 407
firstChild 408
lastChild 408
nextSibling 409
parentNode 409
previousSibling 410
[한국어판 특별 부록]
부록 Ⅱ. 웹 표준 기반의 멋진 DOM 스크립트 예제 - 윤석찬 411
Lightbox2, 슬라이드형 사진첩 412 Sortable Table, 다이내믹 테이블 정렬 415 그 밖에 좋은 예제 찾아보기 419
롤 오버 이미지 기능 419 라운드 박스에서 불필요한 마크업 없애기 420 DHTMLgoodies.com 420
[한국어판 특별 부록]
부록 III. 다이내믹한 웹사이트를 위한 고려 사항 - 강규영 423
사용성 424 즉시 편집 UI 425 사용성은 디자이너가 고민해야 하는 것 아닐까? 428
뒤로가기 버튼과 즐겨찾기 429 협업을 위한 도구와 실천법 431 참고자료 433
실전 웹 표준 가이드
The Practice Guide for Development based on Web Standards
2005.12
한국소프트웨어진흥원
목차
목차 ························································································································································ 3
그림 목차················································································································································ 6
저자 소개················································································································································ 9
서론 ························································································································································ 10
이 가이드의 목적 ································································································································· 11
웹 표준에 대한 오해····························································································································· 15
웹 표준이란 무엇인가?························································································································ 16
웹 표준 스펙 소개 ······························································································································· 18
웹 표준 홈페이지 방법론 ···················································································································· 22
우리 나라 웹 표준 현실 및 과제 ········································································································ 29
실전 XHTML 가이드 ····························································································································35
XTHML 소개········································································································································· 36
XTHML이란 무엇인가? ······················································································································ 36
왜 XTHML을 사용해야 하는가?········································································································ 37
XTHML 문서 구조 ······························································································································ 38
XHTML 일반 문법 준수 ····················································································································· 40
구조적 XHTML 사용 방법··················································································································· 43
잘못 사용하고 있는 태그 ··················································································································· 43
그룹 요소: div, span··························································································································· 45
표제(Heading) ···································································································································· 45
문단(paragraph)·································································································································· 45
구문(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)······································ 46
형식을 가지고 있는 컨텐츠 (pre) ····································································································· 47
추가 및 삭제(ins, del) ························································································································ 47
목록 (ul, ol, dl)····································································································································· 47
실전 CSS 레이아웃·······························································································································49
CSS 제대로 사용하기 ························································································································· 50
CSS 개념 및 소개································································································································· 52
CSS(Cascading Style Sheet)란 무엇인가? ·················································································· 52
CSS 선택자(Selector)························································································································· 53
CSS 선언 방법 ····································································································································· 64
CSS 적용의 체크 포인트 4가지 ········································································································ 65
CSS 레이아웃(LAYOUT) 기초 ········································································································· 69
테이블 레이아웃 ································································································································· 69
CSS 레이아웃이란?···························································································································· 69
기본 레이아웃 ···································································································································· 71
컬럼형 레이아웃 ································································································································· 76
목록(List)············································································································································ 80
박스 모델(Box Model)························································································································ 82
테이블(Tables)···································································································································· 89
CSS Hack············································································································································ 92
실전 예제를 통한 CSS 레이아웃 ··········································································································· 94
전체적인 구조와 마크업 ···················································································································· 94
상단 부분(#head) ······························································································································· 96
좌측 영역 (#sub)································································································································ 100
본문 영역 (#body) ····························································································································· 104
하단 영역 (#foot)······························································································································· 106
완료····················································································································································· 108
고급 CSS 레이 아웃 ······························································································································ 109
CSS를 이용한 디자인 팁 ··················································································································· 109
CSS 개발 및 검증 도구 ····················································································································· 114
실전 DOM/Script 가이드 ···············································································121
표준 DOM 기반 개발 ···························································································································· 122
W3C DOM vs. MS DOM···················································································································· 122
DOM 기본 기능 ································································································································· 124
DOM 호환 기능 ································································································································· 127
이벤트(Events) 기능 ··························································································································· 130
XML 기능 ··········································································································································· 132
표준 JAVASCRIPT 사용 방법 ················································································································· 135
ECMAscript vs. Jscript?····················································································································· 135
스크립트 개발시 유의점 ···················································································································· 136
디버깅 및 품질 관리 ······························································································································ 142
기본 디버깅 방법론 ··························································································································· 142
디버깅 도구 이용 ······························································································································· 143
올바른 플러그인(PLUGIN) 사용 ············································································································· 148
외부 객체 이용 방법·························································································································· 148
ActiveX와 대안 Plugin 기술 ············································································································· 151
브라우저 내장 기술 ··························································································································· 155
웹 어플리케이션 표준화 동향 ··········································································································· 157
실전 표준 웹 프로그래밍··················································································161
표준 MIME 타입 설정··························································································································· 162
Apache에서 설정 방법 ······················································································································· 164
IIS에서 설정 방법 ······························································································································ 166
PHP에서 설정 방법 ··························································································································· 167
Apache Tomcat에서 설정 방법 ·········································································································· 167
Perl/Python 등으로 쓴 CGI·············································································································· 169
표준 문자 인코딩 지정··························································································································· 170
문서에서 지정 ···································································································································· 172
웹 서버 프로그램에서 지정 ··············································································································· 174
참고 문헌················································································································································ 178
실전 웹 표준 개발 프로세스··············································································180
기존 웹 개발 프로세스··························································································································· 181
현재 프로세스 소개(Waterfall 방식)································································································· 181
역할을 중심으로 한 개발 공정 ········································································································· 186
개선된 모델(퍼블리셔 중심) ·············································································································· 191
새로운 개발 프로세스 ···························································································································· 194
기획/분석/회의 ···································································································································· 194
기획자 공정 ········································································································································ 195
퍼블리셔 공정 ···································································································································· 198
디자이너 공정 ···································································································································· 208
프로그래머 공정 ································································································································· 209
맺음말····················································································································································· 212
부록. 웹 표준 브라우저 호환표 ··········································································213
웹 브라우저 현황 ··································································································································· 214
인터넷 익스플로러7 ··························································································································· 214
모질라(Mozilla) 계열 웹브라우저 : 파이어폭스··············································································· 215
오페라 브라우저 ································································································································· 216
사파리 ················································································································································· 217
장애인 웹 접근성 체크 리스트 ·············································································································· 219
참고 사이트 ············································································································································ 222
각 웹 표준 브라우저별 호환 여부 ···································································································· 222
국내 웹 표준 커뮤니티 ······················································································································ 222
| 한국형 웹 콘텐츠 접근성 지침 2.0(TTAK.OT-10.0003/R1, 2009년 12월 22일) (2) | 2009.12.30 |
|---|---|
| [지침]전자정부 웹호환성 준수지침(2009, 행정안전부) (0) | 2009.08.31 |
| 웹 콘텐츠(의) 접근성(을 높이기 위한 제작) 지침 1.0 (0) | 2009.06.17 |
| [지침]전자정부 웹표준 준수지침(행정안정부, 2008.04) (0) | 2009.06.17 |
| 공공기관 홈페이지 개인정보 노출방지 가이드라인(행정안정부, 2009.02) (1) | 2009.06.17 |
DHTML ( Dynamic HTML )
"DHTML은 HTML과 CSS, JavaScript의 결합 언어이다."
HTML, CSS, Javascript를 종합적으로 사용한다.
그러나 어느 정도의 JavaScript나 이들 언어를 사용하는 것이 DHTML인가는 하는데 따른 것은 아니다. 좀 더 정확하게 정의한다면
"DHTML은 브라우저가 가지고 있는 여러 기능으로 웹 페이지를 좀 더 탄력적(dynamic)으로 만들 수 있게하는 결합 언어이다."
DHTML는 스크립팅 언어(JavaScript 같은)가 아니며, 단순히 브라우저를 더 탄력적으로 만드는 브라우저의 보완된 기능이다. 그래서 실제적으로 배우게 되는 것은 DHTML 자체가 아니라 DHTML를 사용하는데 필요한 문법인 것이다. 이는 전적으로 사용자측(client side)에서 적용되는 기술로서, 서버의 도움 없이, 브라우저의 기능에 의존하는 것이다. 그래서 이를 '브라우저 자체의 성능에 의존하여 탄력적으로 웹 페이지를 만드는 기술'이라고도 정의 할 수 있다.
참고
DHTML의 일반적인 소개(http://trio.co.kr/webrefer/dhtml/general.html)
DOM( 문서 오브젝트 모델 : Document Object Model )이란?
DOM은 클라이언트 애플리케이션이 문서의 컨텐츠를 수정할 수 있도록 XML 파서(parser)에서 사용하는 표준 객체 인터페이스이다.
이 인터페이스에서는 계층 트리 구조의 원 문서에서 생성된 모든 정보에 접근할 수 있다.
참고
현재 시점에서 바라보면, HTML 에서 XHML로 넘어가는 과정에 있는 것으로 보여진다.
아직까지 HTML4.01을 기본으로 사용하고 있는 사이트 들이 많이 있으며,
내가 작업한 대부분의 사이트 들도 HTML4.01의 표준을 따르고자 노력 하였다.
그렇다면 XHTML의 장접이 무엇일까?
보통 3가지 정도의 장점을 이야기 한다.
빠른 데이터 처리와 안정적 브라우저 동작
XHTML은 HTML 보다 엄격한 문법을 유지 하기 때문에 오히려 초보자들이 만들기에는 편한 것이 많았다.
테그를 한두개쯤 닫지 않아도 브라우저가 알아서 맞추어 주기 때문에...
하지만 XHTML에서는 종료 태크의 생략을 인정하지 않는다.
이처럼 엄격한 서식으로 마크업하면 데이터 처리가 고속화 되고 브라우저에 종속적이지 않는 콘텐츠를 만들 수 있다.
데이터 재사용과 정보공유 촉진
XHTML로 작성된 페이지는 필요한 부분의 데이터만 읽어 들이는게 가능하여 XSLT에 의한 문서 변환이 가능하다.
네임스페이스 이용과 다양한 기기에 대응
MathML과 SVG 등의 XML 어플리케이션 삽이이 가능하기 때문에 XML 어플리케이션을 이용하는 때에도 XHTML 자체를 변경할 필요가 없다.
1250576097_web-standard-guide-2005.zip