웹 표준을 지키는 Best 웹 사이트, 이렇게 시작하자

웹 프로그래밍, 웹 디자인을 처음 배우는 학생과 웹 표준 기술에 관심 있는 일반인을 위한 책이다. 예제 180개로 XHTML, CSS2, 자바 스크립트의 웹 표준을 단계별로 익힌 후, 실전 프로젝트로 학습 내용을 정리할 수 있도록 구성하였다. 예제를 차근차근 따라하다보면 웹 표준에 맞는 홈페이지를 만들 수 있을 것이다. 

 

무엇을 다루는가?

이 책은 XHTML, CSS2, JavaScript의 기본 지식과 응용 방법을 예제를 통해 익힌 뒤, 프로젝트 형식으로 홈페이지를 직접 만들 수 있도록 하였다. 다양한 예제와 실전 프로젝트를 통해 웹 표준 기술들의 개념과 사용법을 정리할 수 있을 것이다. 

• 준비학습 : 인터넷과 웹 표준(1장) 
  웹 페이지 제작기술을 익히는 부분으로 인터넷과 웹에 대한 기본 개념을 학습한다. 
• XHTML과 CSS2 익히기(2장~5장) 
  웹 페이지 제작을 위하여 XHTML의 기본 형태와 구조를 익힌다. 또한 블록 엘리먼트와 인라인 엘리먼트의 사용법을 익히고 페이지의 구조와 표현을 담당하는 CSS2를 이용하여 문서를 표현하는 방법을 예제를 통해 학습한다. 
• XHTML과 CSS2 활용하기(6장) 
  학습한 XHTML과 CSS2를 활용하여 웹 페이지 레이아웃을 설정하고 이미지를 필터링하는 방법을 학습한다. 
• 자바스크립트 익히기와 활용(7장~10장) 웹 페이지에 동적인 효과를 부여하는 기술인 자바스크립트를 이해하고 각 객체의 사용 형태와 적용 예를 통하여 동적인 페이지의 작성 방법을 익힌다. 
• 실전 프로젝트: 홈페이지 구축(11장) 홈페이지 기획에서부터 제작, 등록하는 방법을 알아보고 실제 홈페이지를 제작해본다. 실전 프로젝트를 통해 XHTML 엘리먼트로 웹 페이지의 기본 레이아웃을 만들어보고 CSS2를 이용하여 웹 페이지를 표현해본다.

제1장 인터넷과 웹 표준의 이해

01 인터넷이란?

01 인터넷의 정의

02 인터넷의 특징

03 인터넷의 역사

04 인터넷의 발전 배경

05 인터넷의 활용 분야

02 웹 서비스의 작동 원리 

01 웹의 이해

02 웹의 역사

03 웹 2.0

04 웹 서비스의 작동 원리

03 웹 표준의 이해 

01 웹 표준의 출현 배경

02 W3C

03 W3C 표준의 종류

04 ECMA와 ECMAScript

04 왜 웹 표준을 지켜야 하는가?

요약

연습문제

 

제2장 XHTML의 기초

01 XHTML 소개하기 

01 XHTML이란?

02 XHTML의 동향

03 XHTML의 장점

02 XHTML의 기본 구조 

01 HTML과 XHTML의 기본 구조

02 DOCTYPE 선언

03 XHTML의 규칙

04 html element

05 head element

06 주석

03 블록 레벨 element

01 DTD 문서 형식에 무관한 블록 레벨 element

[실습 2-1] address element 사용하기

[실습 2-2] blockquote element의 cite 속성 사용하기

[실습 2-3] div element의 class 속성 사용하기

[실습 2-4] dl element 사용하기

[실습 2-5] p element 사용하기

[실습 2-6] pre element 사용하기

[실습 2-7] hn element 사용하기

[실습 2-8] hr element 사용하기

[실습 2-9] hr element의 noshade와 style 속성 사용하기

[실습 2-10] ol, ul element 사용하기

