상세정보

JavaScript와 CSS를 이용해 웹 사이트를 꾸미려는 독자들을 위한 책이다. 간단한 홈페이지를 한번쯤 만들어본 사람들이라면 욕심을 낼만한 다양한 기능들을 기초부터 배울 수 있도록 구성했다. 고급스럽고 다이나믹한 웹사이트를 디자인해볼 수 있다.

남이 만든 소스만 베껴서 사용하는 수준을 넘어 설 수 있도록 구체적인 설명을 담았다. 하나씩 따라하다 보면 전문 웹 프로그래머가 가져다 쓰고 싶어할 정도의 완벽한 소스를 만들 수 있다. 특히 이 책에는 2명의 전문 웹 디자이너와 3명의 전문 웹 프로그래머가 베타테스터로 참여했다. 현역 웹 디자이너와 웹 프로그래머들이 처음부터 끝까지 모든 예제를 베타 테스트하여 좋은 예제만을 엄선했다.

다양하게 웹 디자인에 효과를 주는 방법들을 일목요연하게 정리해서 배울 수 있다. 웹 디자이너라면 CSS 활용을 위한 레퍼런스로 곁에 두고 볼 수도 있는 책이다. 자바스크립트의 활용에 있어서도 단순한 효과를 내는 예제는 물론 간단한 게임까지 만들어볼 수 있도록 설명했다. 각 장마다는 실무에 활용할 수 있는 웹 사이트를 소개하여 더 폭넓은 활용이 가능하도록 하였다.

예제는 중, 고급 따라하기는 초급 수준으로 구성했다. 개념 이해가 필요한 부분은 간단한 예제로, 개념을 이해한 후에는 실무에서 활용하는 중고급 수준의 예제로 마스터하도록 했다. 중고급 예제로 구성되어 있지만, 초보 웹 디자이너를 위해 쉽게 따라할 수 있도록 설명했다.

부록 CD ROM에는 이 책에 사용된 예제와 함께 관련되어 사용할 수 있는 유용한 프로그램들을 담았다.

정보제공 :

목차
들어가며
이 책의 특징
이 책을 120%활용하는 방법
CD 구성 및 활용 방법
Theme 1. 홈페이지에 날개를 다는 자바 스크립트와 CSS
 Section 1. 웹의 일등 공신 HTML = 30
  1. HTML은 자랑할 것도 많다 = 31
  2. 기죽은 HTML 누가 기운을 북돋아주나? = 31
 Section 2. 페이지 레이아웃의 마법사 CSS = 32
  1. CSS란 무엇인가? = 33
  2. CSS로 꾸미는 웹 = 33
 Section 3. HTML에 날개를 다는 자바 스크립트 = 35
  1. 자바 스크립트란 무엇인가? = 36
  2. 자바와의 차이점 = 37
  3. 자바 스크립트로 꾸미는 웹 = 38
Theme 2. 웹 디자이너가 알아야 할 자바 스크립트 & CSS
 Section 4. 홈페이지의 기본 HTML = 44
  1. HTML의 기본 문서 = 45
  2. HTML의 구조 = 46
 Section 5. CSS와 자바 스크립트의 기본 지식 바로 배우기 = 47
  1. CSS 삽입하기 = 48
  2. CSS 우선 순위 = 52
  3. 자바 스크립트의 기본 지식 = 53
 Section 6. 자바 스크립트의 자료형 = 54
 Section 7. 자바 스크립트의 연산자 = 56
  1. 사칙 연산자 = 57
  2. 단항 연산자 = 57
  3. 비교 연산자 = 59
  4. 논리 연산자 = 59
  5. 조건 판단 연산자 = 60
  6. 대입 연산자 = 60
  7. 비트 연산자 = 61
  8. 연산자의 우선 순위 = 61
 Section 8. 자바 스크립트의 명령문／내장 함수 = 62
  1. 조건문 = 63
  2. 반복문 = 64
  3. 내장 함수 = 65
 Special corner : HTML 태그를 이용하여 할 수 있는 다양한 기법 = 68
