목차 일부
PART 01 세상에서 가장 특별한 웹 프로그래밍
LESSON 01 웹 브라우저와 HTML의 은밀한 관계 ... 20
HTML 언어 해석기, 웹 브라우저 ... 20
웹 브라우저에서 소스 확인하기 ... 21
메모장으로 HTML 문서 만들기 ... 22
LESSON 02 자바스크립트 감 잡았어! ... 25
...
더보기
목차 전체
PART 01 세상에서 가장 특별한 웹 프로그래밍
LESSON 01 웹 브라우저와 HTML의 은밀한 관계 ... 20
HTML 언어 해석기, 웹 브라우저 ... 20
웹 브라우저에서 소스 확인하기 ... 21
메모장으로 HTML 문서 만들기 ... 22
LESSON 02 자바스크립트 감 잡았어! ... 25
자바스크립트 소스 확인하기 ... 25
자바스크립트의 장점 ... 26
LESSON 03 메모장보다 편리한 에디트플러스 ... 28
에디트플러스 설치하기 ... 28
에디트플러스 구경하기 ... 31
에디트플러스 화면 구성 살펴보기 ... 32
에디트플러스 내 맘대로 환경 바꾸기 ... 33
비밀노트 : 쏙쏙비교! HTML 편집기 vs 웹 에디터 ... 35
HTML 편집기 ... 35
웹 에디터 ... 35
LESSON 04 부록 CD-ROM 이용하기 ... 36
부록 CD-ROM의 샘플 복사하기 ... 36
PART 02 백문이 불여일견! HTML 기본 태그 탐험
LESSON 01 HTML, 기초부터 차근차근! ... 40
HTML 기본 구조 이해하기 ... 40
HTML 문서 연습하기 ... 41
LESSON 02 웹 문서의 키워드를 찾아라!〈HEAD〉와〈META〉태그 ... 46
〈HEAD〉태그 속의 〈META〉태그 ... 46
다양한 메타 태그의 기능 살펴보기 ... 47
메타 태그 연습 - 문서 이동 장면 전환 효과 ... 49
LESSON 03 웹 문서의 내용을 담는〈BODY〉태그 ... 51
웹 문서의 배경 색상 지정하기 ... 51
웹 문서의 배경 그림 지정하기 ... 53
절대 경로와 상대 경로 이해하기 ... 54
웹 브라우저 여백 없애기 ... 55
비밀노트 : 그림 파일의 지존! GIF와 JPG ... 57
LESSON 04 글자와 관련된 HTML 기본 태그 ... 58
글자 크기를 조절하는〈H〉 ... 58
글자를 편집하는 기본 태그〈FONT〉 ... 61
〈FONT〉활용하여 글꼴과 글자 색상 바꾸기 ... 62
글자 스타일을 바꾸는 태그들 ... 64
LESSON 05 문서를 깔끔하게 정리하는 태그 ... 66
수평선 긋는〈HR〉 ... 66
〈BR〉과〈P〉의 차이 ... 68
가운데로 정렬하는〈CENTER〉 ... 70
눈에 보이는 대로 편집하는〈PRE〉 ... 71
LESSON 06 특수 문자 맘대로 사용하는 방법 ... 72
키보드의 [한자] 이용하기 ... 72
그밖에 특수 문자, 또 뭐가 있나요? ... 75
LESSON 07 한눈에 볼 수 있는 목록을 만드는 태그 ... 78
번호 없는 목록 만드는〈UL〉 ... 78
번호 있는 목록 만드는〈OL〉 ... 80
다양한 목록 만들기 ... 81
계층 구조 만드는〈DL〉 ... 82
LESSON 08 재미있는 웹 문서를 만드는 태그 ... 84
웹 문서에 그림을 삽입하는〈IMG〉 ... 84
멀티미디어를 삽입하는〈EMBED〉 ... 87
그림 속성 주무르기 ... 88
비밀노트 : 그림과 문장의 여러 가지 정렬 방법, align ... 90
PART 03 성공 전략! HTML 최강 활용 가이드
LESSON 01 순간 이동이 가능한 하이퍼링크 ... 94
URL을 이용하여 하이퍼링크 연결하기 ... 94
그림에 하이퍼링크 연결하기 ... 97
LESSON 02 하이퍼링크 연결하고 이동하기 ... 100
웹 문서에서 다른 문서로 이동하기 ... 100
하나의 문서 안에서 특정 위치로 이동하기 ... 105
LESSON 03 하이퍼링크로 할 수 있는 다양한 것! ... 108
하이퍼링크로 연결할 수 있는 다양한 대상들 ... 108
하이퍼링크를 이용하여 그림 파일 새 창으로 열기 ... 108
파일을 다운로드할 수 있는 하이퍼링크 ... 110
하이퍼링크로 E-mail 보내기 ... 112
LESSON 04 웹 사이트의 재간꾼!〈TABLE〉 ... 115
테이블을 구성하는 기본 태그 ... 115
테이블을 구성하는〈TR〉과〈TD〉 ... 118
테이블을 이용한 문서 편집 ... 120
LESSON 05 테이블을 200% 활용하는 방법 ... 123
가로, 세로 내 맘대로 셀 합치기 ... 123
테이블 안에 아기 테이블 넣기 ... 126
LESSON 06 화면을 나누는 프레임 ... 128
프레임과 프레임 셋 이해하기 ... 128
프레임 문서 만들기 ... 130
프레임 문서의 다양한 유형 ... 132
프레임 문서의 테두리선 없애기 ... 134
name과 target 속성이 중요한 이유 ... 136
비밀노트 : 웹 문서 안의 별도 프레임,〈iframe〉을 잡아라! ... 139
LESSON 07 쌍방향 커뮤니케이션을 지향하는〈FORM〉 ... 142
기본적인 폼 양식 알아보기 ... 142
CGI와 폼 ... 142
회원가입 문서 만들기 ... 143
다양한 양식으로 폼 만들기 ... 146
LESSON 08 믿을만한 호스팅 어디 없을까? ... 150
호스팅 업체 비교하기 ... 150
(주)인터넷나야나에 계정 만들기 ... 152
(주)인터넷나야나 계정 사용의 주의사항 ... 154
(주)인터넷나야나에서 제공하는 부가서비스 ... 155
PART 04 웹 페이지의 코디네이터, 스타일 시트(CSS)
LESSON 01 나만의 스타일을 살려 주는 CSS ... 158
스타일 시트(CSS)란? ... 158
스타일 시트(CSS)의 매력 ... 159
LESSON 02 스타일 시트를 사용하는 세 가지 방법 ... 160
외부 문서에서 연결하기(Linked Style) ... 160
문서 내부에 정의하기(Embedded Style) ... 163
태그에 직접 정의하기(Inline Style) ... 165
LESSON 03 스타일 시트의 기본기 다지기 ... 167
스타일 시트 기본 형식 ... 167
특정 태그에 스타일 지정하기 ... 168
그룹으로 만든 태그에 스타일 지정하기 ... 169
하위 태그에 스타일 지정하기 ... 170
클래스(Class)를 이용하기 ... 172
아이디(ID)를 이용하기 ... 173
LESSON 04 스타일 시트로 글자에 날개를 달자 ... 175
글꼴 지정하기(font-family) ... 175
글자 형태 지정하기(font-style) ... 177
글자 굵기 지정하기(font-weight) ... 178
글자 크기 지정하기(font-size) ... 180
비밀노트 : 짜잔! 글꼴 추가하고 확인해 볼까요? ... 182
LESSON 05 문장과 문단을 꾸미는 스타일 시트 ... 184
자간 지정하기(letter-spacing) ... 184
단어 간격 지정하기(word-spacing) ... 185
줄 간격 지정하기(line-height) ... 186
공백과 줄 바꿈 지정하기(white-space) ... 188
LESSON 06 문서를 꾸미는 스타일 시트 ... 190
문단 들여쓰기 지정하기(text-indent) ... 190
글자에 밑줄 긋기(text-decoration) ... 191
LESSON 07 스타일 시트로 색상과 배경 꾸미기 ... 194
색상 바꾸기(color) ... 194
배경 색상 바꾸기(background-color) ... 195
배경 그림 바꾸기(background-image) ... 197
반복되는 배경 그림 바꾸기(background-repeat) ... 198
배경 그림의 스크롤 지정하기(background-attachment) ... 200
배경 그림의 위치 지정하기(background-position) ... 202
LESSON 08 목록 속성을 설정하는 스타일 시트 ... 206
목록의 머리 기호 바꾸기(list-style-type) ... 206
그림으로 목록의 머리 기호 만들기(list-style-image) ... 208
목록의 들여쓰기 지정하기(list-style-position) ... 209
LESSON 09 테두리를 꾸미는 스타일 시트 ... 211
테두리 형태 지정하기(border-style) ... 211
테두리 색상 지정하기(border-color) ... 213
테두리 두께 지정하기(border-방향-width) ... 214
LESSON 10 여백을 결정하는 스타일 시트 ... 217
바깥 여백 지정하기(margin-방향) ... 217
바깥 여백 한 번에 지정하기(margin) ... 218
안쪽 여백 지정하기(padding-방향) ... 220
문단의 위치와 폭, 높이 지정하기 ... 222
LESSON 11 하이퍼링크를 꾸미는 스타일 시트 ... 224
하이퍼링크 색상과 밑줄 표시하기 ... 224
각기 다른 하이퍼링크 스타일 적용하기 ... 227
LESSON 12 스타일 시트 활용하여 문서 꾸미기 ... 230
목록 태그로 메뉴 박스 만들기 ... 230
스타일 시트 점검하기 ... 233
비밀노트 : 변화무쌍! 다양한 효과의 스크롤바 ... 235
PART 05 돈 안들이고 재미있게 배우는 자바스크립트
LESSON 01 자바스크립트, 요건 기본이지∼ ... 238
자바스크립트의 기초 이해하기 ... 238
자바스크립트의 기본 구조 살펴보기 ... 239
비밀노트 : 요건 몰랐지? 자바와 자바스크립트 ... 241
LESSON 02 자바스크립트, 체험해 볼까? ... 242
메시지 대화상자 띄우기 ... 242
*.js 파일로 자바스크립트 정리하기 ... 244
LESSON 03 document.write()와 alert() 사용하기 ... 246
문서에 출력하는 document.write() 명령 ... 246
대화상자로 알려 주는 alert() 명령 ... 248
LESSON 04 변수와 자료형 이해하기 ... 251
변수(Variable) 설정하기 ... 251
변수 선언하고 사용하기 ... 252
지역 변수와 전역 변수의 이해 ... 254
자료형(Data Type) 살펴보기 ... 255
LESSON 05 여러 가지 연산자(Operator) 알아보기 ... 257
연산자의 종류와 우선순위 ... 257
우선순위가 가장 높은 단항 연산자 ... 258
사칙연산에 사용하는 산술 연산자 ... 260
비트의 이동을 연산하는 시프트 연산자 ... 260
참과 거짓을 판단하는 관계 연산자 ... 262
논리 값을 판단하는 논리 연산자 ... 263
조건식을 판단하는 조건 연산자 ... 265
변수에 값을 대입하는 대입 연산자 ... 266
LESSON 06 조건문 만들기 ... 267
if문 사용하기 ... 267
if∼else문 사용하기 ... 270
다중 if∼else문 사용하기 ... 272
switch문 사용하기 ... 274
LESSON 07 반복문 만들기 ... 277
for문 사용하기 ... 277
다중 for문 사용하기 ... 280
while문 사용하기 ... 283
do∼while문 사용하기 ... 284
break문 사용하기 ... 286
continue문 사용하기 ... 288
LESSON 08 함수의 이용 방법 배워보기 ... 289
내장 함수 알아보기 ... 289
명령을 구분하는 confirm() ... 290
값을 계산하는 eval() ... 291
숫자를 판단하는 isNaN ... 292
사용자 정의 함수 이용하기 ... 293
자신의 함수 다시 호출하기 ... 298
LESSON 09 객체(Object), 제대로 이해하기 ... 299
객체의 속성과 메소드(Method) ... 299
객체는 어떻게 만들어지나요? ... 300
LESSON 10 자바스크립트의 다양한 내장 객체 ... 303
기억 공간을 배열하는 Array 객체 ... 303
날짜와 시간을 알려 주는 Date 객체 ... 307
Date 객체와 Array 객체로 달력 만들기 ... 309
함수를 정의하는 Function 객체 ... 311
문자열을 다루는 String 객체 ... 312
수식을 계산하는 Math 객체 ... 314
화면 정보를 제공하는 Screen 객체 ... 316
LESSON 11 이벤트(Event) 이해하기 ... 317
이벤트의 종류 ... 317
이벤트 핸들러(event handler) ... 318
흐르는 문자로 인사하기 ... 320
이벤트의 정보를 알려 주는 Event 객체 ... 321
LESSON 12 웹 브라우저의 객체 사용하기 ... 323
객체들의 계층 구조 ... 323
Window 객체 사용하기 ... 324
Window 객체의 메소드 사용하기 ... 326
Window 객체의 메소드와 함수 사용하기 ... 328
LESSON 13 Window 객체의 하위 객체 사용하기 ... 330
Document 객체의 속성 사용하기 ... 330
Document 객체로 문서 속성 조절하기 ... 332
Document 객체의 메소드 사용하기 ... 333
과거 정보를 알려 주는 History 객체 ... 335
열려 있는 웹 문서의 정보를 제공하는 Location 객체 ... 336
각 프레임을 열어 주는 Frame 객체 ... 338
웹 브라우저의 정보를 제공하는 Navigator 객체 ... 340
Document의 하위 객체들 ... 342
LESSON 14 입력 폼을 제어하는 Form 기반 객체들 ... 344
폼 정보를 알려 주는 Form 객체 ... 344
텍스트를 입력하는 Text 객체 ... 345
암호화하는 Password 객체 ... 346
여러 줄을 입력할 수 있는 Textarea 객체 ... 347
버튼에 대한 정보를 제공하는 Button 객체 ... 347
Submit 객체와 Reset 객체 ... 348
콤보 박스나 목록 상자를 알려 주는 Select 객체 ... 348
체크 상자를 알려 주는 Checkbox 객체 ... 348
라디오 버튼을 알려 주는 Radio 객체 ... 350
비밀노트 : 제대로 된 가입신청서 작성 비결 ... 352
PART 06 다이내믹한 DHTML을 위한 자바스크립트와 레이어
LESSON 01 자유자재로 사용하는 레이어 ... 358
DHTML과 레이어 이해하기 ... 358
레이어의 특징 살펴보기 ... 359
레이어 구조 이해하기 ... 359
레이어 만들기 ... 361
LESSON 02 레이어의 배경과 그림 지정하기 ... 363
레이어의 배경 만들기 ... 363
LESSON 03 레이어는 순서가 있다! ... 366
우선순위로 레이어 겹치기 ... 366
LESSON 04 레이어의 보이기와 감추기 ... 368
visibility 속성 이용하기 ... 368
Click 이벤트로 레이어 감추기 ... 370
화면에 보여 줄 레이어의 영역 설정하기 ... 371
LESSON 05 왼쪽으로 스크롤하여 나타나는 레이어 ... 373
자바스크립트에서 레이어에 접근하기 ... 373
자바스크립트로 left와 z-index 값 제어하기 ... 374
LESSON 06 레이어로 펼치거나 사라지는 효과 만들기 ... 377
자바스크립트로 clip 값 제어하기 ... 377
LESSON 07 레이어로 만드는 웹 갤러리 ... 380
자바스크립트로 visibility 값 제어하기 ... 380
PART 07 실전에서 베껴 쓰는 자바스크립트 활용
LESSON 01 하루 동안 나타나지 않는 팝업 창 ... 384
확인한 팝업 창은 다시 열지 않기 ... 384
LESSON 02 내 맘대로 등록하는 시작 페이지와 즐겨찾기 ... 388
시작 페이지나 즐겨찾기 링크 만들기 ... 388
LESSON 03 여러 가지 폼에 사용하는 자바스크립트 ... 391
입력 상자에 커서 위치시키고 ... 391
[Enter]로 다음 항목 이동하기 ... 393
LESSON 04 자바스크립트로 강화한 회원가입 양식 ... 395
회원가입 문서 만들기 ... 395
LESSON 05 흐르는 듯 바뀌는 이미지 스크롤 메뉴 ... 405
이미지 스크롤 메뉴 만들기 ... 405
LESSON 06 선택에 따라 바뀌는 트리플 콤보 메뉴 ... 409
트리플 콤보 메뉴 만들기 ... 409
LESSON 07 레이어를 이용한 깔끔한 롤오버 메뉴 ... 414
레이어를 이용한 깔끔한 메뉴 만들기 ... 414
LESSON 08 랜덤으로 이미지가 바뀌는 슬라이드 배너 ... 417
랜덤 슬라이드 배너 만들기 ... 417
LESSON 09 째각째각! 깔끔한 디지털 시계 ... 420
디지털 시계 만들기 ... 420
LESSON 10 업로드 이미지 미리보기 ... 423
업로드 이미지 미리보기 ... 423
LESSON 11 잊어버리지 말자! 쿠키로 기억하는 방문자 ... 425
방문자의 이름과 방문 일자, 횟수 표시하기 ... 425
사용자 ID 기억하기 ... 428
LESSON 12 특별한 제목 표시줄과 상태 표시줄 ... 430
제목 표시줄과 상태 표시줄에 날짜 표시하기 ... 430
제목 표시줄과 상태 표시줄에 현재 시간 보여주기 ... 432
달력으로 날짜 선택하기 ... 433
LESSON 13 남들과 다른 견적서와 일반 계산기 ... 437
견적서 만들기 ... 437
일반 계산기 만들기 ... 440
더보기 닫기