[실습 2-11] table의 caption element 사용하기

[실습 2-12] table element의 style 속성 사용하기

[실습 2-13] table element의 cellspacing과 cellpadding 속성 사용하기

[실습 2-14] 셀 병합하기

02 Strict DTD에서 사용할 수 없는 블록 레벨 element

04 인라인 element 

01 DTD 문서 형식에 무관한 인라인 element 

[실습 2-15] abbr element의 title 속성 사용하기

[실습 2-16] acronym element의 title 속성 사용하기

[실습 2-17] b, big, i, small, tt element 사용하기

[실습 2-18] dfn element 사용하기

[실습 2-19] bdo element의 dir 속성 사용하기

[실습 2-20] br element 사용하기

[실습 2-21] cite element와 i element 비교하여 사용하기

[실습 2-22] em element 사용하기

[실습 2-23] span element 사용하기

[실습 2-24] strong element와 b element 비교하여 사용하기

[실습 2-25] iframe element의 width와 height, src 속성 사용하기

[실습 2-26] sub, sup element 사용하기

[실습 2-27] code element와 tt element 비교하여 사용하기

02 Strict DTD에서 사용할 수 없는 인라인 element

05 기타 element 

[실습 2-28] del과 ins element의 cite, datetime 속성 사용하기

요약

연습문제

 

제3장 XHTML의 추가 요소

01 폼 삽입 

01 폼 삽입 element 개요

02 폼과 관련된 element

[실습 3-1] fieldset element를 이용한 그룹화

[실습 3-2] button element를 이용한 버튼 만들기

[실습 3-3] checkbox에 checked 속성 이용하기

[실습 3-4] label element 사용하기

[실습 3-5] 리스트 박스 만들기

[실습 3-6] 다중 선택 리스트 박스 만들기

[실습 3-7] optgroup element를 이용한 <option> 태그 그룹화하기

[실습 3-8] 다중라인 텍스트 입력상자 만들기

02 하이퍼링크 

01 하이퍼링크 만들기

[실습 3-9] 하이퍼링크 만들기

[실습 3-10] 하이퍼링크에 책갈피 지정하기

02 이미지 맵

[실습 3-11] 문서에 이미지 삽입하기

[실습 3-12] 이미지 맵 만들기

03 오브젝트 삽입 

01 오브젝트 element 개요

[실습 3-13] 웹 문서에 동영상 삽입하기

04 프레임 삽입 

01 프레임 문서 개요

02 프레임과 관련된 element

[실습 3-14] 3개의 프레임으로 구분된 문서 만들기

[실습 3-15] 다중 프레임 문서 만들기

[실습 3-16] 메뉴 구조를 가지는 프레임 문서

요약

연습문제

 

제4장 CSS2의 기초

01 CSS의 정의 

01 CSS의 등장 배경

02 CSS의 장점과 단점

03 CSS 용어와 추가 태그

02 CSS의 기본 구조 및 적용 방법 

01 CSS의 기본 구조

[실습 4-1] CSS 시작

02 CSS의 위치에 따른 사용 방법

[실습 4-2] 인라인 스타일 정의하기

[실습 4-3] 인라인 스타일을 여러 곳에 적용하기

[실습 4-4] 임베디드 스타일시트 적용하기

[실습 4-5] <link> 태그를 이용하여 외부 스타일시트 적용하기

[실습 4-6] "@import"를 이용하여 외부 스타일시트 적용하기

03 선택자의 종류

[실습 4-7] 유형 선택자를 이용하여 스타일시트 작성하기

[실습 4-8] 클래스 선택자를 이용하여 스타일시트 작성하기

[실습 4-9] ID 선택자를 이용하여 스타일시트 작성하기

03 박스 모델 

01 박스 모델의 규격

02 여백, 테두리, 안쪽 여백

[실습 4-10] 박스 모델의 영역과 범위 설정하기

03 박스 모델 관련 프로퍼티

[실습 4-11] margin 관련 프로퍼티를 이용하여 여백 설정하기

