차례1 - 용도와 목적으로 찾기

제0장 웹 제작을 위한 3박자! HTML+CSS+자바스크립트
0장은 1~4장의 학습을 위한 워밍업 과정이다. 웹 문서 제작을 위한 HTML, CSS, 자바스크립트에 대한 특징과 구조를 파악하고 작성하기 위한 기본 도구와 EditPlus의 기초 사용법에 대해서 살펴보도록 한다.

제1장 자바스크립트 기초 필살기
자바스크립트의 구조와 삽입, HTML 소스의 표현, 연산자, 변수, 제어 명령, 함수와 같은 기초 문법 사용에 대하여 알아본다. 초보자에게 어렵게만 느껴지던 자바스크립트를 실무 예제를 통해 쉽게 사용할 수 있도록 하며 익숙해지도록 한다.

구조 파악과 삽입
필살기 001 문서 내부에 스크립트를 삽입하려면
필살기 002 필요하지 않은 스크립트를 주석문으로 잠시 숨기려면
필살기 003 js 스크립트 파일을 만들어서 문서에 연결하려면
필살기 004 스크립트로 문단을 꾸미려면
필살기 005 스크립트로 그림을 삽입하려면

변수와 연산자
필살기 006 변수로 숫자나 문자열을 출력하려면
필살기 007 [산술 연산자] 사칙 연산을 하거나 나머지를 구하려면
필살기 008 [대입 연산자] 특정 값을 변수에 비교하고 저장하려면
필살기 009 [증감 연산자] 변수의 값을 자동으로 1씩 증가/감소시키려면
필살기 010 [논리 연산자] 변수의 참과 거짓을 구분하려면
필살기 011 [비교 연산자] 왼쪽과 오른쪽의 변수나 값을 비교하려면
필살기 012 [문자열 연산자] 변수나 문자열을 서로 연결하려면
필살기 013 [조건 연산자] 괄호 안의 조건에 따른 값을 판별하려면

조건문과 반복문
필살기 014 [단순 IF] 조건을 판단한 후 명령문을 실행하려면
필살기 015 [IF ELSE] 참과 거짓에 따라 명령문을 실행하려면
필살기 016 [다중 IF ELSE] 여러 조건에 따라 명령문을 실행하려면
필살기 017 [SWITCH] 조건에 따라 특정 명령문을 실행하려면
필살기 018 [단순 FOR] 조건에 따라 특정 명령문을 반복 실행하려면
필살기 019 [다중 FOR] 여러 반복문을 실행하려면
필살기 020 [WHILE] 조건에 만족하는 명령문을 실행하려면
필살기 021 [DO WHILE] 명령을 실행하고 조건을 판별하려면

함수[Function]
필살기 022 [alert() 함수] 메시지 대화상자를 띄우려면
필살기 023 [confirm() 함수] 선택 대화상자를 띄우려면
필살기 024 [eval() 함수] 입력한 계산 값을 입력상자에 표시하려면
필살기 025 [isNaN() 함수] 숫자와 문자의 값을 판별하려면
필살기 026 [parseInt()/parseFloat() 함수] 글자를 숫자로 변환하려면
필살기 027 [prompt() 함수] 입력한 값을 표시하려면
필살기 028 필요한 함수를 정의하고 호출하려면
필살기 029 매개변수가 있는 함수를 정의하고 호출하려면
필살기 030 반환 값이 있는 함수를 정의하고 호출하려면

제2장 객체 지향을 위한 이벤트와 객체 필살기
자바스크립트는 객체 지향적인 언어이므로 객체를 빼놓고는 이야기 할 수 없다. 여기서는 이러한 객체[Object]의 특징, 메소드, 속성에 대하여 알아보며, 다양한 조건에 따라 발생하는 이벤트[Event] 중 대표적인 것들에 대해 알아보도록 한다.

이벤트[Event]
필살기 031 [onLoad] 문서 로딩시 메시지 대화상자를 표시하려면
필살기 032 [onUnload] 문서에서 나갈 때 메시지 대화상자를 표시하려면
필살기 033 [onClick] 버튼 클릭시 메시지 대화상자를 표시하려면
필살기 034 [onBlur] 커서 이동시 메시지 대화상자를 표시하려면
필살기 035 [onMouseOver] 이미지 위로 이동할 때 메시지 대화상자를 표시하려면
필살기 036 [OnMouseOut] 이미지를 벗어날 때 다른 문자열로 표시하려면

