1장 HTML 소개와 HTML 기본 구조
HTML은 어디에 사용되나요?
홈페이지
메일을 보낼 때
커뮤니티 첫 페이지 장식
게시글 장식
HTML이란?
하이퍼텍스트
마크업과 HTML
HTML 문서의 기본 구조
- 예제 - HTML 기본구조 : ht1-1.html
HTML 문서의 기본 태그
HTML 문서를 구성하는 기본 태그 4가지
HTML 문서의 시작과 종료
HTML 문서의 머리 부분
HTML 문서의 타이틀
HTML 문서의 몸통 부분
메모장을 이용한 HTML 문서 작성하기
:: 따라하기 - HTML 문서 작성하기
:: 따라하기 - 웹 브라우저에서 HTML 문서 미리보기

2장 HTML 기본 태그 익히기
소스 내에 주석 삽입하는 방법
- 예제 - 문서의 구성 : ht2-1.html
문서의 제목을 위해 사용되는 태그
- 예제 - Hn 태그 연습 : ht2-2.html
줄 바꿈에 사용하는 태그
- 예제 - BR 태그 연습 : ht2-3.html
- 예제 - 줄 바꿈 태그 : ht2-4.html
입력한 대로 보여주기 위해 사용하는 태그
- 예제 - Pre 태그 : ht2-5.html
단락에 사용하는 태그
- 예제 - P 태그 : ht2-6.html
P 태그의 align 속성을 사용하여 정렬 방식 결정하기
- 예제 - 문단 정렬 : ht2-7.html
수평선을 사용하여 단락을 구분하는 태그
- 예제 - HR 태그vht2-8.html
페이지의 배경색 지정하는 속성
- 예제 - 배경색 변경 : ht2-9.html
문단을 가운데 정렬하기 위한 태그
- 예제 - 문단 가운데 정렬 : ht2-10.html
제목 정렬하기
- 예제 - 제목 정렬하기 : ht2-11.html