Theme 3. 웹 디자이너가 추천하는 CSS Attributes의 모든 것
 Section 9. 문자를 깔끔하게 만들어 보자 = 74
  1. 글꼴을 설정하는 font-family = 75
  2. 글자 크기를 설정하는 font-size = 76
  3. 글자 기울임을 설정하는 font-style = 78
  4. 작은 영 대문자로 설정하는 font-variant = 79
  5. 글자 두께를 설정하는 font-weight = 80
  6. 글자 간격을 설정하는 letter-spacing = 82
  7. 줄 높이를 설정하는 line-height = 83
  8. 문서의 행 정렬을 설정하는 text-align = 84
  9. 글자의 선을 긋는 text-decoration = 86
  10. 들여쓰기를 설정하는 text-indent = 89
  11. 대／소문자 자동 변환하는 text-transform = 90
  12. 글자 방향을 설정하는 unicode-bidi = 91
  13. 글자를 세로 정렬하는 vertical-align = 92
  14. 글자 간격을 설정하는 word-spacing = 94
 Section 10. Color와 Background 관련 속성 = 96
  1. 배경 이미지 고정 여부를 설정하는 background-attachment = 97
  2. 배경색을 설정하는 background-color = 99
  3. 배경 이미지를 설정하는 background-image = 100
  4. 배경 이미지의 위치를 지정하는 background-position = 102
  5. 배경 이미지 반복 여부를 설정하는 background-repeat = 104
  6. 글자의 색을 설정하는 Color 속성 = 107
 Section 11. Layout 관련 속성 = 109
  1. 경계선 색 설정 = 111
  2. 경계선의 두께 설정 = 113
  3. 경계선의 형식 설정 = 115
  4. 경계선을 일괄적으로 설정 = 117
  5. 여백 설정 = 119
  6. 내용 간격 설정 = 122
 Section 12. Classification 관련 속성 = 123
  1. list-style-image 속성 = 124
  2. list-style-position 속성 = 125
  3. list-style-type 속성 = 126
  4. list-style 설정 = 127
  5. display 속성 = 129
 Section 13. Positioning 관련 속성 = 131
  1. clip 속성 = 132
  2. width, height 속성 = 133
  3. top, left 속성 = 134
  4. visibility 속성 = 135
  5. z-index 속성 = 136
 Special corner : 인터넷 익스플로러(Internet Explorer)활용 팁 = 138
Theme 4. 웹 개발 툴을 이용하며 CSS를 관리하자
 Section 14. 드림위버를 이용한 CSS 고급 기능 활용하기 = 144
  1. 패널 및 사용법 = 145
  2. 적용방법 = 146
 Section 15. 프론트페이지를 이용한 CSS 활용 = 163
  1. CSS 새로 만들어 보자 = 164
  2. 외부 CSS와 연결해 보자 = 168
  3. CSS를 이용해서 깔끔한 문서를 만들어 보자 = 170
 Special corner : 리소스 확보하기 = 180
Theme 5. 웹 디자이너가 즐겨쓰는 CSS 고급 예제 모음
 Section 16. CSS 필터(filter)로 텍스트와 이미지에 효과주기 = 184
  1. 반투명 효과 나타내기(Alpha) = 185
  2. 흐려지게 하는 효과 나타내기(Blur) = 187
  3. 투과 시키기(Chroma) = 190
  4. 같은 색일 경우 투과 시키기(Mask) = 192
  5. 그림자 나타내기(Dropshadow) = 194
  6. 괘적을 남기는 그림자 나타내기(Shadow) = 195
  7. 좌우 반전시키기(FlipH) = 197
  8. 상하 반전시키기(FlipV) = 199
  9. 발광 효과 나타내기(Glow) = 201
  10. 흑백 효과 나타내기(Gray) = 203
  11. 색 반전시키기(Invert) = 205
  12. X선 효과의 흑백으로 변환시키기(Xray) = 206
  13. 물결 파형 형태로 나타내기(Wave)207
 Section 17. CSS로 FORM 꾸미기 = 209
  1. Form 태그에 적용한 CSS 예제 1 = 211
  2. Form 태그에 적용한 CSS 예제 2 = 212
 Section 18. CSS로 커서 모양 꾸미기 = 213
  1. 하이퍼링크된 곳의 커서 모양 바꾸기 = 214
 Section 19. CSS로 스크롤바 꾸미기 = 216
  1. 스크롤바에 색깔주기 = 217
  2. 스크롤바 화살표 없애기 = 218
  3. 스크롤바 흰색으로 처리하기 = 219
 Section 20. 기타 유용한 고급 예제 = 220
  1. 링크 걸린 부분 꾸미기 = 221
  2. 출력할 때 필요한 CSS = 223
 Special corner : 색을 알아야 하는 것은 웹 디자이너의 기본 = 228
