Chapter 1. 자바스크립트(JavaScript) Lesson 1. 자바스크립트 살짝 찍어보기 ... 48 1. 자바스크립트(JavaScript) 소개 ... 49 2. 자바스크립트의 역사 ... 49 3. 자바스크립트의 기본 ... 50 3.1 HTML 문서에 자바스크립트를 넣는 방법 ... 51 3.2 필요한 Software ... 51 4. 자바스크립트의 특성 ... 52 5. 자바스크립트의 활용분야 ... 52 6. HTML 문서에 자바스크립트 구겨넣기 ... 53 Lesson 2. 자바스크립트(JavaScript)의 기본 주무르기 ... 56 1. 경고 메시지 나타내기 ... 56 2. 확인 대화 상자 나타내기 ... 59 3. 프롬프트 대화상자로 이용자의 이름 나타내기 ... 64 Lesson 3. 다이나믹한 효과내기 ... 68 1. 이용자의 윈도우 스크롤하기 ... 69 2. 자동으로 웹 페이지를 스크롤하기 ... 72 3. 상태바에 메시지 디스플레이하기 ... 75 4. 마우스 움직임에 동적 반응하기 ... 78 5. 몇 초 후 자동으로 다른 웹 페이지로 이동하기 ... 82 6. 버튼 하나로 배경색 바꿔주기 ... 85 7. 흔들리는 웹 브라우저 ... 89 8. 오른쪽 마우스 버튼을 못쓰게 하기 ... 93 Lesson 4. 이미지로 효과내기 ... 96 1. 이미지를 랜덤하게(Random) 바꿔주기 ... 96 2. 이미지 버튼 만들기 ... 100 3. CD 타이틀에 효과주기 ... 103 Lesson 5. 웹 브라우저 이용하기 ... 108 1. 이용자의 웹 브라우저 확인하기 ... 108 2. 이전의 URL 나타내기 ... 111 3. 새로운 윈도우 열기 ... 114 4. 새로운 윈도우 닫기 ... 117 5. 쿠키(Cookie)로 새 윈도우 다시 안 뜨게 하기 ... 121 6. 쉽게 즐겨찾기에 추가하기 ... 126 7. 프린트 기능 추가하기 ... 128 Lesson 6. 양식(FORM) 나타내기 ... 130 1. FORM에 상태 디스플레이하기 ... 130 2. 움직이는 메시지 ... 135 3. 웹 페이지가 로드되는 동안 메시지 나타내기 ... 139 4. 풀다운(pulldown) 메뉴 만들기 ... 143 5. 필요할 때만 보이는 텍스트 입력 박스 ... 146 6. 주민등록번호 확인 ... 150 7. 쿠키(Cookie)로 이용자의 ID 기억하기 ... 154 Lesson 7. 날짜(date) 관련 정보 표현하기 ... 160 1. 현재의 날짜와 시간을 한 번에 디스플레이하기 ... 160 2. 현재의 날짜와 시간 디스플레이하기 ... 163 3. 현재의 HTML 문서의 제목과 최종 수정한 날짜 디스플레이하기 ... 165 Lesson 8. 자바스크립트 주무르기 ... 168 1. 값(Values) ... 168 1.1 형변환 ... 169 2. 변수명(Variable Name) ... 169 2.1 자바스크립트 키워드 ... 170 2.2 변수의 선언 ... 170 3. Literals ... 171 3.1 정수형(Integers) ... 171 3.2 부동소수점형(Floating Point) ... 171 3.3 논리형(Boolean) ... 171 3.4 문자열형(String) ... 171 3.5 특수문자(Special Characters) ... 172 4. 연산자(Operators) ... 172 4.1 산술 연산자(Arithmetic Operators) ... 173 4.2 증가, 증감 연산자 ... 173 4.3 비트 단위 연산자 ... 173 4.4 비트 단위 Shift 연산자 ... 173 4.5 논리 연산자(Logical Operators) ... 173 4.6 비교 연산자(Comparison Operators) ... 174 4.7 문자열 연산자(String Operators) ... 174 4.8 연산자 우선 순위(Operator Precedence) ... 175 5. 표현식(Expression) ... 175 5.1 조건 표현식(Conditional Expressions) ... 176 5.2 대입 연산자(Assignment Operators) ... 176 6. 기본 구문(Basic Statement) ... 177 6.1 조건문(if 문) ... 178 6.2 반복문(loop statement) ... 178 6.3 객체(object) 관련문 ... 182 6.4 주석문 ... 184 7. JavaScript Object ... 184 7.1 Object ... 184 7.2 Built-in Object and Function ... 189 7.3 HTML Object ... 191 8. 마우스 이벤트에 따라 변하는 그림 만들기 ... 192 8.1 Image Object ... 192 8.2 마우스 이벤트에 따라 이미지 바꾸기 ... 193 9. LiveConnect ... 195 9.1 JavaScript To JAVA 통신 ... 199 9.2 JavaScript로 Plug-in 제어하기 ... 201 10. Cookie와 JavaScript ... 201 10.1 Cookie란? ... 201 10.2 Cookie의 활용 ... 202 10.3 JavaScript Cookie ... 204 Chapter 2. CSS(Cascading Style Sheets) Lesson 9. CSS(Cascading Style Sheets) 맛보기 ... 208 1. 스타일 시트 ... 208 1.1 CSS는 선택이 아닌 필수!(HTML Design을 위해서 CSS를 어떻게 활용할 것인가?) ... 209 1.2 얼마든지 재활용이 가능한 마스터 템플리트(Master Templates) ... 210 1.3 CSS를 제대로 지원하지 않는 웹 브라우저를 위한 고려 ... 210 2. 기본적인 사용법 ... 211 3. 스타일 적용 대상 지정 ... 212 4. 단위에 대해서 ... 214 5. 색 지정 방법 ... 215 Lesson 10. CSS(Cascading Style Sheets) 기본 익히기 ... 216 1. 스타일의 정의하기 ... 216 1.1 LINKED STYLE SHEET ... 216 1.2 EMBEDDED STYLE SHEET ... 218 1.3 INLINE STYLES ... 221 2. 스타일의 그룹화 ... 222 3. 패턴별 스타일의 지정과 적용 ... 224 3.1 태그와 키워드로 스타일의 지정 ... 224 3.2 키워드로 스타일의 저정과 적용 ... 225 4. 주석문 ... 227 5. 범위 안에서 스타일 지정 ... 228 Lesson 11. 폰트와 텍스트(Font and Text)에 스타일 입히기 ... 232 1. 폰트 지정 ... 232 2. 계통적인 패밀리에 의한 폰트 지정 ... 234 3. 폰트의 크기 지정 ... 235 4. 폰트를 두껍게(BOLD) 지정 ... 237 5. 폰트를 이탤릭체로 스타일 지정 ... 238 6. 폰트와 관련된 스타일의 그룹화 ... 239 7. 텍스트의 줄 간격 지정 ... 240 8. 텍스트에 선 그려주기 ... 241 9. 텍스트 정렬하기 ... 242 10. 텍스트의 들여 쓰기 ... 243 11. 문자의 간격 지정 ... 244 Lesson 12. 색과 배경 이미지에 스타일 입히기 ... 246 1. 색 지정 ... 246 2. 배경색 지정 ... 250 3. 배경에 이미지 지정 ... 251 4. 배경 이미지의 반복 지정 ... 252 4.1 repeat의 경우 ... 252 4.2 no-repeat의 경우 ... 253 4.3 repeat-x의 경우 ... 254 4.4 repeat-y의 경우 ... 255 5. 배경 이미지의 스크롤 지정 ... 256 5.1 fixed의 경우 ... 257 5.2 scroll의 경우 ... 258 6. 배경 이미지의 위치 지정 ... 259 7. 이미지와 함께 텍스트의 세로 위치 지정 ... 262 Lesson 13. 외곽선(Box)에 스타일 입히기 ... 264 1. 외곽선의 굵기 지정 ... 264 2. 외곽선과 내용간의 간격 지정 ... 266 3. 외곽선의 색 지정 ... 267 4. 외곽선의 형태 지정 ... 269 Lesson 14. 레이아웃(Layout)에 스타일 입히기 ... 272 1. 리스트의 기호나 형식 지정 ... 272 2. 여백 지정하기 ... 276 3. 요소별 배치 지정 ... 277 4. 요소별 삽입 해제 지정 ... 279 5. 위치 지정하기 ... 280 6. 겹치는 순서 정하기 ... 282 7. 텍스트 겹치기 ... 282 Lesson 15. 스타일로 나만의 특별한 효과주기 ... 286 1. 마우스의 포인터 모양 지정 ... 286 1.1 마우스의 포인터 모양 지정 옵션 ... 288 2. 링크의 스타일 지정 ... 289 3. 링크되는 부분의 밑줄 없애기 ... 291 4. 인쇄시 페이지 바꿈 지정 ... 292 5. 탭(Tab)으로 이동하는 순서 지정 ... 293 Chapter 3. DHTML(Dynamic HTML) Lesson 16. DHTML을 만져보자 ... 297 1. DHTML(Dynamic HTML)이란? ... 298 1.1 기존 기술들의 활용 ... 299 1.2 Dynamic HTML(DHTML) ... 300 1.3 보다 더 매력적인 사이트 구현을 위한 DHTML ... 301 2. DHTML의 특징 ... 301 2.1 객체 사용시의 다양한 옵션 ... 301 2.2 기능이 뛰어난 멀티미디어와 레이아웃 ... 302 2.3 서버 로드가 줄어든다 ... 302 2.4 사용이 좀더 쉽다 ... 302 3. DHTML 표준 ... 302 3.1 Microsoft Internet Explorer ... 303 3.2 Metscape Communicator ... 303 Lesson 17. 바로 써먹는 DHTML ... 304 1. 그림자 효과 만들기 ... 304 2. 레이어(Layer)로 그림자 효과 만들기 ... 306 Lesson 18. 텍스트 팁(Text Tip)으로 표현하기 ... 310 1. 텍스트 팁(Text Tip) 만들기 ... 310 2. 움직이는 텍스트 팁(Text Tip) 만들기 ... 313 3. 흘러가는 텍스트 팁(Text Tip) 만들기 ... 318 4. 테이블을 이용하여 움직이는 텍스트 팁(Text Tip) 만들기 ... 321 5. 다이나믹한 텍스트 팁(Text Tip) 만들기 ... 325 Lesson 19. 텍스트와 색으로 표현하기 ... 332 1. 이벤트로 텍스트의 색깔 바꾸기 ... 332 2. 이벤트로 텍스트의 배경색 바꾸기 ... 335 3. 이벤트로 텍스트의 폰트 바꾸기 ... 337 4. 색이 바뀌는 버튼 만들기 ... 340 Lesson 20. 다양한 메뉴 나타내기 ... 344 1. 이미지 서서히 나타나게 하기 ... 344 2. ActiveX로 이미지 돌리기 ... 349 3. 보더 레이어 애니메이션 만들기 ... 352 Lesson 21. 다양한 메뉴 나타내기 ... 358 1. 다이나믹한 메뉴 만들기 ... 358 2. 책갈피 탭으로 메뉴 표현하기 ... 364 3. 투명한 레이어 메뉴 만들기 ... 369 Lesson 22. 특수효과 내기 ... 374 1. 타이핑 텍스트 만들기 ... 374 2. 타이핑 텍스트 응용하기 ... 380 3. 서서히 변하는 멀티미디어 배너 만들기 ... 384 4. 맘대로 옮기는 공지 박스 만들기 ... 388 Lesson 23. 게임을 만들기 ... 392 1. 비행기 게임 팰콘(Falcon) 즐기기 ... 393 2. 블록 깨기(Hard Block) ... 394 3. 비행기 게임 플랜커(Flanker) 즐기기 ... 396 4. 자동차 게임 아트런(Art Run)으로 달리기 ... 398 5. 슈퍼마리오(Super Mario) 즐기기 ... 400 6. 자동차로 장애물을 헤쳐나가자(Gymhana) ... 402 7. 테트리스로 스트레스 풀기 ... 404 8. 스페이스 파이어(Space Fire) ... 406 Appendix : HTML의 기본, 태그(TAG) 1. WWW란? ... 410 2. 홈페이지 ... 410 3. HTML이란? ... 410 4. 브라우저 ... 410 5. URL ... 410 Lesson A. HTML 태그 ... 411 1. 시작 태그와 종료 태그 ... 411 2. HTML문서의 기본 구조 ... 411 3. HTML문서의 시작과 종료 ... 411 4. HTML문서의 머리 부분 ... 412 5. HTML문서의 타이틀 ... 412 6. HTML문서의 몸통 부분 ... 414 6-1. 〈BODY〉태그에 들어가는 옵션 ... 414 7. 주석 ... 416 8. 문서의 제목 ... 418 8-1. 제목의 정렬 ... 418 9. 글자의 크기 ... 419 10. 글자의 상태 크기 ... 420 11. 기본 글자의 크기 지정 ... 420 12. 글자의 색 지정 ... 421 13. 글자의 글꼴 지정 ... 422 14. 줄바꿈 ... 422 15. 줄바꿈 금지 ... 423 16. 예약 줄바꿈 ... 424 17. 단락 ... 425 18. 인용 ... 426 19. 괘선 ... 427 20. 입력한대로 보여주기 ... 427 21. HTML 소스까지 그대로 보여주기 ... 428 22. 가운데 정렬 ... 429 23. 문단의 정렬 ... 429 24. 깜박거림 ... 430 25. 물리적 스타일 태그 ... 431 25.1 물리적 스타일 태그 ... 431 26. 논리적 스타일 태그 ... 433 26.1 논리적 스타일 태그 ... 433 27. 주소 지정 ... 435 28. 특수 문자 ... 437 29. 공백 문자 ... 438 30. 메타(META) ... 438 30.1 자동으로 이동하기 ... 439 30.2 언어를 지정 ... 441 30.3 검색 엔진에 사용하기 ... 442 30.4 웹 페이지 작성자 이름 지정하기 ... 443 31. 리스트 ... 443 31.1 리스트 종류 ... 443 31.2 용어 리스트 ... 443 31.3 줄바꿈이 없는 용어 리스트 ... 444 31.4 번호가 없는 리스트 ... 445 31.5 번호가 있는 리스트 ... 446 31.6 메뉴 리스트 ... 448 31.7 디렉토리 리스트 ... 449 32. 이미지 삽입 ... 450 32.1 이미지의 문자 위치 ... 450 32.2 이미지의 위치 ... 451 32.3 이미지의 여백주기 ... 452 32.4 이미지의 크기조절 ... 453 32.5 이미지의 테두리선 ... 454 33. HTML문서의 연결(링크) ... 454 33.1 기본 링크 지정(BASE LINK) ... 455 33.2 이미지로 링크 ... 456 33.3 특정 위치로 링크 ... 457 33.4 HTML 소스 보여주기 ... 459 34. 이미지 맵 ... 460 34.1 이미지 맵을 지정하는 영역의 링크 모양이 사각형일 경우 ... 461 34.2 이미지 맵을 지정하는 영역의 링크 모양이 원형일 경우 ... 461 34.3 이미지 맵을 지정하는 영역의 링크 모양이 다각형일 경우 ... 461 Lesson B. 테이블(TABLE) ... 468 1. 테이블의 선언 ... 468 2. 행의 정의 ... 469 3. 셀 만들기 ... 470 4. 테이블의 헤더 ... 471 5. 빈 셀 만들기 ... 471 6. 셀 합치기 ... 472 6.1 행의 셀 합치기 ... 473 6.2 열의 셀 합치기 ... 473 7. 제목넣기 ... 474 8. 테이블의 정렬 ... 476 8.1 테이블을 왼쪽과 오른쪽에 정렬하기 ... 476 8.2 테이블을 가운데로 정렬하기 ... 476 9. 테이블 테두리선의 두께 조절 ... 477 10. 테이블에 여백 넣기 ... 478 10.1 셀과 셀 사이에 여백주기 ... 478 10.2 문자와 셀 사이의 여백주기 ... 479 11. 테이블의 크기 조절하기 ... 480 11.1 테이블의 가로폭 조절 ... 480 11.2 테이블의 세로폭(높이) 조절 ... 481 12. 테이블의 셀 별로 크기 조절하기 ... 482 12.1 가로폭의 크기 조절하기 ... 482 12.2 세로폭(높이)의 크기 조절하기 ... 482 13. 문자 위치 지정하기 ... 484 13.1 좌우 정렬하기 ... 484 13.2 상하 정렬하기 ... 485 14. 테이블 안에 색깔 넣기 ... 486 15. 테이블 안에 이미지 넣기 ... 489 16. 셀 안에서 줄바꿈 금지 ... 490 17. 테두리선을 지정하기 ... 491 Lesson C. 프레임(FRAME) ... 493 1. 프레임의 기본 구조 ... 493 2. 프레임의 지정 ... 494 3. 세로 분할 ... 494 4. 가로 분할 ... 495 5. 세로와 가로 복합 분할 ... 497 6. 프레임의 크기 변경 금지 ... 498 7. 스크롤 바 ... 500 8. 프레임의 여백 ... 503 9. 프레임의 테두리선 없애기 ... 504 10. 프레임을 지원하지 않는 웹 브라우저 ... 506 11. 타겟(Target) 지정하기 ... 507 12. 특수한 타겟 이름 ... 508 12.1 TARGET＝'_blank' ... 508 12.2 TARGET＝'_self' ... 509 12.3 TARGET＝'_top' ... 511 12.4 TARGET＝'_parent' ... 512