제1부 HTML부터 시작하기 제1장 처음 보는 HTML ... 27 1.1 HTML이란 무엇인가? ... 28 1.2 처음 입력해보는 html ... 32 제2장 예제에 사용된 html 태그들 자세히 보기 ... 39 〔1〕 브라우저에게 알리는 〈html〉...〈／html〉 ... 40 〔2〕 머리말 정보를 기술하는 〈head〉...〈／head〉 ... 40 〔3〕 브라우저에게 화면에 출력을 부탁하는 〈body〉...〈／body〉 ... 41 〔4〕 화면에 표시될 글자의 크기를 조절하는 〈h1〉...〈／h1〉 ... 42 제3장 그 외 기본적으로 알아야 할 태그 지식 ... 45 〔1〕 빈 줄을 삽입하는 〈p〉...〈／p〉 ... 46 〔2〕 단순히 줄을 바꾸는 〈br〉 ... 47 〔3〕 줄을 그어 구분하는 〈hr〉 ... 48 〔4〕 주석문을 추가하는 〈!_〉 ... 49 〔5〕 속성을 사용하는 태그들 ... 50 (1) 〈body〉 태그에서 사용하는 속성 ... 50 (2) 〈h1〉...〈h6〉 태그에서 사용하는 속성 ... 52 (3) 〈hr〉 태그에서 사용하는 속성 ... 54 제4장 태그가 글자를 디자인한다. ... 57 4.1 글자에 효과 주기 ... 58 4.2 특수한 글자체로 출력하기 ... 61 4.3 약자, 인용구 등 특수 형식으로 표시하기 ... 62 4.4 화면 글자 그대로 출력하기 ... 64 4.5 출력되는 문장의 위치 조절하기 ... 66 4.6 본격적으로 글자를 주무르는 〈font〉 태그 ... 68 제5장 html에서 특수 문자는 어떻게? ... 73 〔1〕 문자 엔티티란(Character Entities)? ... 74 〔2〕 문자 엔티티의 종류 ... 74 제6장 사람은 인연의 끈, 문서는 링크의 끈 ... 77 6.1 링크는 무엇인가? ... 78 6.2 다양한 링크의 형식 ... 79 〔1〕 1개 문서 내에서 이동하기 ... 79 〔2〕 다른 문서로 이동하기 ... 82 〔3〕 그림으로 사이트 연결하기 ... 84 〔4〕 이메일로 연결하기 ... 85 6.3 다시 보는 html ... 87 제7장 브라우저 창 나누어 사용하기 ... 89 7.1 처음 보는 프레임(frame) ... 90 7.2 프레임의 크기를 지정하는 다른 방법들 ... 93 〔1〕 * 사용하기 ... 93 〔2〕 픽셀의 개수로 지정하기 ... 93 7.3 프레임 본격적으로 활용하기 ... 95 〔1〕 행과 열을 섞어서 프레임 만들기 ... 95 〔2〕 프레임에 사이트 홈페이지 띄우기 ... 96 〔3〕 프레임의 경계 조절하기 ... 97 〔4〕 프레임 안에서 출력 위치 조절하기 ... 97 〔5〕 스크롤 막대 표시하기 ... 98 〔6〕 프레임 크기 고정시키기 ... 100 7.4 프레임에서 링크 사용하기 ... 101 7.5 문서 중간에서 프레임 사용하기 ... 106 7.6 프레임말고 다른 방법은? ... 107 제8장 유용한 테이블, 이렇게 만드세요. ... 109 8.1 처음 만들어 보는 테이블 ... 110 8.2 테두리 굵기 조절하기 ... 112 8.3 테두리 아예 없애기 ... 114 8.4 테두리 내 맘대로 ... 116 8.5 테이블 행과 열에 제목 붙이기 ... 119 8.6 캡션도 달아보고 ... 120 8.7 빈칸도 만들고 ... 121 8.8 행과 열 자유롭게 배치하기 ... 122 8.9 셀 안쪽 여백 조절하기 ... 123 8.10 셀 바깥 여백 조절하기 ... 125 8.11 테이블에 색깔도 입히고 그림도 깔고 ... 126 8.12 셀별로 색깔도 입히고 그림도 깔고 ... 127 8.13 테이블 안에서 데이터 정렬하기 ... 128 8.14 테이블 안에서 다른 태그 사용하기 ... 129 제9장 목록(리스트) 형식으로 데이터 표현하기 ... 131 9.1 처음 만들어 보는 목록 ... 132 9.2 순서 없는 기본 목록 만들기 ... 133 9.3 순서 없는 목록 다양하게 표시하기 ... 134 9.4 순서 있는 기본 목록 만들기 ... 135 9.5 순서 있는 목록 다양하게 표시하기 ... 136 9.6 순서 있는 목록에서 순서 바꾸기 ... 137 9.7 목록 안에 목록 집어넣기 ... 139 9.8 용어 정의 목록 만들기 ... 140 제10장 멋있는 입력 폼 만들기 ... 141 10.1 처음 보는 입력 폼 ... 142 10.2 텍스트 필드와 패스워드 필드 만들기 ... 143 〔1〕 기본적인 텍스트 필드와 패스워드 필드 만들기 ... 143 〔2〕 텍스트 필드와 패스워드 필드 조절하기 ... 144 10.3 체크박스 만들기 ... 145 10.4 라디오 버튼 만들기 ... 147 10.5 드롭박스 만들기 ... 148 10.6 텍스트 영역 만들기 ... 149 10.7 일반 메시지 버튼 만들기 ... 150 10.8 전송과 관련된 버튼 만들기 ... 151 제11장 이미지와 이미지 맵으로 멋 부리기 ... 153 11.1 움직이지 않는 그림과 움직이는 그림 ... 154 11.2 배경 이미지 깔기 ... 155 11.3 이미지와 텍스트 정렬하기 ... 156 11.4 이미지 여백과 테두리 만들기 ... 158 11.5 이미지 맵 활용하기 ... 160 제12장 글자와 그림으로 애니메이션 효과를 ... 165 12.1 처음 보는 글자와 그림 애니메이션 ... 166 12.2 다양한 글자 애니메이션 해보기 ... 167 〔1〕 배경색 지정하기 ... 167 〔2〕 활동 영역 지정하기 ... 167 〔3〕 움직이는 방향 바꾸기 ... 168 〔4〕 움직이다 멈추고... 다시 움직이다 멈추고... ... 169 〔5〕 움직이는 보폭을 조절한다 ... 169 〔6〕 무한정 하지말고 횟수 제한하기 ... 170 〔7〕 그 외 다양한 움직임 ... 170 제13장 음악이 흐르고 동영상도 나오고 ... 173 13.1 음악이 흐르게... ... 174 13.2 이젠 동영상을 본다 ... 177 제2부 css로 html 문서 디자인하기 제14장 처음 보는 css ... 181 14.1 css의 기능 맛보기 ... 182 14.2 css에 관한 첫 번째 이야기 ... 186 제15장 css를 사용하기 위한 기본 규칙 ... 189 15.1 css 명령어 사용하기 ... 190 〔1〕 css 명령어의 구조 ... 190 〔2〕 그룹 지정하기 ... 191 〔3〕 class 속성 사용하기 ... 191 〔4〕 id 속성 사용하기 ... 194 〔5〕 주석 사용하기 ... 196 15.2 css를 이용하는 3가지 방법 ... 197 〔1〕 〈head〉...〈head〉 사이에 기술(내부 파일 방식) ... 197 〔2〕 html 태그 내에 직접 기술(인라인 방식) ... 198 〔3〕 별도의 .css 파일에 기술(외부 파일 방식) ... 198 15.3 스타일이 적용되는 우선 순위 ... 200 제16장 배경 디자인하기 ... 203 16.1 배경색 조절하기 ... 204 16.2 배경 이미지 깔기 ... 206 16.3 배경 이미지 반복 표시 조절하기 ... 206 16.4 배경 이미지의 위치 조절하기 ... 207 16.5 배경 이미지 스크롤 방지하기 ... 208 16.6 여러 개의 프로퍼티 값 한꺼번에 지정하기 ... 209 제17장 글자 디자인하기 ... 211 17.1 텍스트 색상 지정하기 ... 212 17.2 글자 간격 조절하기 ... 212 17.3 글자 정렬하기 ... 213 17.4 글자에 효과 주기 ... 214 17.5 들여 쓰기 지정하기 ... 215 17.6 대소 문자 지정하기 ... 216 제18장 폰트 조절하기 ... 217 18.1 폰트 선택하기 ... 218 18.2 폰트 크기 조절하기 ... 219 〔1〕 비율로 지정하기 ... 219 〔2〕 고정값으로 지정하기 ... 220 〔3〕 점점 크게 또는 점점 작게 ... 221 18.3 폰트에 스타일 지정하기 ... 223 18.4 폰트의 굵기 조절하기 ... 224 18.5 여러 개의 프로퍼티 값 한꺼번에 지정하기 ... 225 제19장 경계선 꾸미기 ... 227 19.1 테두리 두르기 ... 228 19.2 테두리 다양하게 만들기 ... 229 19.3 색깔 있는 테두리 만들기 ... 230 19.4 테두리 넓이 조절하기 ... 232 19.5 테두리의 넓이, 스타일, 색깔 한번에 지정하기 ... 233 19.6 상하 좌우 테두리를 별도로 치장하기 ... 234 제20장 여백 조절하기 ... 235 20.1 상하 좌우 여백 각각 지정하기 ... 236 20.2 상하 좌우 여백 다양하게 지정하기 ... 237 제21장 테이블에서 여백 지정하기 ... 239 21.1 상하 좌우 여백 각각 지정하기 ... 240 21.2 한꺼번에 테이블 여백 지정하기 ... 241 제22장 목록 치장하기 ... 243 22.1 순서 없는 목록의 구분자 지정하기 ... 244 22.2 순서 있는 목록의 구분자 지정하기 ... 245 22.3 이미지로 항목 구분하기 ... 247 22.4 항목 구분자의 위치 조절하기 ... 248 22.5 한번에 여러 가지 프로퍼티 지정하기 ... 250 제23장 그 외 알아 둘만한 css의 기능들 ... 251 23.1 라인 간격 조절하기 ... 252 23.2 특정 내용 숨기거나 보이게 하기 ... 253 23.3 마우스 커서 모양 바꾸기 ... 254 23.4 하이퍼 링크 색상을 다양하게... ... 255 〔1〕 경우에 따라 링크 색 바꾸기 ... 255 〔2〕 링크 문자열 더 다양하게 변신하기 ... 255 23.5 첫 글자와 첫 문장 치장하기 ... 257 〔1〕 첫 글자만 변형하기 ... 257 〔2〕 첫 문장만 변형하기 ... 258 23.6 문서 중간에 스크롤 창 만들기 ... 259 23.7 이미지나 텍스트 위치 조절하기 ... 261 〔1〕 이미지 좌우에 텍스트 표시하기 ... 261 〔2〕 수평 위치 지정하기 ... 262 〔3〕 수평, 수직 위치 지정하기 ... 263 23.8 이미지와 텍스트 겹치기 ... 264 23.9 포토샵처럼 글자에 필터 사용하기 ... 265 23.10 포토샵처럼 그림에 필터 사용하기 ... 268 제3부 자바스크립트로 홈페이지에 지능을 제24장 처음 보는 자바스크립트 ... 273 24.1 자바스크립트를 알아야 하는 이유 ... 274 24.2 처음 보는 자바스크립트 ... 277 24.3 자바스크립트를 기술하는 3가지 방법 ... 279 〔1〕 〈head〉...〈／head〉 사이에 기술하기 ... 279 〔2〕 〈body〉...〈／body〉 사이에 기술하기 ... 280 〔3〕 외부의 .js 파일에 기술하기 ... 280 제25장 간단히 알아보는 기본 문법 ... 283 25.1 변수? 상수? ... 284 25.2 변수와 상수에 대한 자세한 이야기 ... 287 〔1〕 변수 이름은 어떻게 만드나? ... 287 〔2〕 변수를 사용하는 3가지 방법 ... 287 〔3〕 상수에는 어떤 것들이 있을까? ... 289 25.3 연산자는 어떤 것이 있나요? ... 290 〔1〕 산술 연산자 ... 290 〔2〕 중감 연산자 ... 291 〔3〕 할당 연산자 ... 292 〔4〕 비교 연산자 ... 293 〔5〕 논리연산자 ... 295 〔6〕 삼항 연산자 ... 296 〔7〕 문자 결합 연산자 ... 297 25.4 주석은 어떻게 표시하나요? ... 298 25.5 명령문을 기술하는 규칙 ... 299 제26장 조건을 따져서 판단하기 ... 303 26.1 한가지 조건만 따지는 if ... 304 26.2 이럴 땐 이렇게, 저럴 땐 저렇게 if...else ... 305 26.3 많은 조건 따지기 if...else if... ... 305 26.4 많은 조건 세련되게 switch...case ... 306 제27장 반복문으로 간단히 처리하기 ... 309 27.1 for문 사용하기 ... 310 27.2 while문 ... 312 27.3 do...while문 ... 314 제28장 함수로 프로그램을 간단하게 ... 317 28.1 간단한 함수 만들어 사용하기 ... 318 28.2 인수를 사용하는 함수 ... 320 28.3 결과값을 반환하는 함수 ... 321 28.4 자바스크립트 내장 함수 사용하기 ... 322 제29장 객체 이야기 ... 325 29.1 처음 보는 객체 - screen ... 326 29.2 두 번째 객체 - navigator ... 327 제30장 문자열 다루기 ... 329 30.1 문자열의 길이를 구하는 속성 ... 330 30.2 문자열을 변환하는 메소드 ... 330 30.3 문자열을 조작하는 메소드 ... 332 30.4 문자열로 링크 시키는 메소드 ... 333 제31장 날짜 정보 알아내기 ... 335 31.1 시스템의 현재 시간 정보 알아내기 ... 336 31.2 임의로 시간을 설정하고 알아내고 ... 336 31.3 new가 뭔지... ... 338 31.4 시간 정보 제대로 사용하기 ... 339 제32장 배열 객체 사용하기 ... 341 32.1 처음 보는 배열 ... 342 32.2 배열을 만드는 방법들 ... 343 32.3 배열 개체에 사용되는 속성과 메소드 ... 345 제33장 복잡한 수학 연산을 하는 Math 객체 ... 347 33.1 Math 객체의 속성 사용하기 ... 348 33.2 Math 객체에서 사용하는 메소드들 ... 348 제34장 내가 만드는 객체 ... 351 34.1 다시 보는 객체 ... 352 34.2 나만의 객체 만들기 - 속성편 ... 354 34.3 나만의 객체 만들기 - 메소드편 ... 355 34.4 객체 전용 반복문 사용하기 ... 357 제4부 DOM으로 자바스크립트 완전 무장 제35장 DOM 이야기 ... 363 35.1 갑자기 DOM은 무엇인가? ... 364 35.2 DOM 객체의 구조 ... 365 제36장 이벤트가 있어야 진짜 재미 ... 367 36.1 이벤트는 또 뭐야? ... 368 36.2 처음 사용하는 이벤트 ... 369 36.3 이벤트의 종류 ... 373 제37장 window 객체 사용하기 ... 377 37.1 window 객체의 속성, 메소드, 이벤트 ... 378 〔1〕 window 객체의 속성 ... 378 〔2〕 window 객체의 메소드 ... 379 〔3〕 window 객체의 이벤트 ... 379 37.2 자동으로 창 만들기 ... 381 37.3 시간 조절하기 ... 383 37.4 기본 메시지 표시하기 ... 383 37.5 메시지 효과 연출하기 ... 385 37.6 현재 페이지 출력하기 ... 388 37.7 새창 띄우기 ... 389 37.8 창을 멋있게 열어요 ... 391 37.9 떨리는 창 ... 392 제38장 document 객체 사용하기 ... 395 38.1 document 객체의 속성, 메소드, 이벤트 ... 396 〔1〕 document 객체의 속성 ... 396 〔2〕 document 객체의 메소드 ... 396 〔3〕 document 객체의 이벤트 ... 397 38.2 현재 문서의 정보 알아내기 ... 397 38.3 타이틀 바에 날짜와 시간 표시하기 ... 399 38.4 배경색 마음대로 바꾸기 ... 400 38.5 배경색 깜빡이기 ... 402 제39장 navigator 객체 사용하기 ... 403 39.1 navigator 객체의 속성과 메소드 ... 404 〔1〕 navigator 객체의 속성 ... 404 〔2〕 navigator 객체의 메소드 ... 404 39.2 웹 브라우저에 따라 다른 태그를... ... 405 제40장 anchor와 link 객체 사용하기 ... 407 40.1 anchor 객체의 속성 ... 408 40.2 nachor 객체가 제공하는 정보 ... 408 40.3 link 객체의 속성과 이벤트 ... 409 〔1〕 Link 객체의 속성 ... 409 〔2〕 Link 객체의 이벤트 ... 410 40.4 link 객체가 제공하는 정보 ... 410 40.5 링크를 이용한 컬러 이벤트 쇼 ... 412 40.6 링크 슬라이드로 여행 떠나기 ... 413 제41장 history 객체 사용하기 ... 415 41.1 history 객체의 속성, 메소드 ... 416 〔1〕 History 객체의 속성 ... 416 〔2〕 History 객체의 메소드 ... 416 41.2 웹 문서 보다가 앞으로 뒤로 이동하기 ... 416 제42장 location 객체 사용하기 ... 419 42.1 location 객체의 속성, 메소드 ... 420 〔1〕 Location 객체의 속성 ... 420 〔2〕 Location 객체의 메소드 ... 420 42.2 현재 문서를 바꾸어 링크의 효과를... ... 420 42.3 원하는 사이트로 이동하기 ... 420 제43장 image 객체 사용하기 ... 423 43.1 image 객체의 속성, 이벤트 ... 424 〔1〕 Image 객체의 속성 ... 424 〔2〕 Image 객체의 이벤트 ... 424 43.2 마우스 움직여 배경 바꾸기 ... 425 43.3 일정 시간 간격으로 배경 이미지 바꾸기 ... 427 43.4 이미지 슬라이드 쇼 ... 429 43.5 이미지 크기 제어하기 ... 431 제44장 form 객체 사용하기 ... 433 44.1 다시 보는 객체의 구조 ... 434 44.2 form 객체의 속성, 메소드, 이벤트 ... 436 〔1〕 form 객체의 속성 ... 436 〔2〕 form 객체의 메소드 ... 436 〔3〕 form 객체의 이벤트 ... 436 44.3 form 객체를 기술하는 방법 ... 437 44.4 form 객체 활용하기 ... 439 제45장 text 객체와 password 객체 사용하기 ... 441 45.1 text 객체의 속성, 메소드, 이벤트 ... 442 〔1〕 text 객체의 속성 ... 442 〔2〕 text 객체의 메소드 ... 442 〔3〕 text 객체의 이벤트 ... 442 45.2 password 객체의 속성과 메소드 ... 443 〔1〕 password 객체의 속성 ... 443 〔2〕 password 객체의 메소드 ... 444 45.3 수식 계산기 만들기 ... 445 45.4 늘어나는 입력 상자 만들기 ... 446 45.5 입력 상자 내의 공백 없애기 ... 447 45.6 암호 체크하기 ... 449 제46장 checkbox 객체와 radio 객체 사용하기 ... 453 46.1 checkbox 객체의 속성, 메소드, 이벤트 ... 454 〔1〕 checkbox 객체의 속성 ... 454 〔2〕 checkbox 객체의 메소드 ... 454 〔3〕 checkbox 객체의 이벤트 ... 454 46.2 모두 체크하고 모두 해제하기 ... 455 46.3 항목 체크 개수 셈하기 ... 457 46.4 최대 선택 개수 제한하기 ... 458 46.5 라디오 버튼에 따라 작업 구분하기 ... 460 제47장 select 객체 사용하기 ... 461 47.1 select 객체의 속성, 메소드, 이벤트 ... 462 〔1〕 select 객체의 속성 ... 462 〔2〕 select 객체의 메소드 ... 462 〔3〕 select 객체의 이벤트 ... 462 47.2 항목을 선택해서 사이트 연결하기 ... 463 47.3 목록으로 배경색 바꾸기 ... 465 제48장 button 객체 사용하기 ... 467 48.1 button 객체의 속성, 메소드, 이벤트 ... 468 〔1〕 button 객체의 속성 ... 468 〔2〕 button 객체의 메소드 ... 468 〔3〕 button 객체의 이벤트 ... 468 48.2 증가, 감소 버튼 만들기 ... 469 48.3 버튼 메시지 표시하고 사이트 연결하기 ... 470 48.4 버튼 글자 스크롤과 사이트 연결 ... 471 제49장 textarea 객체 사용하기 ... 473 49.1 textarea 객체의 속성, 메소드, 이벤트 ... 474 〔1〕 textarea 객체의 속성 ... 474 〔2〕 textarea 객체의 메소드 ... 474 〔3〕 textarea 객체의 이벤트 ... 474 49.2 버튼으로 블록 지정을... ... 476 49.3 알림 창 메시지 임의로 조절하기 ... 477 제50장 submit와 reset 객체 사용하기 ... 479 50.1 submit 객체의 속성, 메소드, 이벤트 ... 480 〔1〕 submit 객체의 속성 ... 480 〔2〕 submit 객체의 메소드 ... 480 〔3〕 submit 객체의 이벤트 ... 480 50.2 submit와 reset을 이용한 로그인 처리 ... 481 제51장 hidden 객체 사용하기 ... 483 51.1 hidden 객체의 속성 ... 484 51.2 hidden 객체의 사용 ... 484 제52장 file 객체 사용하기 ... 487 52.1 file 객체의 속성, 메소드, 이벤트 ... 488 〔1〕 file 객체의 속성 ... 488 〔2〕 file 객체의 메소드 ... 488 〔3〕 file 객체의 이벤트 ... 488 52.2 파일 다운받기 만들기 ... 489 52.3 파일 업로드 만들기 ... 490 제53장 frame 객체 사용하기 ... 491 53.1 frame 객체의 속성, 메소드, 이벤트 ... 492 53.2 메시지 문서 보이고 나서 사이트 연결하기 ... 492 53.3 프레임 간에 데이터 전달하기 ... 494 제54장 레이어 사용하기 ... 497 부록 HTML 문서에서 사용 가능한 색상 ... 501 〔1〕 색상표를 보여주는 문서 ... 501 〔2〕 색이름, 16진수 값, 실제 색을 보여주는 문서 ... 503