Theme 6. 자바 스크립트 내장 객체를 샅샅이 파헤쳐 보자
 Section 21. 강력한 배열 처리 Array 객체 = 234
  1. 배열을 처리하는 메소드들 = 235
  2. Array 객체 생성하기 = 235
  3. 배열을 합치는 concat() = 240
  4. 배열을 문자열로 만드는 join() = 241
  5. 배열의 맨 끝에서 요소를 추가하고 제거하는 pop()과 push() = 242
  6. 배열의 맨 처음에서 요소를 추가하고 제거하는 shift()와 unshift() = 244
  7. 배열 요소를 정렬하는 sort()와 reverse() = 246
  8. 배열의 일부로 새로운 배열을 만드는 slice() = 248
 Section 22. 날짜와 시간 처리는 내게 맡겨라! Date 객체 = 250
  1. Date 객체 생성하기 = 251
  2. 날짜와 시간 관련 정보를 처리하는 메소드 = 252
  3. 현재 날짜와 시간을 얻어 보자 = 254
  4. 나만의 형식으로 표현하는 날짜와 시간 = 255
  5. 홈페이지에 시계 달기 = 257
  6. 난 몇 일쯤 살았을까? 내가 살아온 날짜를 계산해 보자 = 260
  7. 내 여자친구와 100일 되는 날은? = 261
 Section 23. 빈번하게 발생하는 문자열 처리 String 객체의 모든 것 = 263
  1. 문자열을 처리하는 메소드들 = 264
  2. 특정 위치의 문자나 문자 코드를 얻어내는 charAt(), charCodeAt() = 267
  3. 문자열을 합쳐보자 concat() = 268
  4. 문자 코드를 문자로 변환하는 fromCharCode() = 269
  5. 문자열에서 특정 문자열을 찾는 indexOf(), lastIndexOf() = 270
  6. 대문자를 소문자로, 소문자를 대문자로 toLowerCase(), toUpperCase() = 272
  7. 원하는 위치의 문자열을 추출하는 substring() = 273
  8. 지정한 길이만큼 추출하는 substr() = 274
  9. 지정한 문자를 기준으로 문자열을 자르는 split() = 275
  10. 문자열을 찾아보자 match() = 277
  11. 다른 문자열로 바꾸는 replace() = 278
  12. 문자열이 존재하는지 검사하는 search() = 279
 Section 24. 계산은 내게 맡겨라! 수학 천재 Math 객체 = 280
  1. 강력한 수학 함수들 = 281
  2. 수학과 관련된 지정된 문자들 = 282
  3. 삼각 함수 사용하기 = 284
  4. 지수, 로그 함수 사용하기 = 285
  5. 일반 수학 함수 사용하기 = 286
 Section 25. 정규 표현식을 담당하는 RegExp 객체 = 289
  1. 정규 표현식을 쓰는 형식 = 290
  2. RegExp 객체에서 사용하는 문자들 = 290
  3. RegExp 객체의 프로퍼티 = 293
  4. RegExp 객체의 메소드 = 295
 Special corner : 홈페이지를 제작할 때 고려할 사항 = 300