[실습 4-12] 안쪽 여백 영역 설정하기

[실습 4-13] 테두리 영역 설정하기

[실습 4-14] 테두리 영역에 색상 설정하기

[실습 4-15] 테두리 스타일 지정하기

[실습 4-16] 테두리 프로퍼티 이용하기

[실습 4-17] 테두리 프로퍼티를 이용하여 테두리 영역의 스타일 설정하기

요약

연습문제

 

제5장 CSS2의 활용

01 텍스트 관련 CSS 스타일 

01 text- decoration 프로퍼티

[실습 5-1] text-decoration 프로퍼티 사용하기

02 text-align 프로퍼티

[실습 5-2] text-align 프로퍼티 사용하기

03 text-indent 프로퍼티

[실습 5-3] text-indent 프로퍼티 사용하기

04 letter-spacing 프로퍼티 / word-spacing 프로퍼티

[실습 5-4] letter-spacing/word-spacing 프로퍼티 사용하기

05 text-transform 프로퍼티

[실습 5-5] text-transform 프로퍼티 사용하기

06 white-space 프로퍼티

[실습 5-6] white-space 프로퍼티 사용하기

02 글꼴 관련 CSS 스타일 

01 글꼴의 표현과 규격

02 글꼴 관련 프로퍼티

[실습 5-7] font-family 프로퍼티 사용하기

[실습 5-8] font-style 프로퍼티 사용하기

[실습 5-9] font-variant 프로퍼티 사용하기

[실습 5-10] font-weight 프로퍼티 사용하기

[실습 5-11] font-size 프로퍼티 사용하기

[실습 5-12] font 프로퍼티 사용하기

03 색상 및 배경 관련 CSS 스타일 

01 색상 관련 프로퍼티

[실습 5-13] color 프로퍼티 사용하기

02 배경 관련 프로퍼티

[실습 5-14] background-color 프로퍼티 사용하기

[실습 5-15] background-image 프로퍼티 사용하기

[실습 5-16] background-repeat 프로퍼티 사용하기

[실습 5-17] background-position 프로퍼티 사용하기

[실습 5-18] background-attachment 프로퍼티 사용하기

[실습 5-19] background 프로퍼티 사용하기

04 표 관련 CSS 스타일 

01 테이블 모델

02 테이블 관련 프로퍼티

[실습 5-20] display 프로퍼티 사용하기

[실습 5-21] caption-side 프로퍼티 사용하기

[실습 5-22] table-layout 프로퍼티 사용하기

[실습 5-23] border-collapse 프로퍼티 사용하기

[실습 5-24] border-spacing 프로퍼티 사용하기

05 리스트 관련 CSS 스타일 

01 리스트 개요

02 리스트 관련 프로퍼티

[실습 5-25] list-style-type 프로퍼티 사용하기

[실습 5-26] 이미지를 마커로 사용하기

[실습 5-27] list-style-position 프로퍼티 사용하기

[실습 5-28] list-style 프로퍼티 사용하기

요약

연습문제

 

제6장 XHTML과 CSS2를 활용한 실전 예제

01 CSS 레이아웃 

01 CSS로 2단 레이아웃 만들기

02 유동(부유) 위치 지정 모델 관련 프로퍼티

[실습 6-1] float 프로퍼티 사용하기

[실습 6-2] clear 프로퍼티 사용하기

03 float 프로퍼티를 이용한 레이아웃

[실습 6-3] float 레이아웃 첫 번째 단계

[실습 6-4] float 레이아웃 두 번째 단계

[실습 6-5] float 레이아웃 세 번째 단계

[실습 6-6] float 레이아웃 네 번째 단계

04 절대 위치 지정 모델과 관련된 프로퍼티

[실습 6-7] 박스 오프셋 표현

05 포지셔닝 방법을 이용한 레이아웃 만들기

[실습 6-8] position 레이아웃 첫 번째 단계

[실습 6-9] position 레이아웃 두 번째 단계

