소장자료검색

책소개

처음으로 웹 프로그래밍을 접하거나 HTML에 익숙하지 않은 초보자를 위한 책으로 Html과 Css, JavaScript를 한 권에 담고 있다. Html은 홈페이지 디자인에 필수인 언어로 이미지나 텍스트 크기와 관련되어있다. Css는 스타일시트라고 하며 폰트 크기를 일괄적으로 지정하거나 텍스트 박스 사이즈를 조정 등의 역할을 한다. JavaScript는 동적인 홈페이지를 위한 스크립트 언어로 이 세가지 모두를 익혀야 자신이 원하는 다양한 홈페이지 기능을 삽입할 수 있다.

저자의 프로그래밍 경험을 담아서 단계별로 이해하기 쉽게 설명하고 있으며, 예제를 통하여 문법을 보다 쉽게 이해할 수 있다. 홈페이지 디자인을 시작하는 초보자를 위한 쉬운 설명으로 HTML, CSS, JavaScript를 종합적으로 이용하는 법 등의 내용이 수록되어 있다.

목차

Part 1 HTML

Chapter 01초보를 위한 HTML 가이드
홈페이지를 제작하기 위한 HTML
HTML 구조 파악하기
태그 파악하기
HTML 문서를 구성하는 기본 태그 4가지
HTML 문서 작성과 확인
소스 내에 주석 삽입하기 〈!-- --〉
어떤 웹 에디터를 사용할 것인가?
HTML 문서를 만드는 도구
에디트 플러스의 특징
드림위버의 특징
나모의 특징

Chapter 02 HTML의 가장 기본이 되는 태그 정복하기
body 태그에 사용되는 속성
HTML 문서에 배경색 지정하는 bgcolor 속성
HTML 문서에 배경 그림 지정하는 background 속성
줄 바꿈과 공백처리하기
줄을 바꾸는 태그
문단 나누는 〈p〉 태그
공백 처리하는  
특수 문자 출력하는 &특수이름, &#아스키코드
입력한 대로 보여주는 〈pre〉 태그
내용을 가운데로 정렬하는 〈center〉 태그
구분선을 그리는 〈hr〉 태그
제목을 위한 〈Hn〉 태그
제목 정렬하기

Chapter 03텍스트를 내 마음대로 표현하기
글꼴을 다양하게 바꾸는 〈FONT〉
글자의 크기를 바꾸는 size 속성
글자의 색상 지정하는 color 속성
글꼴을 변경하는 face 속성
기본 글자 크기 지정하는 〈BASEFONT〉 태그
글자의 크기를 상대적으로 지정하기
글자에 장식효과를 주는 태그들
문서 전체의 텍스트 색상 지정하기
다른 문장과의 구별을 위한 〈BLOCKQUOTE〉 태그
문서 작성자를 알리기 위한 〈ADDRESS〉 태그
목록에 관련된 태그
순서가 없는 목록 나열하는 〈UL〉 태그
순서가 있는 목록 나열하는 〈OL〉 태그
정의 목록을 나열하는 〈DL〉 태그
움직이는 텍스트를 만드는 〈MARQUEE〉 태그
〈MARQUEE〉 태그의 behavoir 속성
〈MARQUEE〉 태그의 direction 속성
〈MARQUEE〉 태그의 scrolldelay, scrollamount 속성
〈MARQUEE〉 태그의 bgcolor, loop 속성

Chapter 04 이미지 태그로 화려하게 꾸미기
이미지 태그
이미지 삽입하기 위한 src 속성
상대 경로 절대 경로
이미지에 설명을 나타내는 alt 속성
이미지의 테두리선을 변경하는 border 속성
이미지와 함께 있는 글자의 위치를 지정하는 align 속성
이미지의 위치를 지정하는 align 속성
이미지 주변에 여백을 설정하는 vspace와 hspace 속성
이미지의 표시 크기 조절하는 width와 height 속성

Chapter 05
하이퍼링크로 다양한 문서 연결하기
하이퍼링크를 위한 〈A〉 태그와 속성들
이동할 위치 지정하는 href 속성
링크의 색상 지정하기
다른 홈페이지로 연결하기
다른 홈페이지 링크로 이용하기
이미지로 링크
이메일을 보내는 하이퍼링크
현재 HTML 문서의 지정된 위치로 링크를 설정하는 name 속성
절대 경로와 상대 경로
음악, 동영상 파일 링크하기
압축파일, 실행 파일 링크하기
링크 결과를 다른 창에 열기