Theme 7. 객체 핸들링의 필수 요소 이벤트
 Section 26. 이벤트와 이벤트 핸들러 = 306
  1. 이벤트 핸들러 정의하기 = 307
  2. 리턴값에 따라 다르게 행동하는 이벤트 = 309
 Section 27. 발생할 사건에 대한 정보는 내가 가지고 있다! Event 객체 = 311
  1. 넷스케이프 내비게이터의 event 객체 = 312
  2. 인터넷 익스플로러의 event 객체 = 315
 Section 28. 브라우저 창이 보고하는 이벤트 = 319
  1. 환영인사, 작별인사 onLoad, onUnload = 320
  2. 창 크기에 따라 그림 크기도 조절하자 onResize = 321
  3. 울고 웃는 윈도우 onFocus, onBlur = 323
 Section 29. 마우스가 보고하는 이벤트 = 324
  1. 클릭했구나! onClick = 325
  2. 더블 클릭했구나! onDblClick = 326
  3. 까아악∼누르지마여∼ onMouseUp, onMouseDown = 327
  4. 구름에 가리는 비행기 onMouseOver, onMouseMove, onMouseOut = 329
 Section 30. 키보드가 보고하는 이벤트 = 332
  1. 키를 누르고 계시는군요 onKeyDown, onKeyUp = 333
  2. 비행기를 움직여 보자 onKeyPress = 334
 Section 31. 문서 양식에서 전해주는 이벤트 = 340
  1. 입력받은 내용의 길이를 체크해 보자 onChange = 341
  2. 선택한 항목에 대한 정보를 보여주자 onSelect = 342
  3. 전송하기 전에 물어보자 onSubmit = 344
  4. 입력한 내용을 지우기 전에 물어보자 onReset = 345
 Special corner : 웹에서 사용하는 스크립트 언어들 = 346
Theme 8. 윈도우와 관련된 브라우저 내장 객체들
 Section 32. 브라우저 내장 객체를 이용하는 자바 스크립트 = 350
  1. 브라우저 내장 객체의 구조 = 351
  2. 브라우저 내장 객체 살펴보기 = 352
 Section 33. 브라우저 창을 관리하는 Window 객체 = 354
  1. Window 객체의 프로퍼티와 메소드 = 355
  2. 상태바에 원하는 문자열 출력하기 = 357
  3. 여러 가지 대화상자 띄우기 = 360
  4. 윈도우를 만들고 닫아보자 = 363
  5. 내 맘대로 이동시키는 윈도우 = 365
  6. 크기도 내 맘대로 조절하자 = 368
  7. 자동으로 스크롤하기 = 368
  8. 더 향상된 자동 스크롤 = 370
  9. 윈도우의 상태를 보고 받자 = 374
 Section 34. 사용자 환경을 알려주는 Navigator 객체 = 377
  1. Navigator 객체의 프로퍼티 = 378
  2. 접속한 사용자 정보를 알아내자 = 378
 Section 35. 디스플레이 관련 정보를 제공하는 Screen 객체 = 380
  1. Screen 객체의 프로퍼티 = 381
  2. 디스플레이 해상도 알아내기 = 381
 Section 36. 주소 관리는 내가 한다! Location 객체 = 383
  1. Location 객체의 프로퍼티와 메소드 = 384
  2. URL 관련 정보를 얻어내자 = 385
  3. 스크립트를 이용한 다른 페이지 로딩하기 = 386
 Section 37. 내가 지나간 발자국을 기억하는 History 객체 = 389
  1. History 객체의 프로퍼티와 메소드 = 390
  2. 브라우저의 뒤로, 앞으로 버튼을 만들자 = 390
 Special corner : XML이란 무엇인가? = 392
Theme 9. HTML의 가장 큰 덩어리 Document와 Frame 객체
 Section 38. 웹 페이지의 핵심 Document 객체 = 396
  1. Document 객체의 프로퍼티 = 397
  2. 웹 페이지 색깔을 기분에 따라 바꾸자 = 398
  3. 페이지의 수정한 날짜와 시간을 표시하자 = 401
  4. 페이지를 분석하자 = 402
  5. Document 객체의 메소드 = 403
  6. 동적으로 웹 페이지 만들기 = 404
  7. 동적으로 웹 페이지 변경하기 = 405
  8. Document 객체의 이벤트 = 407
  9. 제 윈도우를 떠나지 마세요 = 407
  10. 입력한 내용을 상태바에 출력하는 타자기 = 408
  11. 소스 누출을 막아라! = 410
 Section 39. 여러 웹 페이지를 하나의 윈도우에, Frame 객체 = 412
  1. Frame 객체의 구조와 참조 방법 = 413
  2. Frame 객체의 프로퍼티와 메소드 = 414
  3. 다른 프레임의 내용을 바꿔보자 = 416
 Special corner : XML과 XSL을 이용한 다양한 디바이스 컨텐츠 만들기 = 418