[실습 6-10] position 레이아웃 셋 번째 단계

[실습 6-11] position 레이아웃 네 번째 단계

[실습 6-12] 3단 레이아웃 만들기

02 이미지 필터 

01 이미지 필터

[실습 6-13] 이미지 필터

02 필터의 종류

[실습 6-14] 이미지 필터:Alpha 필터 사용

[실습 6-15] 이미지 필터:FlipH 필터/ FlipV 필터 사용

[실습 6-16] 이미지 필터:Gray 필터 사용

[실습 6-17] 이미지 필터:Invert 필터 사용

[실습 6-18] 이미지 필터:XRay 필터 사용

[실습 6-19] 이미지 필터:Blur 필터 사용

[실습 6-20] 이미지 필터:Chroma 필터 사용

[실습 6-21] 이미지 필터:DropShadow 필터 사용

[실습 6-22] 이미지 필터:Glow 필터 사용

[실습 6-23] 이미지 필터:Shadow 필터 사용

요약

연습문제

 

제7장 자바스크립트의 기초

01 자바스크립트의 시작 

01 자바스크립트의 정의

02 자바스크립트 특징과 기능

03 자바스크립트 장점과 단점

02 자바스크립트의 기본 문법 

01 자바스크립트의 기본 구조 

02 자바스크립트의 실행 위치

[실습 7-1] <head> 태그 영역에 자바스크립트 선언하기

[실습 7-2] <body> 태그 영역에 자바스크립트 선언하기

[실습 7-3] 외부 파일로 저장된 자바스크립트를 불러서 사용하기

03 자바스크립트의 표현 방식

[실습 7-4] 주석 사용하기

[실습 7-5] 문자열을 출력하는 자바스크립트 객체

03 변수와 자료형 

01 변수

02 자료형

[실습 7-6] 정수형 변수 사용하기

[실습 7-7] 실수형 변수 사용하기

[실습 7-8] 문자형 변수 사용하기

[실습 7-9] 논리형 변수 사용하기

04 연산자의 이해 

01 연산자

[실습 7-10] 산술 연산자 사용하기

[실습 7-11] 대입 연산자 사용하기

[실습 7-12] 관계 연산자 사용하기

[실습 7-13] 논리 연산자 사용하기

[실습 7-14] 조건 연산자 사용하기

[실습 7-15] 증감 연산자 사용하기

05 제어문과 반복문 

01 제어문

[실습 7-16] if 문 사용하기

[실습 7-17] if~else 문 사용하기

[실습 7-18] 다중 if 문 사용하기

[실습 7-19] switch 문 사용하기

02 반복문

[실습 7-20] while 문 사용하기

[실습 7-21] do~while 문 사용하기

[실습 7-22] for 문 사용하기

[실습 7-23] 다중 for 문 사용하기

06 함수 

01 함수의 정의

[실습 7-24] 함수 사용하기:매개변수가 없는 경우

[실습 7-25] 함수 사용하기:매개변수가 있는 경우

[실습 7-26] 함수 사용하기:리턴 값이 있는 경우

요약

연습문제

 

제8장 이벤트와 객체

01 이벤트와 이벤트 핸들러 

01 이벤트와 이벤트 핸들러 정의 및 종류

02 이벤트 핸들러 활용

[실습 8-1] onclick, onmouseover 이벤트 처리하기

[실습 8-2] 포커스 IN-OUT되는 경우 경고창 만들기

[실습 8-3] onload, onunload 이벤트 처리하기

02 객체와 속성 

01 객체의 이해

02 객체의 계층 구조와 특징

03 객체의 표현 방법

03 웹 브라우저 객체 

01 window 객체

[실습 8-4] window 객체를 이용한 새 창 열기

]실습 8-5] 윈도우 창 이동 버튼 만들기

02 document 객체

[실습 8-6] 새 창을 열고 write( ) 메소드를 이용하여 내용 출력하기

03 history 객체