Chapter 06 테이블로 깔끔하게 문서 정리하기
테이블로 웹 문서의 레이아웃 설정
테이블의 기본 구조
테이블 만드는 〈table〉 태그
셀 만드는 〈tr〉, 〈td〉 태그
테이블에 테두리 표시와 빈 셀 작성하기
테이블 안에 이미지 삽입하기
테이블 제목과 셀 제목 지정하는 〈caption〉, 〈th〉 태그
테이블의 속성 지정하기
테이블을 정렬하는 align 속성
테이블의 테두리 두께 지정하는 border 속성
테이블에 여백을 주는 cellspacing, cellpadding 속성
테이블 크기 조절하는 width, height 속성
테이블로 이미지와 텍스트를 혼합하여 출력
테이블 배경색 지정하는 bgcolor 속성
테이블 테두리 색 지정하는 bordercolor 속성
테이블 배경 이미지 지정하는 background 속성

Chapter 07 테이블에 한 발짝 더 다가가기
테이블의 〈TR〉, 〈TD〉 태그의 속성
〈tr〉 태그의 속성
〈td〉 태그의 속성
〈th〉 태그의 속성
셀 안의 내용을 좌우 정렬하는 align 속성
셀 내용을 상하 정렬하는 valign 속성
셀의 너비와 높이 조정하는 width, height 속성
셀을 합치는 rowspan, colspan 속성
셀에 부분적으로 색상 지정하는 bgcolor 속성
셀 내용 줄 바꾸지 않고 그대로 출력하기
테이블을 이용하여 화면 분할
테이블 안에 테이블 만들기

Chapter 08 프레임 작성하기
프레임을 만들기 위한 〈frameset〉 태그
프레임에 파일 연결하는 src 속성
세로(위아래)와 가로(좌우)를 복합 분할하기
프레임의 크기 변경 금지하는 noresize 속성
스크롤바 표시하기
프레임에 여백주는 marginwidth, marginheight 속성
타켓 정하는 target, name 속성
창 안에 작은 창 IFRAME 태그
프레임 테두리의 두께와 색상 조절
프레임 테두리 없애기
스크롤바가 없는 창

Chapter 09 입력 양식 작성하기
입력 양식 폼
폼 양식을 만드는 〈form〉 태그
데이터를 입력받기 위한 〈input〉 태그
암호를 입력받기 위한 password
여러 라인의 글자를 입력받기 위한 〈textarea〉 태그
체크 박스를 위한 checkbox
라디오 버튼을 위한 radio
명령을 지시하는 버튼을 위한 button
전송버튼과 입력취소버튼을 위한 submit, reset
콤보 박스와 리스트 박스를 위한 〈select〉 태그
회원 가입 페이지 만들기

Part 2 CSS

Chapter 01통일감 있는 HTML 문서를 위한 CSS 가이드
스타일 시트란?
스타일 시트로 가능한 작업에 무엇이 있을까요?
스타일 시트의 기본 형식
여러 가지 속성을 설정하기
홈페이지에 스타일 설정하여 적용하기
〈head〉 태그에 스타일 설정하는 embedding 스타일
외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 link 스타일
HTML 문서의 태그에서 직접 스타일 설정하는 inline 스타일
특정 부분에서만 스타일 적용하기
class로 속성 정의하기
ID로 속성 정의하기

Chapter 02 글꼴 문단 지정하기
글꼴 꾸밈 관련 스타일 시트
텍스트 관련 스타일 시트
배경 관련 스타일 시트
배경에 이미지에 관련된 background-image/background-repeat 속성
배경 이미지의 위치 조정하는 background-position 속성
배경 이미지 고정하는 background-attachment 속성
목록 관련 스타일 시트
하이퍼링크 관련 스타일 시트

Chapter 03테두리 여백 지정하는 속성
테두리를 제어하는 스타일 시트
외부여백(Margin)과 내부여백(Padding)관련 속성
위치 관련 속성

Part 3 JavaScript

Chapter 01 자바스크립트 개요
자바스크립트란?
자바스크립트의 기본 구조
head 부분에 자바스크립트 포함하기
body 부분에 자바스크립트 포함하기
자바스크립트 외부에서 불러들이기
자바스크립트 부분을 주석 문으로 처리하기
자바스크립트의 자료 형(DATA TYPE)
자료형의 종류
변수 만드는 방법
변수 사용하기
연산자란
산술 연산자
관계 연산자
논리 연산자
자바스크립트에 내장된 대화 상자를 이용한 인터페이스
alert 함수
confirm 함수
prompt 함수
여러 문장 중 한 문장만 선택하여 실행하도록 하는 선택문
if 문
switch 문
문장을 여러 번 반복 수행할 수 있게 하는 반복문
for 문
while 문
do while 문
continue 문-제어문을 보조하는 명령문
break 문-제어문을 보조하는 명령문
반복 사용되는 문장을 기능적으로 나누어 정의하는 함수
내장 함수
문자열을 정수로 변환하는 parseInt 함수
사용자 정의 함수