3장 글자와 목록 관련 태그
글자의 서식을 지정하기 위한
글자의 크기를 지정하기 위한 태그
- 예제 - 글자 크기 지정 : ht3-1.html
기본 글자의 크기를 지정하기 위해 사용되는 태그
- 예제 - 기본 글자 크기 지정 : ht3-2.html
글자의 상대 크기를 지정하기 위해 사용하는 태그
- 예제 - 글자 크기 변경 : Ht3-3.html
글자의 색을 부분적으로 지정하기 위해 사용하는 태그
- 예제 - 글자 색상 지정 : ht3-4.html
글꼴을 변경하기 위해 사용하는 태그
- 예제 - 글꼴 변경 : ht3-5.html
글자에 장식 효과를 주는 태그들
- 예제 - 글자 장식 효과 : ht3-6.html
특수문자(&특수이름, &#아스키 코드)
- 예제 - 특수 문자 사용 : ht3-7.html
문서 전체의 텍스트 색상 지정하기
- 예제 - 문서 텍스트 색상 지정 : ht3-8.html
인용 문단을 구별하기 위한 태그
- 예제 - 인용문단 구분 : ht3-9-1.html
문서 작성자를 알리기 위한 태그
- 예제 - 문서 작성자 삽입 : ht3-9-2.html
목록에 관련된 태그
순서가 없는(비서열형) 목록을 만들기 위한 태그
- 예제 - 목록 만들기 : ht3-10.html
순서가 있는(서열 형) 목록을 만들기 위한 태그
- 예제 - 번호 있는 목록 : Ht3-11.html
정의 목록을 만들기 위한 태그
- 예제 - 정의 목록 만들기 : Ht3-12.html
움직이는 텍스트를 만드는 태그
- 예제 - 움직이는 텍스트 : Ht3-13.html
태그의 behavior 속성
- 예제 - 움직이는 텍스트 속성 지정 : Ht3-14.html
태그의 direction 속성
- 예제 - 방향 조절 : Ht3-15.html
태그의 scrolldelay, scrollamount 속성
- 예제 - 스크롤 속도 지연 : Ht3-16.html
태그의 bgcolor, loop 속성
- 예제 - 문자열 배경색 지정 : Ht3-17.html
게시판에 튀게 글 올리기
:: 따라하기 - 개성있는 게시판

4장 이미지
이미지 관련 태그
이미지 삽입하기 위한 태그
- 예제 - 이미지 삽입 : ht4-1.html
상대 경로 절대 경로
- 예제 - 경로 지정 : ht4-2.html
이미지에 설명을 나타내기 위한 태그
- 예제 - 이미지에 설명 넣기 : Ht4-3.htm
이미지의 테두리선
- 예제 - 이미지에 테두리 지정 : Ht4-4.html
이미지와 함께 있는 글자의 위치를 지정하는 속성
- 예제 - 이미지에 출력되는 글자 정렬 : Ht4-5.html
이미지의 위치를 지정하기
- 예제 - 이미지의 위치 지정 : Ht4-6.html
이미지 주변에 여백을 설정하기 위한 속성
- 예제 - 이미지 주변 여백 지정 : Ht4-7.html
이미지의 출력 크기 조절하기 위한 속성
- 예제 - 이미지 크기 조절 : Ht4-8.html
이미지의 width와 height 속성
- 예제 - 이미지 크기 속성 : Ht4-9.html
이미지를 배경으로 삽입하기
- 예제 - 이미지로 배경 삽입 : Ht4-10.html
다른 사이트에 있는 이미지 올리기
:: 따라하기 - 이미지를 게시판에 올리기
플래쉬(flash) 효과를 볼 수 있는 필터
필터 정의하기
그림이나 글씨의 불투명도를 결정하는 Alpha 필터
- 예제 - 이미지 보이기 : Ht4-11.html
- 예제 - Alpha 필터 사용 : Ht4-11-2.html
- 예제 - 멀티미디어 효과 내기 : Ht4-11-3.html
Blur 필터를 이용하여 그림을 번지게 하는 효과 내기
- 예제 - 이미지 번짐 효과 : Ht4-12.html
Wave 필터를 이용한 물결 효과
- 예제 - 이미지의 물결 효과 : Ht4-13.html
FilpV와 FilpH 필터를 이용한 요소 대칭하기
- 예제 - 이미지 요소 대칭 : Ht4-14.html
활용 예제
- 예제 - 이미지와 텍스트 활용 : Ht4-16.html

5장 하이퍼링크
하이퍼링크 기본
HTML 문서의 연결
문서의 이동
링크의 색상 지정하기
링크 색상 변경
다른 홈페이지로 연결
- 예제 - 다른 홈페이지 이동 : ht5-3.html
이미지 혹은 다른 홈페이지를 링크로 설정하기
이미지로 링크
이미지를 하이퍼링크로 사용
이 메일을 보내는 하이퍼링크
- 예제 - 이메일 보내기 : Ht5-5.html
현재 HTML 문서의 지정된 위치로 링크 설정
- 예제 - 앵커의 사용:Ht5-6.html
절대 경로와 상대 경로
- 예제 - 절대 경로, 상대 경로:ht5-7.html
음악, 동영상 파일 링크하기
- 예제 - 음악, 동영상 파일 링크하기:Ht5-8.html
압축파일, 실행 파일 링크하기
- 예제 - 압축파일, 실행 파일 링크하기:Ht5-9.html
링크 결과를 다른 창에 열기
- 예제 - 링크 결과를 다른 창에 열기: Ht5-10.html
내 홈페이지 홍보하기
- 예제 - 홈페이지 홍보하기:Ht5-11.html
이미지 맵 만들기
이미지 맵을 만드는 태그
사각형으로 이미지 맵 만들기
:: 따라하기 - 사각형으로 이미지 맵 만들기
원형으로 이미지 맵 만들기
:: 따라하기 - 원형으로 이미지 맵 만들기

6장 멀티미디어
음악 파일 삽입하기
음악 파일 연결하기
- 예제 - 음악 파일 연결 : ht6-1.html
음악 파일 포함하기
- 예제 - 배경 음악 삽입 : ht6-2.html
embed 태그의 hidden 속성
- 예제 - 배경 음악 플레이어 감추기 : ht6-3.html
embed 태그의 autostart, loop 속성
- 예제 - 배경 음악 반복 지정 : ht6-5.html
게시글에 배경 음악 삽입하기
:: 따라하기 - 게시판에 배경 음악 삽입하기
동영상 파일 삽입하기
동영상 파일 연결하기
- 예제 - 동영상 연결 : ht6-8.html
동영상 파일 포함하기
- 예제 - 동영상 파일 속성 지정 : ht6-9.html
플래시 애니메이션 보여 주기
- 예제 - 플래시 애니메이션 재생 : ht6-10.html

7장 테이블 작성하기
테이블로 웹 문서의 레이아웃 설정
테이블의 기본 구조
테이블의 선언
- 예제 - 테이블 생성 : ht7-1.html
셀 만들기
- 예제 - 테이블 행과 열 : ht7-2.html
테이블에 테두리 표시와 빈 셀 작성하기
- 예제 - 공백 테이블 : ex7-3.html
테이블 안에 이미지 삽입
- 예제 - 테이블 안에 이미지 삽입 : ex7-4.html
테이블 제목과 셀 제목 지정
- 예제 - 캡션과 헤더 셀 : HT7-5.html
테이블의 속성 지정하기
테이블 정렬하기
- 예제 - HT7-6.html
테이블 테두리선의 두께 조절
- 예제 - 테이블 테두리선 조절 : HT7-7.html
테이블에 여백 넣기
- 예제 - 테이블 테두리에 여백 삽입 : HT7-8.html
테이블의 크기 조절
- 예제 - 테이블 크기 조절 : HT7-9.html
테이블로 이미지와 텍스트를 혼합하여 출력
- 예제 - 테이블에 이미지와 텍스트 삽입 : HT7-10.html
테이블에 배경색 지정
- 예제 - 테이블에 배경색 지정 : HT7-11.html
테두리에 색 지정
- 예제 - 테이블 테두리에 색 지정 : HT7-12.html
테이블에 배경 이미지 지정
- 예제 - 테이블에 배경 이미지 지정 : HT7-13.html

8장 테이블 자세히 다루기
셀 안의 내용을 좌우 정렬하기
- 예제 - 셀 안의 내용 정렬 : ht8-1.html
셀의 내용을 상하 정렬하기
- 예제 - 셀 내용의 상하 정렬 : ht8-2.html
셀의 너비와 높이 조정하기
- 예제 - 셀의 너비와 높이 조정 : ht8-3.html
셀 합치기
- 예제 - 셀 합치기 : ht8-4.html
셀에 부분적으로 색상 지정
- 예제 - 셀에 색상 지정 : ht8-5.html
셀에 줄 바꿈 금지
- 예제 - 셀에 속성 지정 : ht8-6.html
테이블을 이용하여 화면 분할
- 예제 - 테이블을 이용한 화면 분할 : ht8-7.html
테이블 안에 테이블 만들기
- 예제 - 테이블 안에 테이블 삽입 : ht8-8.html

9장 테이블을 이용한 레이아웃 설계
테이블로 공지 사항 만들기
- 예제 - 테이블로 공지 사항 만들기 : HT9-1.html
테이블로 메뉴 만들기
- 예제 - 테이블로 메뉴 만들기 : HT9-2.html
테이블로 이미지 메뉴 만들기
- 예제 - 이미지 메뉴 만들기 : HT9-3.html
웹 문서 레이아웃 작성
:: 따라하기 - 커피숍 메인 페이지 제작

10장 프레임 작성하기
프레임의 기본 구조
프레임의 지정
- 예제 - 프레임 가로 나누기 : HT10-1.html
프레임에 파일 연결하기
- 예제 - 프레임 세로 분할과 파일 연결 : HT10-2.html
세로(위아래)와 가로(좌우)를 복합분할하기
- 예제 - 프레임 복합 분할 연결 : ht10-3.html
프레임의 크기 변경금지
- 예제 - 프레임 크기 변경 금지 : ht10-4.html
스크롤바 표시하기
- 예제 - 프레임 스크롤바 표시 : ht10-5.html
프레임의 여백
- 예제 - 프레임에 여백 넣기 : ht10-6.html
타켓 정하기
프레임에서 타겟 지정
창 안에 작은 창 IFRAME 태그
IFrame으로 창 넣기
프레임 테두리의 두께와 색상 조절
- 예제 - 프레임 테두리 두께와 색상 조절 : ht10-9.html
프레임 테두리 없애기
- 예제 - 프레임 테두리 삭제 : ht10-10.html
스크롤바가 없는 창
- 예제 - 프레임의 스크롤바 제거 : ht10-11.html

11장 입력 양식 작성하기
입력 양식 폼
간단한 폼 양식 작성하기
- 예제 - 기본 폼 양식 : ht11-1.html
데이터를 입력받는 양식 작성하기
텍스트 입력 양식
- 예제 - 텍스트 입력 폼 : ht11-2.html
암호 입력 양식
- 예제 - 암호 입력 폼 : ht11-3.html
여러 가지 목록 중에서 선택하는 양식 작성하기
체크 박스 양식
- 예제 - 체크 박스 폼 : ht11-4.html
라디오 버튼 양식
- 예제 - 라디오 버튼 삽입 : ht11-5.html
명령을 지시하는 버튼 양식 작성하기
버튼 양식
- 예제 - 버튼 삽입 : ht11-6.html
서브미트 버튼 양식
- 예제 - submit 삽입 : ht11-8.html
리셋 버튼 양식
- 예제 - 리셋 버튼 : ht11-9.html
기타 입력양식 작성하기
텍스트 영역
- 예제 - 텍스트 영역 삽입 : ht11-10.html
콤보 박스 작성하기
- 예제 - 콤보 박스 삽입 : ht11-11.html
리스트 박스 작성하기
- 예제 - 리스트 박스 삽입 : ht11-12.html
회원 가입 문서 만들기
- 예제 - 이름 입력 : ht11-14-01.html
- 예제 - 회원 정보 입력 : ht5-14-02.html
- 예제 - 아이디와 패스워드 입력 : ht5-14-03.html
- 예제 - 목록 상자와 라디오 버튼 추가 : ht5-14-04.html
- 예제 - 기타 정보 입력 : ht5-14-05.html

12장 제로보드 설치와 환경 설정
제로보드 설치와 환경 설정
:: 따라하기 - 계정 만들기
FTP 프로그램 설치하기
:: 따라하기 - FTP 설치하기
제로보드 서버에 올리기
:: 따라하기 - 제로보드 게시판 소스 파일 다운받기
:: 따라하기 - 제로보드 서버에 올리기
:: 따라하기 - 제로보드 설치하기
그룹 관리
:: 따라하기 - 새 그룹 추가하기
회원 관리와 게시판 관리
:: 따라하기 - 회원 관리와 게시판 관리
제로보드 게시판 사용하기
:: 따라하기 - 게시판 사용하기

13장 게시판 스킨 설정
스킨 구하고 설치하는 방법
:: 따라하기 - 제로보드 스킨 구하기
:: 따라하기 - 제로보드 스킨 설치하기
자료실 스킨 구하고 설치
:: 따라하기 - 자료실 스킨 구하기

14장 홈페이지에 제로보드 게시판 연결하기
프레임 셋 홈페이지에 제로보드 연결하기
프레임 셋 만들기
- 예제 - 프레임 구성 : ht14-1.html
head 프레임에 로고 이미지와 상단 메뉴 만들기
로고와 상단 메뉴 구성
홈페이지에 제로보드 게시판 연결하기
:: 따라하기 - 제로보드 스킨 구하기
:: 따라하기 - 제로보드 스킨 설치하기
홈페이지에 갤러리(사진자료실 게시판) 연결하기
:: 따라하기 - 제로보드 스킨 구하기
:: 따라하기 - 제로보드 스킨 설치하기
원 프레임을 이용한 제로보드 게시판 구축하기
원 프레임 홈페이지
- 예제 - 원 프레임 사용 : ht14-5.html
include문
외부 로그인 스킨 적용하기
:: 따라하기 - 외부 로그인 스킨 적용하기
상단과 하단 정리하기
:: 따라하기 - 상단 이미지와 하단 정리하기
그룹 설정 페이지 만들기
:: 따라하기 - 그룹 설정 페이지 만들기

15장 스타일 시트
스타일 시트(CSS)란?
스타일 시트의 기본 형식
여러 가지 속성을 설정하기
홈페이지에 스타일 시트 적용하기
태그에 스타일 설정을 삽입하는 형식(embedding 스타일)
- 예제 - 스타일 시트 적용 : HT15-01.html
외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식(Link 스타일시트)
스타일을 외부 파일에 설정하여 적용하기
HTML 문서의 태그에서 직접 스타일 설정하기(inline 스타일)
- 예제 - 스타일을 태그에 직접 설정하기 : HT15-03.html
색상과 배경 관련 속성
글자색과 배경색을 설정하는 스타일(color와 background 속성)
- 예제 - 글자색과 배경색 설정하는 스타일 : HT15-4.html
배경 이미지에 관련된 background-image/background-repeat 속성
- 예제 - 배경 이미지 지정 : HT15-5.html
배경 이미지의 위치 조정하는 background-position 속성
- 예제 - 배경 이미지의 위치 조정 : HT15-9.html
배경 이미지 고정하는 background-attachment 속성
- 예제 - 배경 이미지 고정 : HT15-10.html

16장 자바스크립트 개요
자바스크립트란?
자바스크립트의 기본 구조
HEAD 부분에 자바스크립트 포함하기
- 예제 - 자바스크립트 삽입 : js01-01.html
BODY 부분에 자바스크립트 포함하기
- 예제 - Body에 자바스크립트 삽입 : js16-02.html
자바스크립트 외부에서 불러들이기
외부 파일로 자바스크립트 작성하기
자바스크립트 부분을 주석 문으로 처리하기
- 예제 - 예제-자바스크립트 주석문 : js16-04.html
자바스크립트 작성과 실행하는 방법
메모장을 이용하여 프로그램 작성하기
:: 따라하기 - 자바스크립트를 메모장에서 작성하기
웹 브라우저에서 자바스크립트 프로그램 실행하기
:: 따라하기 - 자바스크립트를 웹브라우저로 실행하기
자바스크립트의 자료 형(DATA TYPE)
자료형의 종류
변수 만드는 방법
변수 사용하기
연산자란
산술 연산자
관계 연산자
논리 연산자
자바스크립트에 내장된 대화 상자를 이용한 인터페이스
여러 문장 중 한 문장만 선택하여 실행하도록 하는 선택문
if 문
- 예제 - 낮과 밤에 따라 해와 달 이미지 표시 : js16-05.html
switch 문
- 예제 - 요일에 따라 무지개 색으로 배경 변환 : js16-06.html
문장을 여러 번 반복 수행할 수 있게 하는 반복문
for 문
while 문
do while 문
continue 문-제어문을 보조하는 명령문
break 문
반복 사용되는 문장을 기능적으로 나누어 정의하는 함수
내장 함수
문자열을 정수로 변환하는 parseInt 함수
- 예제 - 문자열을 정수로 변환하는 함수 : js02-13.html
사용자 정의 함수
- 예제 - 사용자 정의 함수 사용 : js16-08.html

17장 자바스크립트의 객체
자바스크립트에서 사용되는 객체의 개념 이해하기
객체 지향 프로그램이란?
내장 객체란?
내장 객체 Date를 사용하여 오늘의 날짜를 출력하기
- 예제 - 오늘 날짜 출력 : js17-01.html
- 예제 - 오늘 날짜와 시각 표시 : js17-02.html
- 예제 - 오늘의 요일 표시 : js17-03.html
- 예제 - 날짜 계산 : js17-04.htm
배열을 사용할 수 있도록 하는 Array 객체
배열을 첨자로 접근하여 사용하기
- 예제 - 배열 사용 : js17-05htm
배열의 개수를 나타내주는 length 속성
- 예제 - 배열의 속성 활용 : js17-06htm
배열을 하나의 문자열로 묶어주는 join( ) 메소드
- 예제 - 배열을 문자열로 묶기 : js17-07.htm
문자열을 다루도록 하는 String 객체
문자열의 개수를 나타내주는 length 속성
문자열의 속성을 설정하기
문자열을 하이퍼링크로 설정하는 link( ) 메소드
- 예제 - 문자열을 하이퍼링크로 사용 : js17-08htm
특정 위치로 이동하게 하는 anchor( ) 메소드
- 예제 - 특정 위치로 이동 : js04-15htm
문자열중 원하는 위치의 문자를 찾아주는 charAt( ) 메소드
문자를 앞에서 검색하여 위치를 알려주는 indexOf( ) 메소드
문자를 앞에서 검색하여 위치를 알려주는 lastIndexOf( ) 메소드
문자열을 추출하는 substing( ) 메소드
문자열을 추출하는 slice( ) 메소드
문자열을 추출하는 substr( ) 메소드
substring( )/slice( )/substr( ) 메소드의 차이점 알아보기
- 예제 - 문자열 추출 메소드 비교 : js17-10.htm
문자열을 대소문자로 변경하는 toUpperCase( )/toLowerCase( ) 메소드
문자열을 연결하는 concat( ) 메소드
문자열을 분리하는 split( ) 메소드
수학 공식을 제공하는 Math 객체
- 예제 - 배너 체인지 : js17-11.htm
화면의 정보를 알려주는 Screen 객체
- 예제 - 화면 정보 확인: js17-12.htm

18장 브라우저 객체
브라우저 객체 이해하기
브라우저 객체의 계층구조
브라우저 객체의 접근 방법
창을 제어하는 Window 객체
상태 표시바에 글자를 표시하는 defalutstatus/status 속성
- 예제 - 상태표시줄에 글자 흐르게 만들기 : js18-01.html
새로운 창을 열어주는 window.open( ) 메소드
공지 사항을 알려주기
창을 닫는 window.close( ) 메소드
- 예제 - 창 닫기 : js18-03.html
일정한 시간 후에 명령을 수행하는 setTimeout/ClearTimeout 메소드
- 예제 - 타이머 활용 : js18-04.html
일정한 시간 간격마다 반복적으로 명령을 수행하는 setInterval/closeInterval 메소드
- 예제 - 반복적인 작업 수행 : js07-05.html
하위 창을 열어준 부모 창을 가리키는 opener 속성
- 예제 - 부모 창 제어 : js07-09.html
창을 분할하는 프레임을 제어하는 Frame 객체
프레임의 위치를 지정하는 frames 속성
- 예제 - 프레임 위치 지정 : js18-07.html
자신의 상위 계층을 지칭하는 parent 속성
- 예제 - 상대편 프레임 배경색 변경 : js08-08.html
태그의 NAME 속성을 프레임 객체로 사용하기
최상위 계층을 지칭하는 top 속성
- 예제 - 상위 프레임 접근 : 18-10.html
왼쪽 프레임의 단추를 클릭하여 오른쪽 프레임의 그림 변경하기
- 예제 - 상대편 프레임의 그림 변경 : 18-11.html
자기 자신이 속한 프레임을 지칭하는 self 속성
- 예제 - js18-12.html
최근 방문한 주소를 기억하는 History 객체
히스토리 리스트의 개수를 알려주는 length 속성
- 예제 - 히스토리 리스트 확인 : js18-13.html
뒤로 앞으로 이동해 주는 back( )/forward( ) 메소드
- 예제 - 앞으로 페이지로 이동 : js18-14.html
- 예제 - 뒤로, 앞으로 페이지 이동 : js18-15.html
여러 단계씩 뒤로 앞으로 이동하게 하는 go( ) 메소드
- 예제 - 2단계 앞 뒤 페이지로 이동 :js18-16.html
주소 입력란의 주소 정보를 제어하는 Location 객체
현재 문서의 URL 주소를 알려주거나 설정하는 href 속성
- 예제 - 원하는 사이트로 이동 : js18-17.html
입력한 URL로 문서를 이동하는 replace( ) 메소드
- 예제 - js18-18.html
문서를 다시 읽어 들이는 reload( ) 메소드
- 예제 - 다시 읽기 : js18-19.html
브라우저의 정보를 제공해주는 Navigator 객체
- 예제 - 브라우저 정보 : js18-20.html
자바를 사용할 수 있는지 판단해 주는 javaEnabled( ) 메소드
- 예제 - 자바 지원 여부 확인 : js18-21.html
웹 브라우저를 판별하기
- 예제 - 웹 브라우저 반별 : js18-22.html

19장 Document 객체와 Document 하위 객체
Document 객체의 개념
문서에 문자열을 출력하는 write( ) 메소드
- 예제 - 이미지 출력 : js12-01.html
문서에 문자열을 출력하고 줄을 한 줄 바꾸어 주는 writeln( ) 메소드
- 예제 - 문자열 출력 : js19-02.html
문서의 제목 줄의 정보를 알려주는 title 속성
- 예제 - 문서 제목줄 변경 : js19-03.html
문서의 최종 수정날짜를 표시해 주는 lastmodified 속성
- 예제 - 문서의 최종 수정 날짜 표시 : js19-04.html
웹 페이지의 배경색을 변경하는 bgColor 속성
- 예제 - 웹페이지 배경색 변경 : js19-05.html
웹 페이지의 글자색을 변경하는 fgColor 속성
- 예제 - 웹페이지의 글자색 변경 : js18-06.html
문서를 열고 닫는 open/close 메소드
- 예제 - 문서 열고 닫기 : js18-07.html
그림에 대한 정보를 알려주는 Image 객체
- 예제 - 그림의 개수와 이름 출력 : js19-08.html
그림 파일의 경로를 알려주는 src 속성
- 예제 - 마우스 위치에 따라 이미지 변경 : js19-09.html
이미지 객체로 객체 변수를 선언하여 사용하기
- 예제 - 일정 시간에 이미지 교체 : js13-04.html
입력양식을 제어하는 Form 객체
Form 객체의 개념
Form 객체의 하위 객체의 종류
특정 폼을 구별해주는 forms 속성
태그의 NAME 속성을 폼 객체로 사용하기
정보를 입력하는 Text 객체와 Password 객체와 TextArea 객체
태그의 NAME 속성을 Text 객체로 사용하기
글 상자에 입력된 값을 알려주는 value 속성
- 예제 - 왼쪽 글상자를 오른쪽으로 이동 : js14-01.html
암호 입력상자에 커서를 설정/해제하는 focus/blur 메소드
- 예제 - 암호 입력 상자 : js19-12.html
입력상자의 내용을 모두 선택하는 select( ) 메소드
- 예제 - 입력상자의 내용 선택 : js19-13.html
이벤트를 발생하는 Button 객체와 Submit 객체와 Reset 객체
단추를 마우스로 눌렀을 때 발생하는 onmouseDown 이벤트 핸들러
- 예제 - 마우스 클릭 이벤트 : js19-14.html
목록 상자와 콤보 상자의 정보를 알려주는 Select 객체
선택된 항목의 번호를 알려주는 selectedIndex 속성
- 예제 - 선택된 항목에 따라 배경색 바꿈 : js19-15.html
목록 상자의 항목을 선택하였을 때 발생하는 OnChange 핸들러
- 예제 - 목록 선택에 따라 사진 나타내기 : js19-16.html
지정한 항목이 선택되어 있는지 여부를 알려주는 selected 속성
- 예제 - 리스트 선택에 따라 웹사이트 띄우기 : js19-18.html
한가지 항목만 선택하는 라디오 단추의 정보를 알려주는 Radio 객체
라디오 단추 상자의 특정 항목에 대한 정보를 알려주는 속성
사이트 선택하면 해당 웹 페이지를 로드하기
- 예제 - 사이트 선택하면 웹페이지 로딩 : js19-19.html

20장 자바스크립트 홈쳐 쓰기
자바스크립트 관련 소스를 얻을 수 있는 웹 사이트 소개
자바스크립트 소스를 HTML 문서에 적용하기
:: 따라하기 - 이미지에 플래시 효과
:: 따라하기 - 이미지에 롤오버 효과
:: 따라하기 - 메뉴에 플래시 효과
:: 따라하기 - 메뉴의 롤오버 효과
:: 따라하기 - 마우스 주위를 동그라미들이 따라 다니는 효과

인덱스