누구나 쓸 수 있는 javascript + css 필살기

제0장 웹 제작을 위한 3박자! HTML+CSS+자바스크립트

제1장 자바스크립트 기초 필살기

구조 파악과 삽입
필살기 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장 객체 지향을 위한 이벤트와 객체 필살기

이벤트[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장 실무 활용을 위한 실용 자바스크립트 필살기

시간과 날짜
필살기 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로 더해지는 활용 필살기

문단
필살기 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 한 문서에서 여러 형태의 롤오버 스타일을 적용하려면