책소개
실무 예제 및 동영상으로 배우는 최상의 웹 프로그래밍 입문서
HTML · CSS · 자바스크립트는 모든 웹 프로그래밍 분야의 기본이 되는 언어입니다. 웹 개발자를 지망하는 전문가 그룹부터 자신의 온라인 공간을 꾸미고 싶은 일반인까지 꼭 알아두어야 할 정도로 넓은 범위에서 사용되고 있습니다. 이 책은 웹 프로그래밍을 배우려는 입문자, 실무 분야에 처음 뛰어든 개발자에게 꼭 필요한 최신 경향의 웹 프로그래밍 이론을 제시하고 학교 과제나 실무에서 바로 뽑아 쓸 수 있는 280개의 예제를 제공합니다. 또한 저자가 직접 가르치는 동영상 강의를 통해 웹 프로그래밍 개발 과정을 쉽고 편하게 배울 수 있도록 도와줍니다.
최신 웹 표준을 이해하는 능력을 키운다
소스 코드와 디자인 요소의 효율적인 배치와 구성 요소들 간의 조화를 중시하는 최신 웹 표준이 확립되면서 실무 환경에서는 HTML?CSS?자바스크립트의 이해 능력이 높은 사람이 실무 적응력과 응용력이 좋다는 평가를 받습니다. 이 책에서는 HTML과 CSS 요소들의 연관성을 강조한 첫째마당과 동적인 효과를 구현하는 자바스크립트를 자세히 소개하는 둘째마당을 통해서 저자가 다년간의 웹 프로그래밍 강의 과정에서 습득한 웹 프로그래밍 입문 과정의 많은 노하우를 풀어냅니다.
첫째마당에서는 HTML과 CSS의 연관성을 이해합니다
둘째마당에서는 자바스크립트의 동적인 효과를 소개합니다
학교 과제 및 회사 실무에서 바로 쓰는 280개 예제
많은 컴퓨터 공학도들과 실무자들이 프로그래밍 책에서 가장 중요시하는 부분은 예제입니다. 자신에게 필요한 예제를 찾아서 이론을 습득하거나 예제를 자신의 필요에 맞게 변경하다보면 전체적인 프로그래밍 언어의 구조를 이해하는데 많은 도움을 받기 때문입니다. 이 책에서는 소스 코드, 말풍선, 결과 화면의 3요소로 구성된 필수예제 153개와 29개의 '무작정 따라하기'를 통해서 예제만 참고해도 웹 프로그래밍 습득이 가능합니다. 또한 본문 설명에 도움을 주는 100여개의 추가 예제를 더한 총 280개 예제 파일을 제공하여 학교 과제 및 회사 실무에서 필요한 예제를 바로 뽑아서 적용할 수 있습니다.
목차
| 첫째마당 | HTML과 CSS
01 웹 문서를 논리적이고 깔끔하게 만드는 HTML과 CSS
HTML이란?
HTML을 배우는 이유
전문 HTML 통역사, 웹 브라우저
인터넷 익스플로러
파이어폭스
오페라
브라우저에서 HTML을 읽는 방법
[잠깐만요] HTML과 표준 규약
HTML 편집 프로그램
메모장
HTML 전용 편집기
위지윅 편집기
HTML과 관련된 웹 언어
XHTML
자바스크립트
서버 스크립트 언어
[잠깐만요] HTML 파일을 저장할 때 주의하세요.
스타일 시트란
스타일 시트를 사용해야 하는 이유
스타일 시트의 사용방법
스타일의 종류
태그 스타일
클래스 스타일
ID 스타일
스타일의 적용 규칙
상속
스타일의 우선순위
[잠깐만요] 웹 표준이란?
무작정 따라하기 실습 파일 설치하기
무작정 따라하기 나의 첫 번째 HTML 문서 만들기
무작정 따라하기 윈도우 탐색기에서 파일 확장자 표시하기
02 웹 문서의 형태를 결정하는 기본 구조와 배경 다루기
HTML 문서의 기본 구조
HTML 태그의 특징
여는 태그와 닫는 태그의 구분
대소문자를 구별하지 않고 사용
들여쓰기가 적용되지 않음
[잠깐만요] html 태그나 body 태그가 빠진 이유
글자와 글자 사이는 한 칸만 인식
태그 안에 속성 정의가 가능
비추천 태그와 속성이 존재
문서 정보 지정하기 - meta 태그
문자셋 지정하기
키워드와 요약 정보 제공하기
웹 문서 제작 프로그램과 제작자 지정하기
[잠깐만요] 문서 유형을 알려주는 DOCTYPE
일정 시간 후 자동으로 다른 홈페이지 연결하기
문서 제목 지정하기 - title 태그
단락 제목 지정하기 - hn 태그
수평선 삽입하기 - hr 태그
주석 삽입하기 - !-- --
글자색 바꾸기 - color 속성
색상 표시 방법
[잠깐만요] 스타일 속성 표를 읽는 방법
웹 문서의 배경 다루기 - background 속성
문서 배경색 바꾸기 - background-color 속성
배경 이미지의 경로 지정하기 - background-image 속성
배경 이미지 반복하기 - background-repeat 속성
배경 이미지 고정하기 background-attachment 속성
배경 이미지의 위치 지정하기 - background-position 속성
모든 속성을 한꺼번에 지정하기 - background 속성
무작정 따라하기 자주 사용하는 메모장 프로그램의 바로 가기 만들기
무작정 따라하기 오른쪽 아래에 고정된 배경 이미지 삽입하기
무작정 따라하기 중요한 내용을 형광펜으로 색칠하기
실전예제
03 웹 문서에 내용을 채우는 글자와 단락 다루기
단락 구분하기 - p 태그
줄 바꾸기 - br 태그
[잠깐만요] p 태그를 줄바꿈 태그로 사용하지 마세요.
다양한 텍스트 관련 태그들
사용자의 입력 형식을 그대로 보여주기 - pre 태그
인용한 내용을 구별하기 - blockquote 태그
기타 텍스트 태그들
순서 목록 만들기 - ol / li 태그
순서없는 목록 만들기 - ul / li 태그
정의 목록 만들기 - dl / dt / dd 태그
글꼴 다루기 - font 속성
글꼴 지정하기 - font-family
글자 크기 지정하기 - font-size
이탤릭체 지정하기 - font-style
글꼴 굵기 지정하기 - font-weight
작은 대문자 표시하기 - font-variant
줄 간격 지정하기 - line-height 속성
글자 간격과 단어 간격 지정하기 - letter-spacing / word-spacing 속성
단락 다루기 - text 속성
단락의 첫 글자 들여쓰기 - text-indent 속성
텍스트 정렬하기 - text-align 속성
글자에 효과주기 - text-decoration 속성
무작정 따라하기 웹 문서에 텍스트 입력하기
무작정 따라하기 순서 없는 목록으로 항목 나열하기
무작정 따라하기 정의 목록을 이용하여 항목 나열하기
무작정 따라하기 글자를 보기 좋게 정리하기
무작정 따라하기 웹 문서의 텍스트 단락 구분하기
무작정 따라하기 스타일 시트를 이용한 텍스트 조절하기
04 여백과 테두리를 잡아주는 박스 모델 스타일 시트 다루기
박스(box) 형태의 텍스트 단락
바깥 여백 지정하기 - margin 속성
안 여백 지정하기 - padding 속성
테두리 지정하기 - border 속성
테두리 두께 지정하기 - border-width 속성
테두리 색상 지정하기 - border-color 속성
테두리 스타일 지정하기 - border-style 속성
목록 스타일 지정하기 - list-style 속성
목록의 불릿 유형 지정하기 - list-style-type 속성
불릿 위치 지정하기 - list-style-position 속성
불릿을 이미지로 바꾸기 - list-style-image 속성
목록을 메뉴로 활용하기
세로형 메뉴 ①
세로형 메뉴 ②
가로형 메뉴
무작정 따라하기 텍스트 단락의 여백과 테두리 조절하기
한걸음 더 목록을 이용한 다양한 내비게이션 메뉴
실전 예제
05 홈페이지를 깔끔하게 정리하는 표와 폼 다루기
표 만들기
표의 시작과 끝 정리하기 - table 태그
표에 제목 붙이기 - caption 태그
열과 행, 제목 지정하기 - tr, td, th 태그
[잠깐만요] 표와 레이아웃의 분리
표 안에 표 넣기
헤더와 푸터, 본문 구분하기 - thead / tfoot / tbody 태그
폼 삽입하기 - form 태그
폼의 주요 속성 정의하기 - input 태그
텍스트 필드 삽입하기 - type="text" 속성
패스워드 필드 삽입하기 - type="password" 속성
라디오 버튼 삽입하기 - type="radio" 속성
체크박스 삽입하기 - type="checkbox" 속성
확인/초기화/버튼 만들기 - type="submit" / type="reset" / type="button" 속성
히든 필드 만들기 - type="hidden" 속성
파일 첨부 버튼 만들기 - type="file" 속성
선택 목록 만들기 - select 태그와 option 태그
선택 목록 정의하기 - select 태그
선택 항목 지정하기 - option 태그
텍스트 영역 만들기 - textarea 태그
셀이 각각 표시되는 테두리 그리기
일반적인 표 테두리 그리기
무작정 따라하기 table 태그를 이용한 영양 비교표 만들기
무작정 따라하기 CSS가 적용된 폼 만들기
06 홈페이지의 꽃 하이퍼링크 만들고 꾸미기
하이퍼링크란?
하이퍼링크의 종류
이미지 링크
텍스트 링크
메뉴 링크
하이퍼링크 만들기 - a 태그와 href 속성
텍스트 링크 만들기
이미지 링크 만들기
상대 경로와 절대 경로
앵커 이용하기 - name 속성
새 창에 링크 열기 - target 속성
링크 밑줄 다루기
밑줄 없애기 - text-decoration:none
밑줄을 점선으로 표시하기 - border-bottom:dotted
링크와 관련된 스타일
마우스 포인터를 링크 위에 올려놓는 상황 - a:hover 스타일
링크를 클릭하는 상황 - a:active 스타일
한번 방문했던 링크에 적용- a:visited 스타일
링크 관련 스타일의 적용 순위
무작정 따라하기 각 문서로 연결하는 링크 만들기
07 홈페이지를 더 멋지게 만드는 이미지와 멀티미디어 파일 삽입하기
이미지 삽입하기 - img 태그
웹 문서와 이미지
이미지를 대신하는 텍스트 만들기 - alt 속성
이미지를 설명하는 텍스트 만들기 - title 속성
alt 속성을 사용하지 않는 경우
[잠깐만요] 다른 홈페이지에 있는 이미지 삽입하기
내 컴퓨터의 이미지를 게시판에 올리기
멀티미디어 파일 삽입하기 - embed / object 태그
embed 태그 사용하기
[잠깐만요] 웹앨범 서비스를 제공하는 구글의 피카사
object 태그 사용하기
웹 서버에 있는 동영상 삽입하기
[잠깐만요] 사용자 컴퓨터에서 액티브엑스(ActiveX) 실행하기
무작정 따라하기 웹 문서에 이미지 삽입하기
무작정 따라하기 인터넷 동영상 퍼오기
한걸음 더 컨트롤을 활성화하지 않고 멀티미디어 파일 재생하기
08 스타일 시트로 홈페이지의 레이아웃 디자인하기
레이아웃 시안 그리기
각각의 요소를 알맞은 그릇에 넣기 - div 태그
요소들을 원하는 위치에 배치하기 - position 속성
동등한 위치에 배치하기 - static 속성값
상대적인 위치에 배치하기 - relative 속성값
절대적인 위치에 배치하기 - absolute 속성값
요소의 좌우 위치를 지정하기 - float 속성
float 속성을 취소하기 - clear 속성
무작정 따라하기 스타일 시트로 내용 배치하기
무작정 따라하기 스타일 시트 숨겨 두기
| 둘째마당 | 자바스크립트
09 움직이는 홈페이지 자바스크립트
자바스크립트란?
HTML과 자바스크립트의 관계
자바스크립트의 탄생
[잠깐만요] 자바스크립트와 자바는 다른 언어입니다.
자바스크립트의 동작 원리
자바스크립트 소스 작성 요령
자바스크립트의 선언 방법
내부 스크립트 사용하기
외부 스크립트 연결하기
외부 스크립트의 장점과 단점
코딩을 위해 지켜야 할 규칙
스크립트 실행하기
head 태그와 /head 태그 사이에 자바스크립트 삽입하기
body 태그 바로 다음에 자바스크립트 삽입하기
/body 태그 바로 직전에 자바스크립트 삽입하기
이벤트 핸들러 이용하기
무작정 따라하기 HTML 문서에 자바스크립트 삽입하기
무작정 따라하기 외부 스크립트 연결하기
10 기본을 튼튼히 다져주는 자바스크립트 기초 문법 1
자바스크립트 변수
변수 이름
변수 선언하기
변수 영역
저장 유형
데이터 유형
숫자형
[잠깐만요] 용어 통일은 어려워요!
[잠깐만요] 색상값 표현은 16진수입니다.
논리형
문자열
[잠깐만요] 특수 문자 사용법
null
연산자
산술 연산자
문자열 연산자
대입 연산자
비교 연산자
논리 연산자
데이터 유형 연산자
연산자의 우선순위
대화상자
경고 창
확인 창
프롬프트 창
조건문
if 문
else 문
중첩된 if-else 문
switch 문
무작정 따라하기 사용자가 입력한 문자 테스트하기
한걸음 더 2진수와 8진수, 그리고 16진수
한걸음 더 비트 연산자와 시프트 연산자
11 기본을 튼튼히 다져주는 자바스크립트 기초 문법 2
반복문
for 문
while 문
do … while 문
break 문
[잠깐만요] for 문, while 문, do...while 문의 삼각관계
continue 문
함수
함수와 매개변수
함수와 인수
기본 인수가 필요한 함수의 사용법
[잠깐만요] script 태그 위치에 따른 실행 순서 차이
return 문
이벤트와 이벤트 핸들러
이벤트
이벤트 핸들러
[잠깐만요] 이벤트 핸들러가 대소문자를 인식하는 방법
인라인 이벤트 핸들러
함수와 함께 이벤트 핸들러 사용하기
객체
프로퍼티
메서드
인스턴스 객체 만들기
한걸음 더 오류를 줄이기 위한 소스 작성 방법
12 어디에서든 활용하는 기본 내장 객체
내장 객체의 구조
내장 객체의 종류
HTML 태그와 자바스크립트 객체의 관계
배열 다루기 - Array 객체
배열 선언
배열 길이 알아내기 - length 프로퍼티
다차원 배열
메서드
날짜와 시간 정보 조절하기 - Date 객체
인스턴스 객체 만들기
메서드
문자열을 다양하게 활용하기 - String 객체
문자열 길이 구하기 - length 프로퍼티
글꼴 관련 메서드
링크 관련 메서드
문자열 위치 관련 메서드
문자열 추출 관련 메서드
수학적 계산 실행하기 - Math 객체
프로퍼티
메서드
함수를 객체로 정의하기 - Function 객체
최대/최소/무한대 다루기 - Number 객체
화면 정보 가져오기 - Screen 객체
무작정 따라하기 하루를 시작하는 메시지 표시하기
13 브라우저를 움직이는 window 객체
window 객체
window 객체 프로퍼티
[잠깐만요] body 태그에서 프로퍼티 지정하기
window 객체 메서드
새 브라우저 창 열기 - open() 메서드
[잠깐만요] 팝업 창의 위치를 원하는 곳으로 지정하기
브라우저 창 닫기 - close() 메서드
창의 위치 조절하기 - moveBy() / moveTo() 메서드
창의 크기 조절하기 - resizeBy() / resizeTo() 메서드
시간과 관련된 동작 지정하기 - setTimeout() / clearTimeout() 메서드
무작정 따라하기 이벤트 핸들러를 이용한 팝업 창 열기
실전예제
14 브라우저의 정보를 다루는 location / history / navigator 객체
웹 문서 주소 정보 다루기 - location 객체
프로퍼티
메서드
브라우저 주소 목록 저장하기 - history 객체
프로퍼티
메서드
[잠깐만요] 인터넷 익스플로러 브라우저를 구별하는 방법
브라우저 정보 보여주기 - navigator 객체
프로퍼티
메서드
무작정 따라하기 현재 웹 문서에 위치 고정하기
15 내용을 돋보이게 하는 document 객체
문서 내용 다루기 - document 객체
프로퍼티
문서 정보와 관련된 프로퍼티
메서드
문서에 내용 입력하기 - write() / writeln() 메서드
문서 안의 앵커 정보 이용하기 - anchor 객체
문서 안 앵커 개수 확인하기 - length 프로퍼티
웹 문서의 링크 정보 이용하기 - link 객체
프로퍼티
웹 문서의 이미지 정보 이용하기 - image 객체
프로퍼티
무작정 따라하기 이미지 슬라이드 쇼 만들기
16 완벽한 회원 가입 양식을 만드는 form 객체
폼과 자바스크립트
form 객체
form 객체의 하위 객체
form 태그와 관련된 프로퍼티
form 태그와 관련 없는 프로퍼티 - elements / length 프로퍼티
form 요소를 순서대로 배열하기 - forms 프로퍼티
form 객체 메서드
텍스트 필드 관리하기 - text 객체
프로퍼티
메서드
이벤트 핸들러
패스워드 필드 관리하기 - password 객체
[잠깐만요] 주소 표시줄에 아이디와 비밀번호가 다 보입니다.
프로퍼티 / 메서드 / 이벤트 핸들러
텍스트 영역 관리하기 - textarea 객체
프로퍼티 / 메서드 / 이벤트 핸들러
히든 필드 관리하기 - hidden 객체
프로퍼티
버튼 관리하기 - button / submit / reset 객체
프로퍼티
[잠깐만요] 자바스크립트가 할 수 있는 일과 할 수 없는 일
이벤트 핸들러
체크박스 관리하기 - checkbox 객체
프로퍼티
메서드
이벤트 핸들러
라디오 버튼 관리하기 - radio 객체
프로퍼티
메서드
이벤트 핸들러
콤보 메뉴 관리하기 - select 객체
프로퍼티
메서드
이벤트 핸들러
options 배열 프로퍼티
생성자를 이용해 Option 객체 만들기
파일 업로드 관리하기 - fileUpload 객체
프로퍼티
메서드
이벤트 핸들러
무작정 따라하기 비밀번호가 같은지 확인하기
17 홈페이지 정보를 파일로 저장하는 쿠키
쿠키란?
형식
동작
무작정 따라하기 윈도우 비스타에서 쿠키 정보 찾아보기
