| 첫째마당 | 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 홈페이지 정보를 파일로 저장하는 쿠키
쿠키란?
형식
동작
무작정 따라하기 윈도우 비스타에서 쿠키 정보 찾아보기