Theme 10. 실무에서 가장 많이 쓰는 Form 객체와 그 하위 객체들
 Section 40. Form 객체의 형식과 구성 = 422
  1. Form 객체의 형식과 구성 = 423
 Section 41. Form 객체의 프로퍼티와 메소드, 이벤트 = 427
  1. Form 객체의 프로퍼티 = 428
  2. Form 객체의 메소드와 이벤트 = 430
  3. 올바른 이메일 주소인지 체크하자 = 431
 Section 42. 한 줄의 텍스트를 입력받는 Text 객체 = 433
  1. Text 객체의 형식과 구성 = 434
  2. 올바른 주민등록번호인지 체크하자 = 436
 Section 43. 입력값을 보여주지 않는 Password 객체 = 438
  1. Password 객체의 형식과 구성 = 439
  2. 올바른 비밀번호인지 체크하자 = 440
 Section 44. 숨겨진 값을 가지는 Hidden 객체 = 443
  1. Hidden 객체의 형식과 구성 = 444
  2. 비밀 정보를 서버로 전송하자 = 444
 Section 45. 여러 개의 항목 중 다중 선택이 가능한 Checkbox 객체 = 446
  1. Checkbox 객체의 형식과 구성 = 447
  2. 한 번에 여러 개의 검색 사이트로 검색하기 = 448
  3. 선택한 항목을 알아내자 452
 Section 46. 여러 개의 항목 중 다중 선택이 가능한 Radio 객체 = 454
  1. Radio 객체의 형식과 구성 = 455
  2. 객관식 문제 내고 채점하기 = 456
 Section 47. 특정 기능을 수행하는 Button 객체 = 459
  1. Button 객체의 형식과 구성 = 460
  2. Button 객체로 만드는 계산기 = 461
 Section 48. 폼 입력을 완료하고 자료를 전송하는 Submit 객체 = 463
  1. Submit 객체의 형식과 구성 = 464
  2. 사이트를 등록하는 폼 = 465
 Section 49. 폼 입력을 취소하는 Reset 객체 = 468
  1. Reset 객체의 형식과 구성 = 469
  2. 게시판에 글을 올리는 폼 = 469
 Section 50. 여러 줄의 텍스트를 입력받는 Textarea 객체 = 473
  1. Textarea 객체의 형식과 구성 = 474
  2. 원하지 않는 문자 입력을 막아보자 = 475
 Section 51. 풀 다운이나 리스트 박스를 만드는 Select 객체 = 477
  1. Select 객체의 형식과 구성 = 478
  2. 여러 가지 항목을 선택하는 다양한 방법 = 480
  3. 선택한 모든 항목을 찾아내자 = 482
  4. 페이지를 선택하고 이동 버튼을 클릭하면 이동하기 = 484
  5. 선택한 페이지로 바로 이동하자 = 485
 Section 52. 선택 항목을 나타내는 Option 객체 = 487
  1. Option 객체의 형식과 구성 = 488
  2. 기존 항목에 새 항목 추가하기 = 490
 Section 53. 폼 관련 객체를 활용한 예제들 = 492
  1. 입력된 문자열에서 태그 제거하기 = 493
  2. 태그 무력화시키기 = 495
  3. 스팸 등록을 거부하기 = 497
  4. 지정한 숫자만큼 입력하자 = 499
  5. 도망다니는 버튼 = 500
  6. RGB색을 16진수로 변환하기 = 502
  7. 입력한 내용에서 이메일 주소만 추출하자 = 504
 Special corner : 이메일로 고객을 잡자 = 506