객체[Object]
필살기 037 [Array] 연속된 데이터를 배열로 정의하려면
필살기 038 [Array 메소드] 모든 배열을 하나의 문자열로 변경하려면
필살기 039 [Array 메소드] 배열 값을 소팅하거나 역순으로 변경하려면
필살기 040 [Array 메소드] 기존 배열을 새로운 배열로 변경하려면
필살기 041 [Date] 현재 년도, 월, 일을 표시하려면
필살기 042 [Date] 현재 요일을 표시하려면
필살기 043 [Date] 현재 시간을 표시하려면
필살기 044 [Document] 배경 색과 글자 색을 제어하려면
필살기 045 [Document] 문서 정보를 표시하려면
필살기 046 [Document] write() 메소드로 문자열을 표시하려면
필살기 047 [Document 메소드] 폼 클릭시 문자열을 표시하려면
필살기 048 [Image 속성] 이미지 정보를 표시하려면
필살기 049 [Button] 폼 버튼에 하이퍼링크를 삽입하려면
필살기 050 [Checkbox] 하나의 체크 박스만 선택하게 하려면
필살기 051 [Option] 메뉴에 하이퍼링크를 삽입하려면
필살기 052 [Password] 암호 입력 글자를 제어하려면
필살기 053 [Radio] 라디오 버튼에 하이퍼링크를 연결하려면
필살기 054 [Reset] 초기화 버튼을 만들려면
필살기 055 [FileUpload] 선택한 파일의 정보를 표시하려면
필살기 056 [Text] 텍스트 필드에 입력된 값을 하이퍼링크 주소로 이용하려면
필살기 057 [Text] 커서를 특정 텍스트 필드에 위치시키려면
필살기 058 [Text] 텍스트 필드에 입력된 값이 숫자 형태인지 판별하려면
필살기 059 [Textarea 메소드] 문자열 모두를 선택하려면
필살기 060 [Math 메소드] 삼각함수, 최대, 최소, 올림 값을 표시하려면
필살기 061 [Math 속성] 지수, 제곱근, 로그, 원주율 등을 구하려면
필살기 062 [Number 메소드] 최대, 최소, 무한대 값을 표시하려면
필살기 063 [String 메소드] 문자열의 속성을 꾸미려면
필살기 064 [String 메소드] 특정 범위를 추출하고, 대소문자로 변환하려면
필살기 065 [String 속성과 메소드] 글자를 추가하고, 총 글자 수를 구하려면
필살기 066 [Screen] 웹브라우저 해상도 정보를 표시하려면
필살기 067 [Event] 마우스 커서의 X와 Y 좌표를 표시하려면
필살기 068 [Location] 문서의 모든 정보를 표시하려면
필살기 069 [History] 방문한 웹브라우저 주소 정보를 이용하려면
필살기 070 [Window 속성] 현재 문서의 위치 정보를 표시하려면
필살기 071 [Window 메소드] 윈도우 크기를 제어하려면
필살기 072 [Window 메소드] 새 윈도우를 띄우려면
필살기 073 [Function] 함수를 정의하고 호출하려면


제3장 실무 활용을 위한 실용 자바스크립트 필살기
활용도가 높은 자바스크립트 소스를 Copy&Paste 방식으로 복사와 붙여넣기를 한 후에 사용자가 필요한 부분을 직접 수정하는 방법을 소개한다. 여기에서 소개하는 실용 스크립트는 홈페이지는 물론 게시판의 게시물, 블로그, 카페와 같이 다양한 분야에서 수정하여 사용할 수 있으며, 1장과 2장에서 소개한 자바스크립트의 기본 명령과 연동하여 학습할 수 있게 한다.

시간과 날짜
필살기 074 오늘 날짜가 강조된 달력을 삽입하려면
필살기 075 상태 표시줄에 날마다 다른 메시지를 출력하려면
필살기 076 오전/오후에 서로 다른 문서 배경 그림이 나타나게 하려면
필살기 077 D-day 기능을 이용하려면
필살기 078 제목 표시줄에 시간을 표시하려면
필살기 079 문서의 최종 업데이트 시간을 표시하려면
필살기 080 일정 시간 후 다른 문서로 자동 이동하려면

