나만의 개성이 느껴지는 독특한 홈페이지를 원한다면? 자바스크립트와 CSS를 통해 도전해보자! HTML구현은 어느 정도 자신 있지만 자바스크립트와 CSS 활용에 있어 기초지식이 없고, 두꺼운 책에 질려버린 이들에게 반가운 책이다. 실무에서 직접 체험한 노하우 중에서 중요한 것만 모아 정리한 것으로 상황별 예제가 제시되어 다양한 웹페이지 표현이 가능하다. 이제 이 책을 이용해 개성 만점의 홈페이지를 만들어보자!
출판사 서평
HTML만으로 부족하다면?
- 눈에 띄는 특별한 웹 공간을 만들려면 javascript와 css를!
블로그, 미니홈피, 카페, 이메일, 홈페이지 등 이미 틀이 정해진 웹 공간에서 나만의 웹 페이지를 만들기 위?해 HTML을 쓰게 된다. 그러나 HTML의 단순함으로 인해 곧 한계에 봉착하게 된다. HTML로 색깔과 글자 모양 등 웹 페이지의 기본 모양은 쉽게 만들 수 있지만 웹 요소들을 색다르게 꾸며 톡톡 튀는 웹 페이지를 만들려면 javascript와 css를 활용해야 한다. 웹 2.0 시대, 아무리 웹이 바뀌고 시대가 변...
>> HTML만으로 부족하다면?
- 눈에 띄는 특별한 웹 공간을 만들려면 javascript와 css를!
블로그, 미니홈피, 카페, 이메일, 홈페이지 등 이미 틀이 정해진 웹 공간에서 나만의 웹 페이지를 만들기 위해 HTML을 쓰게 된다. 그러나 HTML의 단순함으로 인해 곧 한계에 봉착하게 된다. HTML로 색깔과 글자 모양 등 웹 페이지의 기본 모양은 쉽게 만들 수 있지만 웹 요소들을 색다르게 꾸며 톡톡 튀는 웹 페이지를 만들려면 javascript와 css를 활용해야 한다. 웹 2.0 시대, 아무리 웹이 바뀌고 시대가 변해도 인터넷이라는 드넓은 바다에서 차별화된 색다른 웹 페이지로 누리꾼들의 시선을 붙잡아두려면 javascript와 css에서 그 해답을 찾아라!
>> javascript와 css가 어렵다고?
- 필요한 것만 쉽게 찾아 누구나 쓸 수 있는 javascript + css 필살기
웹 페이지를 좀더 화려하고 역동적으로 만들고 싶지만 javascript와 css가 어려워 엄두도 못내는 사람들이 많다. 각종 문법들이 결합된 길고 긴 코드가 마치 해독 불가능한 암호처럼 보여 javascript와 css를 어떻게 써야할지 몰라 망설였다면 이 책에서 그 해결법을 찾을 수 있다. 먼저 웹 공간에서 구현하고 싶었던 바로 그것을 이 책의 간단명료한 목차를 통해 쉽게 찾을 수 있다. 또한 1~2 페이지로 간결하게 정리된 필살기 실용 예제는 웹 공간에 바로 가져다 쓸 수 있다. 필요한 것만 제대로 잘 찾아 쓰는 것이 디지털 시대를 살아가는 지혜이고 노하우다. ≪누구나 쓸 수 있는 javascript + css 필살기≫는 웹 공간을 색다르게 꾸미고 싶은 사용자들에게 필요한 것만 용도에 맞게 간추려서 바로 쓸 수 있게 제시한다.
>> 실용 예제만으로 꾸민 최초의 책!
- 이론을 위한 이론 설명이 아닌 실무 예제로 javascript와 css 활용을!
자바스크립트가 어렵다고 느끼는 가장 큰 이유는 이해하기 어려운 길고 지루한 이론 설명과 실무에 바로 쓰기 힘든 예제들 때문일 것이다. 변수, 함수, 객체, 이벤트, 연산자 등의 어려운 개념과 용어들을 이해하려다 지쳐 중도에 포기한 독자들이라면 이 책을 꼭 봐야만 하는 이유가 있다. 이 책에는 이론을 위한 이론 설명을 과감히 빼버리고 실용 예제만으로 구성하여 누구나 쉽게 웹 페이지에 필요한 자바스크립트와 스타일시트를 바로 쓸 수 있도록 했다. 에는 자바스크립트와 스타일시트의 개념, 문법, 활용이 실용 예제 안에서 입체적으로 살아 움직인다.

목차
차례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 마우스 움직임