Theme 11. 링크와 이미지의 실무 활용 테크닉
 Section 54. 문서를 연결하는 Link 객체 = 510
  1. Link 객체 사용하기 = 511
  2. Link 객체의 메소드, 프로퍼티, 이벤트 = 513
  3. 동적으로 페이지의 테마를 바꾼다 = 515
 Section 55. 하이퍼링크를 달자 Anchor 객체 = 518
  1. Anchor 객체 사용하기 = 519
  2. Anchor 객체의 메소드, 프로퍼티, 이벤트 = 521
  3. 페이지가 로딩될 때마다 바뀌는 링크 만들기 = 523
  4. 다른 사이트로 이동할 때 인사말 보여주기 = 525
 Section 56. 이미지 일부에 하이퍼링크를 다는 Area 객체 = 527
  1. Area 객체 사용하기 = 528
  2. Area 객체의 메소드, 프로퍼티, 이벤트 = 530
  3. 선택한 부분의 색깔을 보여주자 = 533
 Section 57. 이미지를 담당하는 Image 객체 = 535
  1. Image 객체 사용하기 = 536
  2. Image 객체의 메소드, 프로퍼티, 이벤트 = 538
  3. 동적으로 바꾸는 이미지 = 540
  4. 이미지를 미리 로딩하자 = 541
  5. 사용자의 행동에 따라 변하는 이미지 = 542
 Special corner : 검색 사이트에 등록하기 = 544
Theme 12. 웹 페이지를 더욱 빛나게 하는 자바 스크립트와 CSS 활용 예게
 Section 58. 메뉴를 만들어 보자 = 548
  1. 테이블을 이용한 간단한 메뉴 = 549
  2. 레이어를 이용한 메뉴 = 551
  3. 날아다니는 메뉴 = 555
  4. 상위 메뉴를 클릭하면 하위 메뉴가 나타나는 메뉴 = 562
 Section 59. 툴 팁 만들기 = 564
  1. 하이퍼링크에 대한 설명 보여주기 = 565
  2. 툴 팁 창의 배경색을 내 맘대로 바꾸기 = 567
  3. 툴 팁에 이미지를 삽입해서 만들기 = 570
  4. 스크롤되는 툴 팁 만들기 = 572
  5. 복합 툴 팁 만들기 = 574
 Section 60. 이미지 뷰어 만들기 = 578
  1. 이미지를 불러와서 원하는 사이즈로 보여주기 = 579
  2. 조각낸 이미지를 맞춰 보여주기 = 581
  3. 살아 있는 이미지 만들기 = 584
  4. 이미지를 겹치면서 바뀌게 하기 = 585
  5. 이미지 슬라이드 쇼 = 587
  6. 접속할 때마다 바뀌는 이미지 = 590
  7. 큰 이미지 새 창으로 보기 = 592
 Section 61. 쿠키 활용하기 = 597
  1. 방문 횟수 기억하기 = 598
  2. 배경색 기억하기 = 601
  3. 아이디 기억하기 = 604
  4. 사용자의 브라우저 버전 알아내기 = 606
  5. 쿠키 지우기 = 608
  6. 팝업 창 한 번만 띄우기 = 609
 Special corner : 인터넷을 공유해서 사용하는 방법 = 612
Theme 13. 나만의 효과로 전문 웹 디자이너가 되자
 Section 62. 배경 효과 = 618
  1. 우주 여행 = 619
  2. 불꽃놀이 = 622
  3. 거품이 뽀글뽀글 = 625
  4. 낙엽 떨어지는 효과 = 629
 Section 63. 마우스에 효과 나타내기 = 632
  1. 거미줄 효과 = 633
  2. 마우스를 따라다니는 튕기는 공 만들기 = 638
  3. 요요 만들기 = 643
  4. 마우스 따라다니는 파리 = 645
  5. 마우스 커서를 따라다니는 문자 = 650
 Section 64. 다양한 이미지 관련 효과들 = 653
  1. 이미지 오버랩 효과 = 654
  2. 이미지가 부드럽게 나타났다 사라지는 효과 = 656
  3. 롤오버 이미지 하이라이트 효과 = 660
  4. 롤오버 이미지 페이드 효과 = 661
  5. 흔들리는 이미지 = 663
  6. 모니터에서 돌아다니는 배너 이미지 = 665
 Special corner : JSP란 무엇인가? = 668
Theme 14. 자바 스크립트로 멋진 게임을 만들자
 Section 65. 자바 스크립트로 만든 게임 '지구를 지켜라' = 674
  1. 사용자로부터 키 입력을 받아 플레이어 움직이기 = 675
  2. 플레이어 미사일 처리 = 676
  3. 적 생성하기 = 680
  4. 적의 움직임 처리 = 681
  5. 게임의 전체적 흐름을 위한 부분들 = 683
  6. 전체 소스 = 685
 Special corner : 웹사이트 비평 체크 리스트 = 696