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