글자와 그림 효과
필살기 081 접속할 때마다 임의의 새 그림들이 나타나게 하려면
필살기 082 그림을 이용한 슬라이드 쇼를 만들려면
필살기 083 가상의 하이퍼링크[#]를 클릭하여 여러 그림을 제어하게 하려면
필살기 084 마우스 움직임에 따라 변하는 롤오버 그림 메뉴를 만들려면
필살기 085 투명도를 이용한 그림 무비를 만들려면
필살기 086 글자가 타이핑되는 효과를 만들려면

윈도우
필살기 087 10초 후 자동 종료되는 팝업 창을 만들려면
필살기 088 윈도우가 자동 종료되는 닫기 버튼을 만들려면
필살기 089 두 개 이상의 팝업 창을 원하는 위치에 띄우려면
필살기 090 전체 화면을 채우는 풀스크린 윈도우를 만들려면
필살기 091 팝업 창을 한번만 나타나게 하려면
필살기 092 상하좌우로 흔들리는 윈도우를 만들려면
필살기 093 상태 표시줄에 글자 애니메이션 효과를 만들려면
필살기 094 상태 표시줄에 깜박거리는 메시지 효과를 만들려면

마우스 + 폼 + 기타
필살기 095 현재 문서를 출력하는 버튼을 만들려면
필살기 096 즐겨찾기 등록 버튼을 만들려면
필살기 097 시작 페이지 등록 버튼을 만들려면
필살기 098 문서의 소스를 확인할 수 있는 버튼을 만들려면
필살기 099 단축키로 특정 페이지로 이동할 수 있게 하려면
필살기 100 마우스의 오른쪽 버튼과 드래그 기능을 금지시키려면

제4장 CSS로 더해지는 활용 필살기
스타일시트는 HTML에서 지원하지 못했던 문단의 줄 바꿈과 간격 조절, 그림의 필터 기능, 배경 그림의 고정, 반복 속성 제어, 레이어 배치와 같은 다양한 기능을 제공한다. 4장에서는 이러한 스타일시트를 문서, 그림, 테이블, 문단, 레이어, 폼, 하이퍼링크 요소별로 웹 문서에 활용할 수 있게 소개한다.

문단
필살기 101 들여쓰기 간격을 맘대로 조정하려면
필살기 102 단어와 글자, 행별로 공백을 조정하려면
필살기 103 문서 전체의 글 문단 스타일을 한 번에 조정하려면
필살기 104 여러 문서에 같은 스타일의 글 문단을 적용하려면
필살기 105 테두리가 있는 글 상자를 만들려면
필살기 106 점선 형태의 밑줄이 있는 글 문단을 만들려면
필살기 107 상하좌우로 글 문단의 여백을 지정하려면
필살기 108 배경 색상이 적용된 형광펜 효과를 나타내려면
필살기 109 특정 그림이 배경으로 지정된 글 문단을 만들려면
필살기 110 그림자 글자를 만들려면
필살기 111 반투명한 글자를 만들려면
필살기 112 네온 효과처럼 번지는 글자를 만들려면
필살기 113 영어 대소문자를 맘대로 변경하려면
필살기 114 그림으로 블렛 기호를 대치한 목록 문단을 만들려면

그림 + 수평선
필살기 115 그림의 크기와 주변 여백을 조정하려면
필살기 116 그림의 테두리 스타일을 조정하려면
필살기 117 삽입된 그림에 같은 스타일을 자동으로 적용하려면
필살기 118 그림에 블러를 적용하여 뿌연 효과를 내려면
필살기 119 그림의 투명도를 조정하려면
필살기 120 그림을 흑백 사진으로 만들려면
필살기 121 필름 형태의 그림으로 변신시키려면
필살기 122 그림의 색상을 반전하려면
필살기 123 그림을 흔들린 것처럼 왜곡하려면
필살기 124 상하좌우로 반사된 미러 효과를 적용하려면
필살기 125 수평선의 색상을 변경하려면
필살기 126 수평선을 점선 형태로 변경하려면

문서 환경
필살기 127 문서 전체의 여백을 제어하려면
필살기 128 배경 그림을 특정 위치에 한번만 보이게 하려면
필살기 129 배경 그림을 특정 방향으로만 반복하게 하려면
필살기 130 배경 그림을 고정하려면
필살기 131 마우스 커서의 모양을 조정하려면
필살기 132 스크롤바의 구성을 맘대로 조정하려면

테이블
필살기 133 테이블과 셀 환경을 스타일시트로 조정하려면
필살기 134 특정 방향의 테두리만 표시되게 조정하려면
필살기 135 테이블 전체 배경 그림을 고정시키려면
필살기 136 테이블 셀의 테두리 배경 등에 스타일을 자동으로 적용되게 하려면

폼
필살기 137 텍스트 필드의 글 속성과 배경, 테두리 색상을 변경하려면
필살기 138 선택한 색상으로 체크박스를 꾸미려면
필살기 139 리스트 메뉴 목록을 예쁘게 꾸미려면
필살기 140 폼 버튼에 색상을 입히려면

레이어
필살기 141 레이어를 이용해서 자유로운 레이아웃을 구성하려면
필살기 142 레이어의 위치를 웹브라우저의 크기에 따라 변경하려면
필살기 143 레이어의 테두리 스타일이 있는 글 문단을 만들려면

하이퍼링크
필살기 144 밑줄을 이용한 롤오버 글자 메뉴를 만들려면
필살기 145 색상이 변경되는 롤오버 글자 메뉴를 만들려면
필살기 146 크기가 변경되는 롤오버 글자 메뉴를 만들려면
필살기 147 여백을 이용한 롤오버 글자 메뉴를 만들려면
필살기 148 배경 색상과 외곽선을 이용한 롤오버 글자 메뉴를 만들려면
필살기 149 한 문서에서 여러 형태의 롤오버 스타일을 적용하려면

차례 2 - Javascript와 CSS 기능으로 찾기

스크립트의 기본
Javascript의 기본: 필살기 001
Javascript와 주석문 : /~/, /*~*/ 필살기 002
Javascript 파일 : js 필살기 003
문단과 그림 설정 : document.write(“그림 태그)” 필살기 004, 005

텍스트 출력을 위한 스크립트(document.write)
문자와 숫자의 출력 : document.write(변수) 필살기 006
산술, 대입 : document.write(조건식) 필살기 007, 008
증감, 논리 : document.write(조건식) 필살기 009, 010
비교 연결, 논리 : document.write(조건식) 필살기 011~013

변수와 비교, 조건를 위한 스크립트
변수의 비교 : IF 필살기 014~016
변수의 실행 : SWITCH 필살기 017
변수의 반복실행 : FOR 필살기 018, 019
변수의 조건 : WHILE 필살기 020, 021

함수로 표현하는 스크립트
대화상자 표시 : alert(문자열), confirm(문자열) 필살기 022, 023
숫자의 계산 : eval(문자열이나 변수) 필살기 024
숫자와 문자의 판별 : isNaN(변수) 필살기 025
숫자로의 변환 : parseInt(변수, 진수), parseFloat(변수) 필살기 026
숫자의 표시 : prompt(반복횟수) 필살기 027
임의의 함수 정의와 호출 : function 함수명( ) 필살기 028
매개변수의 함수 정의와 호출 : function 함수명(매개변수) 필살기 029
반환 값의 함수 정의와 호출 : function cal(a,b) 필살기 030

동작으로 표현하는 스크립트
문서의 열림과 종료 : onLoad, onUnload 필살기 031, 032
마우스의 클릭과 움직임 : onClick, onBlur 필살기 033, 034
마우스 커서의 움직임 : onMouseOver, onMouseOut 필살기 035, 036

객체 속성으로 표현하는 스크립트
배열 : Array 객체 필살기 037~040
날짜, 요일, 시간 : Date 객체 필살기 041~043
문서 속성 : Document 객체 필살기 044~047
이미지 속성 : Image 객체 필살기 048
폼 속성 : Button, Checkbox, Password, Radio, Reset, FileUpload Text, Textarea 객체
필살기 049~059
수학 : Math 객체 필살기 060, 061
문자열 속성 : String 객체 필살기 063~065
마우스 속성 : Event 객체 필살기 065, 066
문서의 정보 : Location 객체 필살기 067
윈도우 속성 : Screen, Window 객체 필살기 066, 071~073

활용 스크립트와 스타일시트(CSS)
날짜와 시간 필살기 074~080
글자와 그림 필살기 081~086
윈도우 필살기 087~094
글자와 문단 스타일 필살기 101~114
그림 스타일 필살기 115~124, 128, 129
수평선 스타일 필살기 125, 126
문서 속성 필살기 127, 130~132
테이블의 셀 필살기 133, 136
테이블 속성 필살기 134
테이블과 그림 필살기 135
폼 필살기 137~140
레이어 필살기 141~143
하이퍼링크 필살기 144~149
인쇄 필살기 095
즐겨찾기 필살기 096
시작 페이지 등록 필살기 097
문서의 소스 필살기 098
단축키 필살기 099
저작권 보호 필살기