Chapter 02 자바스크립트의 객체
자바스크립트에서 사용되는 객체의 개념 이해하기
객체 지향 프로그램이란?
내장 객체란?
날짜와 시간을 관리 해주는 Date 객체
Date 객체 생성하기
배열을 사용할 수 있도록 하는 Array 객체
문자열을 다루도록 하는 String 객체
문자열의 개수를 나타내주는 length 속성
문자열 메소드 살피기
문자열을 하이퍼 링크로 설정하는 link( ) 메소드
특정 위치로 이동하게 하는 anchor( ) 메소드
문자열 중 원하는 위치의 문자를 찾아주는 charAt( ) 메소드
검색 메소드 indexOf( )와 lastIndexOf( )
문자열을 추출하는 substring( ) 메소드
문자열을 추출하는 slice( ) 메소드
문자열을 추출하는 substr( ) 메소드
문자열을 대소문자로 변경하는 toUpperCase( )/toLowerCase( ) 메소드
문자열을 연결하는 concat( ) 메소드
문자열을 분리하는 split( ) 메소드
수학 공식을 제공하는 Math 객체
화면의 정보를 알려주는 Screen 객체

Chapter 03브라우저 객체
브라우저 객체 이해하기
브라우저 객체의 계층구조
브라우저 객체의 접근 방법
창을 제어하는 window 객체
상태 표시바에 글자를 표시하는 defalutstatus/status 속성
창 속성의 종류
새로운 창을 열어주는 window.open( ) 메소드
창을 닫는 window.close( ) 메소드
타이머 설정과 해제를 위한 setTimeout/clearTimeout 메소드
타이머 설정과 해제를 위한 setInterval/clearInterval 메소드
하위 창을 열어준 부모 창을 가르키는 opener
창을 분할하는 프레임을 제어하는 Frame 객체
프레임의 위치를 지정하는 frames
자신의 상위 계층을 지칭하는 parent
〈FRAME〉 태그의 NAME 속성을 프레임 객체로 사용하기
자신의 최상위 계층을 지칭하는 top
왼쪽 프레임의 단추를 클릭하여 오른쪽 프레임의 그림을 변경하기
자기 자신이 속한 프레임을 지칭하는 self
최근 방문한 주소를 기억하는 history 객체
히스토리 리스트의 개수를 알려주는 length 속성
뒤로 앞으로 이동하게 해주는 back( )/forward( ) 메소드
여러 단계씩 뒤로 앞으로 이동하게 하는 go( ) 메소드
주소 입력란의 주소 정보를 제어하는 location 객체
현재 문서의 URL 주소를 알려주거나 설정하는 href 속성
입력한 URL로 문서를 이동하는 replace( ) 메소드
문서를 다시 읽어 들이는 reload( ) 메소드
브라우저의 정보를 제공해주는 Navigator 객체
자바를 사용할 수 있는지 판단해 주는 javaEnabled( ) 메소드
웹 브라우저를 판별하기

Chapter 04 document 객체와 image 객체
document 객체
문서에 문자열을 출력하는 write( ) 메소?
문서 제목 줄의 정보를 알려주는 title 속성
문서의 최종 수정날짜를 표시해 주는 lastmodified 속성
웹 페이지의 배경색을 변경하는 bgColor 속성
웹 페이지의 글자색을 변경하는 fgColor 속성
문서를 열고 닫는 open/close 메소드
그림에 대한 정보를 알려주는 Image 객체
이미지를 선택해주는 images 객체
그림 파일의 경로를 알려주는 src 속성
이미지 객체로 객체 변수를 선언하여 사용하기
이미지 메뉴 만들기

Chapter 05폼 객체
입력양식을 제어하는 form 객체
form 객체의 개념
특정 폼을 구별해주는 forms 속성
〈form〉 태그의 name 속성을 폼 객체로 사용하기
정보를 입력하는 text 객체
〈input type=“text”〉 태그의 name 속성을 text 객체로 사용하기
글 상자에 입력된 값을 알려주는 value 속성
이벤트를 발생하는 button 객체
체크 박스를 위한 checkbox 객체
배타적 선택을 하는 radio 객체
select 객체
선택된 항목의 번호를 알려주는 selectedIndex 속성
목록 상자의 항목을 선택하였을 때 발생하는 onChange 핸들러
기타 객체
submit 객체
submit 메소드
onSubmit 이벤트 핸들러
file 객체와 hidden 객체

Chapter 06
자바스크립트 활용하기
DHTML
레이어 개체 개념 이해하기
layer 객체
layer 객체의 속성/메소드
레이어 위에 마우스를 올려놓으면 그림이 나타나도록 하는 예제
레이어로 서브 메뉴 만드는 예제