[실습 8-7] 원하는 페이지로 이동하기

04 location 객체

[실습 8-8] 페이지 이동하기

05 frame 객체

[실습 8-9] 상하로 구분된 프레임 문서 만들기

06 image 객체

[실습 8-10] 마우스를 올리면 이미지가 변경되도록 하기

07 event 객체

[실습 8-11] 엔터키를 눌렀을 때 경고창 나타내기

04 내장 객체 

01 String 객체

[실습 8-12] 이벤트에 의해 대문자로 변경하기

[실습 8-13] 특정 문자 검색하고 잘라내기

[실습 8-14] 글자 수 체크하기

[실습 8-15] 라디오 버튼 체크하기

02 Date 객체와 Array 객체

[실습 8-16] 현재 날짜와 요일 출력하기

[실습 8-17] 나이 계산하기

03 Math 객체

[실습 8-18] 난수 발생하기

04 Screen 객체

[실습 8-19] 화면 해상도와 색상 수 확인하기

요약

연습문제

 

제9장 Form 관련 객체

01 form 객체 

01 form 객체

[실습 9-1] 폼 양식 이름 출력하기

[실습 9-2] onsubmit( ) 이벤트 핸들러 다루기

02 텍스트 입력상자와 리스트 박스 

01 텍스트 입력상자

[실습 9-3] onfocus( ) 이벤트 핸들러 이용하기

[실습 9-4] onblur( ) 이벤트 핸들러 연습하기

02 리스트 박스

[실습 9-5] 리스트 박스 연습하기

[실습 9-6] 동적으로 변하는 리스트 박스 만들기

03 button, radio, checkbox 객체 

01 button 객체

[실습 9-7] button 객체를 이용한 click 이벤트 처리하기

02 radio 객체와 checkbox 객체

[실습 9-8] radio 객체 연습하기

[실습 9-9] checkbox 객체 연습하기

요약

연습문제

 

제10장 자바스크립트 활용하기

01 자바스크립트를 이용한 다양한 웹 페이지 구성하기 

01 버튼 색상 변경하기

[실습 10-1] 버튼 색상 변경하기

02 마우스 오버될 때 포인트를 손가락 모양으로 변경하기

[실습 10-2] 이벤트에 따라 마우스 포인트 모양 변경하기

03 리스트 박스 간 항목 이동하기

[실습 10-3] 리스트 박스 항목 이동하기

04 쿠키값 만들기와 저장된 쿠키값 읽어오기

[실습 10-4] 쿠키값 처리하기

05 웹 페이지에 시계 만들기

[실습 10-5] 타이머 실습하기

06 주민등록번호에서 정보 가져오기

[실습 10-6] 문자열 처리하기

07 이미지에 필터 효과 이용하기

[실습 10-7] 필터 효과 활용하기

08 팝업 메뉴 만들기

[실습 10-]8 팝업 메뉴 만들기

09 간단한 슬라이드 메뉴 만들기

[실습 10-9] 슬라이드 메뉴 만들기

10 하이퍼링크에 네온 효과 적용하기

[실습 10-10] 네온 효과 적용하기

요약

연습문제

 

제11장 홈페이지 제작하기

01 홈페이지 기획하기 

01 홈페이지 제작 과정

02 홈페이지 기획하기

02 홈페이지 제작하기 

01 리소스 관리하기

[실습 11-1] 개인 홈페이지 제작에 필요한 폴더 구성하고 리소스 관리하기

02 템플릿 페이지 제작하기

[실습 11-2] 템플릿 페이지 만들기

03 홈페이지를 구성할 페이지 제작하기

[실습 11-3] 초기 페이지 만들기

[실습 11-4] 템플릿을 복사해 다른 페이지 제작하기

03 홈페이지 등록하기 

01 홈페이지 업로드

요약

연습문제

 

Appendix A. 부호화된 문자 세트

Appendix B. ISO 639-1 언어 코드

Appendix C. XHTML 특수문자 코드

찾아보기