머리말 ... 4 부록 CD 활용하기 ... 6 이 책의 특징 ... 8 이 책의 구성 ... 9 HTML+JavaScript+CSS／DOM 학습 효과를 2배로 ... 10 홈페이지 강좌 사이트 소개 ... 12 Part 1. HTML Chapter 1. HTML이란? ... 28 1. HTML로 무엇을 할 수 있는가? ... 29 2. HTML 특징 ... 29 1. HTML 문서의 특징 ... 29 2. HTML 태그의 특징 ... 30 3. HTML 구성요소 및 기본 골격 ... 32 1. 구성요소 ... 32 2. 기본 골격 ... 33 4. HTML 문서 만들기 ... 34 1. HTML 저작도구(에디터) ... 34 2. HTML 문서 브라우저에서 확인하기 ... 35 3. HTML 문서 작성하기 ... 35 Chapter 2. HTML 제대로 알고 사용하기 ... 40 1. HTML 기본 태그 ... 40 1. 〈HTML〉 ... 40 2. 〈HEAD〉 ... 43 3. 〈BODY〉 ... 58 4. 주석 지정하기 ... 71 5. 주소 삽입하기 ... 72 2. 글자 관련된 태그 익히기 ... 74 1. 글자 크기 변경 ... 74 2. 글자 모양 지정 ... 85 3. 이스케이프 시퀀스(Escape Sequence) ... 95 4. 동적인 글자 지정하기 ... 99 3. 문단 모양 관련된 태그 ... 109 1. 줄 바꾸기 및 문단 나누기 ... 109 2. 미리 정형화된 문단 모양 지정하기 ... 115 3. 인용문 지정하기 ... 116 4. 정렬하기 ... 118 5. 선 그리기 ... 121 4. 리스트 관련 태그 ... 126 1. 순서 없는 리스트 작성 ... 126 2. 순서 있는 리스트 작성 ... 128 3. 용어 정의 리스트 ... 134 4. 메뉴와 디렉토리 리스트 ... 135 5. 리스트 안에 리스트 만들기 ... 136 5. 이미지 관련 태그 ... 142 1. 이미지 넣기 ... 142 2. 이미지 맵 만들기 ... 155 6. 링크 관련 태그 ... 161 1. 하이퍼링크 만들기 ... 161 2. 텍스트나 이미지에 링크 설정하기 ... 162 3. 동일 문서 내에서 링크 설정하기 ... 163 4. 다른 문서의 특정 위치로 연결하기 ... 166 5. 전자메일 연결하기 ... 170 6. FTP 사이트에 연결하기 ... 171 7. 넷미팅으로 전화 걸기 ... 173 7. 표 관련 태그 ... 175 1. 〈TABLE〉 ... 175 2. 〈TR〉 ... 186 3. 〈CAPTION〉 ... 188 4. 〈TH／TD〉 ... 191 8. 멀티미디어 관련 태그 ... 210 1. 사운드 삽입하기 ... 210 2. 동영상 삽입하기 ... 214 9. 프레임 관련 태그 ... 222 1. 프레임 만들기 ... 223 2. 프레임 테두리선 지정하기 ... 226 3. target 속성을 이용하여 프레임에 링크 설정하기 ... 228 4. 프레임 여백 제거하기 ... 235 5. 프레임 경계선 고정 및 스크롤링 ... 237 6. 프레임 관련된 메시지 보여주기 ... 239 7. 인라인 프레임 ... 240 10. 입력 양식(FORM) 관련 태그 ... 246 1. 폼의 구조 ... 246 2. 텍스트 입력상자와 암호 입력상자 만들기 ... 249 3. 체크박스와 라디오 버튼 만들기 ... 255 4. 전송(Submit), 취소(Reset) 및 이미지 버튼 만들기 ... 259 5. 풀 다운 메뉴(Pull-down Menu) 만들기 ... 263 6. 파일 첨부 입력상자 만들기 및 숨김 필드 지정하기 ... 269 7. 폼 요소들 그룹화하기 ... 272 Part 2. JavaScript Chapter 1. JavaScript란? ... 286 1. 자바스크립트로 무엇을 할 수 있는가? ... 287 2. 자바와 자바스크립트의 차이점 ... 287 1. 실행상의 차이 ... 287 2. 타입 체크 ... 288 3. 객체 지원 ... 288 4. HTML 코드 ... 288 5. 변수 선언 ... 288 6. 보안성 ... 288 3. 자바스크립트의 장점과 단점 ... 289 1. 자바스크립트의 장점 ... 289 2. 자바스크립트의 단점 ... 289 4. 자바스크립트 맛보기 ... 290 1. HTML 내에 자바스크립트 삽입하기 ... 290 2. 자바스크립트 파일로 삽입하기 ... 292 3. HTML 태그에 자바스크립트 입력하기 ... 294 4. 자바스크립트 코드를 URL로 사용하기 ... 295 5. 주석 ... 297 6. 간단한 예제 프로그램 ... 299 1. alert() 함수 ... 299 2. confirm() 함수 ... 300 3. prompt() 함수 ... 302 Chapter 2. 자바스크립트 연산자와 제어문 ... 304 1. 자료형 ... 304 1. 상수(constant) ... 304 2. 논리형(boolean) ... 307 3. null값 ... 307 4. NaN ... 308 2. 변수 ... 310 1. 변수명 작성 규칙 ... 310 2. 변수 선언 ... 311 3. 변수의 종류 ... 311 3. 연산자 ... 312 1. 산술 연산자 ... 312 2. 문자열 연산자 ... 314 3. 비교 연산자 ... 315 4. 논리 연산자 ... 317 5. 할당 연산자 ... 319 6. 비트 연산자 ... 321 7. 증감 연산자 ... 323 8. 연산자의 운선 순위 ... 325 4. 제어문 ... 325 1. if 문 ... 325 2. switch case 문 ... 331 3. for 문 ... 336 4. while 문 ... 341 5. do while 문 ... 347 6. 강제 제어문 ... 353 7. continue 문 ... 355 8. label 문 ... 356 Chapter 3. 자바스크립트의 함수 ... 358 1. 함수란? ... 358 2. 사용자 정의 함수 ... 359 1. 매개 변수가 없는 경우 ... 359 2. 매개 변수가 있는 경우 ... 361 3. return 문이 있는 경우 ... 362 4. 재귀 함수 ... 365 3. 내장 함수 ... 367 1. eval() ... 367 2. parselnt() ... 369 3. parseFloat() ... 370 4. escape() ... 371 5. unescape() ... 372 Chapter 4. 자바스크립트 객체와 이벤트 ... 374 1. 객체의 정의 ... 374 1. 메소드 ... 378 2. 참조 배열 ... 383 3. 객체를 객체의 속성으로 정의하기 ... 385 4. for in 제어문 ... 388 2. 내장 객체 ... 391 1. Sting 객체 ... 391 2. Date 객체 ... 405 3. Math 객체 ... 411 4. Array 객체 ... 415 5. Boolean 객체 ... 421 6. Number 객체 ... 421 7. Function 객체 ... 423 8. Arguments 객체 ... 424 9. Screen 객체 ... 425 3. 이벤트와 이벤트 핸들러 ... 427 1. onClick 이벤트 ... 428 2. Focus와 Blur 이벤트 ... 432 3. Load와 unLoad 이벤트 ... 435 4. Abort 이벤트 ... 437 5. Select 이벤트 ... 437 6. Mouseout, Mouseover 이벤트 ... 437 7. submit 이벤트 ... 441 8. change 이벤트 ... 443 9. error 이벤트 ... 447 Chapter 5. 자바스크립트의 브라우저 객체들 ... 450 1. Window 객체 ... 452 1. Window 객체의 속성 ... 452 2. Window 객체의 메소드 ... 459 2. Document 객체 ... 500 1. Document 객체의 속성 ... 500 2. Document 객체의 메소드 ... 514 3. History 객체 ... 519 1. History 객체의 속성 ... 519 2. History 객체의 메소드 ... 521 4. Image 객체 ... 522 1. Image 객체의 생성 ... 523 2. Image 객체의 속성 ... 523 5. Location 객체 ... 527 1. Location 객체의 속성 ... 527 2. Location 객체의 메소드 ... 528 6. Link 객체 ... 532 1. Link 객체의 속성 ... 532 2. Link 객체의 메소드 ... 534 7. Area 객체 ... 536 8. Boolean 객체 ... 538 9. Navigator 객체 ... 538 1. Navigator 객체의 속성 ... 539 2. Navigator 객체의 메소드 ... 539 Chapter 6. 자바스크립트 활용 ... 542 1. 요일에 따라 배경색 변경 ... 542 2. select 객체를 이용한 글자 색상 변경 ... 545 3. select 객체를 이용한 항목 이동 ... 549 4. 엔터 키를 이용하여 링크 ... 547 5. 텍스트를 이용한 alert 메시지 창 출력하기 ... 552 6. 터글 키 만들기 ... 553 7. 라디오 버튼을 이용한 메시지 출력 ... 554 8. 마우스 우측 버튼 사용할 수 없게 하기 ... 556 9. 단축 메뉴 나타나지 않게 하기 ... 557 10. 이미지가 자동으로 스크롤되게 하기 ... 558 11. 이미지가 자동 로테이션되게 하기 ... 560 12. 입력된 URL로 이동 ... 562 13. 시작 페이지와 즐겨찾기 버튼 만들기 ... 563 14. 텍스트 위에 마우스를 올려놓으면 이미지가 변한다 ... 565 15. Select 객체를 이용하여 요일별로 다른 사이트 링크 ... 567 16. Select 객체를 이용한 메시지 출력 ... 569 17. Select 객체를 이용한 메시지 출력과 링크 ... 572 18. Select 객체에서 Option을 선택하면 텍스트 객체에 메시지가 출력 ... 575 19. 버튼에 시계 나타내기 ... 578 20. 셀 선택시 색상 바꾸기 ... 579 21. 지정된 색상으로 바탕색 바꾸기 ... 582 22. 하이퍼링크로 지정된 셀 선택시 색상 바꾸기 ... 586 23. 배열을 이용하여 바탕색 자동으로 바꾸기 ... 588 24. 이미지 위에 마우스를 올려놓으면 다른 이미지로 변경 ... 591 25. 요일마다 다른 이미지 보여주기 ... 593 26. 접속할 때마다 다른 이미지 보여주기 ... 596 27. 접속할 때마다 이미지와 링크 바꾸기 ... 598 28. 난수를 이용한 링크 ... 600 29. 체크박스에서 선택한 개수와 선택 항목 출력하기 ... 603 30. 메뉴에 마우스를 올려놓으면 체크박스가 선택된다 ... 605 31. 메뉴 선택시 메뉴 앞에 이미지 버튼 나타나게 하기 ... 607 32. 두 개의 풀 다운 메뉴 ... 610 33. 상태 바에 링크 주소가 나타나지 않게 하기 ... 613 34. 상태 바에 시계 나타내기 ... 614 35. 상태 바에 반짝거리는 메시지를 출력하기 ... 616 36. 오전 오후로 구분되는 시계 출력하기 ... 618 37. 방문시간 계산하기 ... 621 38. 텍스트 상자에 오늘의 날짜 출력하기 ... 623 39. 텍스트 상자를 클릭하면 메시지가 출력 ... 625 40. 텍스트 상자에 메시지 스크롤하기 ... 629 41. 이 달은 말일까지 며칠이나 남았는지 알아보기 ... 632 42. 며칠 후는 몇 년 몇 월 며칠 인가요? ... 634 43. 두 날짜 사이의 경과 일수 구하기 ... 636 44. 윈도우의 크기가 자동으로 변해요 ... 639 45. 텍스트 위에 마우스를 올려놓으면 새로운 창 열리게 하기 ... 640 46. 자동으로 닫히는 팝업 창 만들기 ... 642 47. 스크롤 바만 있는 풀 스크린 창 만들기 ... 644 48. 시간의 흐름에 따라 자동으로 링크 ... 645 49. 상태 바에 메시지 흘러가게 하기 ... 647 50. 상태 바에 메시지 바운딩하기 ... 649 51. 이미지에 마우스를 올려놓으면 팝업 창이 생김 ... 652 52. 시간이 흘러감에 따라 텍스트가 바뀌어서 출력 ... 654 53. 간단한 주문을 계산하는 자바스크립트 ... 659 54. 계산기 ... 663 Part 3. CSS／DOM Chapter 1. DHTML 이란? ... 670 1. DHTML로 무엇을 할 수 있는가? ... 670 2. DHTML의 구성요소 및 기본 골격 ... 671 1. 구성요소 ... 671 2. 기본 골격 ... 671 Chapter 2. 스타일 시트(Style Sheet) ... 672 1. 스타일 시트로 무엇을 할 수 있는가? ... 672 2. 스타일 시트의 특징과 구성요소 ... 673 1. 스타일 시트의 특징 ... 673 2. 스타일 시트의 구성요소 ... 673 3. 스타일 시트의 선언 방법 ... 675 1. 스타일 시트의 선언 방법에 따른 분류 ... 675 4. 스타일 시트의 정의 방법 ... 681 1. 기본적인 선택자(HTML 태그)를 이용하여 정의하는 경우 ... 682 2. 하나의 선택자에 여러 개의 속성을 정의하는 경우 ... 683 3. 동일 속성을 여러 개의 선택자에게 정의하는 경우 ... 684 4. CLASS 속성을 이용하여 스타일을 정의하는 경우 ... 685 5. ID 속성을 이용하여 스타일을 정의하는 경우 ... 691 6. 문맥 선택자를 이용하여 스타일을 정의하는 경우 ... 694 7. 가상 클래스 선택자를 이용하여 스타일을 지정하는 경우 ... 697 8. 가상 요소를 이용하여 스타일을 지정하는 경우 ... 700 5. 스타일 시트의 상속성 ... 703 6. 스타일 시트의 우선 순위(Specificity) ... 705 7. 스타일 시트에서 사용되는 색상과 단위 ... 707 8. 스타일 지정하기 ... 711 1. Font 관련된 스타일 ... 711 2. Text 관련된 스타일 ... 724 3. 색상과 배경에 관련된 스타일 ... 744 4. 상자와 테두리에 관련된 스타일 ... 766 5. 목록 관련 스타일 ... 805 6. 기타 유용한 스타일 시트 속성 ... 812 9. CSS 이용한 DHTML 문서 만들기 ... 838 1. 라디오 버튼에 스타일 지정하기 ... 838 2. 이미지가 커서 따라다니는 스타일 지정하기 ... 840 3. 메뉴가 고정되는 스타일 지정하기 ... 842 4. 메뉴 밑에 내용 설명 나타나는 스타일 지정하기 ... 845 5. 글꼴을 동적으로 제어하는 스타일 지정하기 ... 848 6. 이미지를 확대 및 축소시키는 스타일 지정하기 ... 850 7. 글자의 크기를 조금씩 확대시키는 스마일 지정하기 ... 853 Chapter 3. DOM ... 856 1. DOM으로 무엇을 할 수 있는가? ... 856 2. DOM의 특징과 표준 ... 857 1. DOM의 특징 ... 857 2. DOM의 표준 ... 857 3. DOM 구조 이해하기 ... 858 4. DOM 객체와 프로퍼티 ... 859 1. DOM 객체 ... 859 2. DOM 객체의 프로퍼티와 메소드 ... 860 5. DOM의 이벤트 모델 ... 877 1. event 객체 ... 877 2. mouse 이벤트 객체 ... 877 6. DOM을 이용한 DHTML 문서 만들기 ... 878 1. 페이지에 텍스트 추가 및 삭제하기 ... 878 2. 바탕색과 글자색 및 글꼴 지정하기 ... 881 3. 움직이는 이미지와 텍스트 ... 883 4. 객체 숨기기와 보이기 ... 885 5. 스크롤 메시지 ... 888 6. 마우스가 접근하면 동적으로 변경되는 텍스트 ... 890 부록 appendix 1. 실전 홈페이지 제작하기 ... 894 1. 실전 홈페이지 분석하기 ... 895 2. 실전 홈페이지 작성하기 ... 896 1. 메인 상단 주메뉴 만들기(index-top.htm) ... 896 2. 메인 하단 만들기(index-main.htm) ... 900 3. 프레임을 이용하여 메인 상단과 하단 링크하기(index.htm) ... 906 4. 57사업처 소개(sub01.htm) ... 907 5. 조직 편성도(sub02.htm) ... 909 6. 제품 소개(sub03.htm) ... 925 7. 사업국 위치(sub04.htm) ... 942 8. 추천 사이트(site.htm) ... 943 9. 메인 화면의 하단 오른쪽 구성하기 ... 950 10. 메인 화면의 가운데 부분 구성하기 ... 967 appendix 2. 홈페이지 업로드 및 검색엔진 등록 ... 978 1. FTP란? ... 978 2. FTP 프로그램의 종류 ... 979 1. WS_FTP ... 979 2. Cute_FTP ... 980 3. ALFTP ... 980 4. Leap FTP ... 981 3. 홈페이지 업로드하기 ... 982 4. 검색엔진에 등록하기 ... 984 찾아보기 ... 987