목차 일부
제1부 HTML부터 시작하기
제1장 처음 보는 HTML ... 27
1.1 HTML이란 무엇인가? ... 28
1.2 처음 입력해보는 html ... 32
제2장 예제에 사용된 html 태그들 자세히 보기 ... 39
〔1〕 브라우저에게 알리는 〈html〉...〈/html〉 ... 40
〔2〕 머리말 정...
더보기
목차 전체
제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
더보기 닫기