차례1 - 목적과 용도로 찾기

제0장 웹 공간을 꾸밀 HTML과 CSS를 만나다
HTML(Hyper Text Markup Language)이란
HTML과 웹 브라우저를 이용한 웹 문서의 시작
HTML 문서 제작 도구 알아보기
EditPlus의 다양한 기능

제1장 웹 문서를 만들기 위한 HTML 기본 필살기
HTML문서 작성
필살기001 메모장으로 HTML문서를 작성하려면
필살기002 작성한 HTML 문서를 웹 페이지로 저장하려면
필살기003 저장한 HTML 문서의 결과를 확인하려면
필살기004 웹 페이지에 제목을 만들려면
필살기005 한글이 제대로 보이도록 설정하려면
필살기006 작업 내용을 파악할 수 있는 메모 용도로 주석을 삽입하려면

텍스트 입력과 편집
필살기007 웹 페이지에 글자를 넣으려면
필살기008 글자의 크기를 바꾸려면
필살기009 단락 제목을 만들려면
필살기010 글자의 서체를 바꾸려면
필살기011 글자를 두껍게 하고 이탤릭체로 바꾸려면
필살기012 글자에 밑줄과 취소선을 설정하려면
필살기013 글자의 정렬 위치를 바꾸려면
필살기014 문단을 나누지 않고 원하는 부분만 정렬하려면
필살기015 원하는 위치에서 줄을 바꾸려면
필살기016 글자와 글자 사이에 두 칸 이상의 공백을 넣으려면
필살기017 문단을 나누려면
필살기018 내용을 정리된 목록 형태로 표현하려면
필살기019 숫자로 된 목록을 만들려면
필살기020 상하좌우로 움직이는 글자를 만들려면
필살기021 한자를 넣으려면
필살기022 특수문자를 넣으려면
필살기023 웹 페이지의 배경색을 바꾸려면
필살기024 글자에 색깔을 넣으려면
필살기025 컬러 코드로 글자색을 설정하려면
필살기026 문단에 들여쓰기를 설정하려면

하이퍼링크 설정
필살기027 글자에 링크를 설정하려면
필살기028 절대경로로 다른 홈페이지 자료에 링크를 설정하려면
필살기029 상대경로로 내 홈페이지 자료에 링크를 설정하려면
필살기030 하이퍼링크로 연결한 자료를 새 창에 띄우려면
필살기031 하이퍼링크로 연결한 자료를 현재 창에 열려면
필살기032 하이퍼링크가 설정된 글자의 색상을 바꾸려면
필살기033 메일을 보낼 수 있는 링크를 설정하려면
필살기034 현재 페이지에서 위나 아래로 이동하는 링크를 만들렴녀

제2장 다양한 멀티미디어를 표현하는 HTML필살기
이미지 삽입
필살기035 웹 페이지에 그림을 삽입하려면
필살기036 웹 페이지에 배경 그림을 설정하려면
필살기037 절대경로로 다른 홈페이지의 그림을 삽입하려면
필살기038 상대경로로 내 웹 서버의 그림을 삽입하려면
필살기039 삽입한 그림 크기를 줄이거나 늘리려면
필살기040 그림에 링크를 설정하려면
필살기041 그림에 링크를 걸었을 때 생기는 테두리를 없애려면
필살기042 그림 주변에 적당한 여백을 설정하려면
필살기043 그림에 마우스를 올리면 말풍선이 나타나게 하려면
필살기044 그림과 글자를 서로 어울리게 정렬하려면
필살기045 그림의 일부분에만 링크를 설정하려면

HTML 문서와 멀티미디어
필살기046 웹 페이지에 배경 음악을 설정하려면
필살기047 웹 페이지에 동영상을 삽입하려면
필살기048 웹 페이지에 플래시 애니메이션을 넣으려면

제3장 웹 문서의 레이아웃과 콘텐츠를 정렬하는 테이블 필살기
테이블 삽입과 편집
필살기049 웹 페이지에 표를 삽입하려면
필살기050 웹 페이지의 표 크기를 바꾸려면
필살기051 표의 크기를 화면에 따라 다르게 표시하려면
필살기052 표의 테두리 두께를 조절하려면
필살기053 표의 정렬 위치를 바꾸려면
필살기054 표에 배경을 설정하려면
필살기055 표의 캡션을 원하는 위치에 넣으려면

셀 속성 설정과 변경
필살기056 표의 줄 개수를 변경하려면
필살기057 표의 셀 개수를 변경하려면
필살기058 표의 셀 테두리 두께를 바꾸려면
필살기059 표의 셀 크기를 바꾸려면
필살기060 셀 안 자료의 수평/수직 정렬 위치를 조절하려면
필살기061 표의 제목 셀을 만들려면
필살기062 셀과 셀 사이의 간격을 조절하려면
필살기063 셀 안쪽 여백을 설정하려면
필살기064 표의 테두리 두께를 1픽셀로 설정하려면
필살기065 셀을 가로로 합치려면
필살기066 셀을 세로로 합치려면

다양한 테이블 활용 방법
필살기067 셀에 배경을 설정하려면
필살기068 셀 내용의 줄이 바뀌지 않게 하려면
필살기069 표의 가로와 세로 길이를 조절하려면
필살기070 표를 활용하여 직선을 만들려면
필살기071 표를 이용하여 점선을 그리려면
필살기072 표를 이용하여 그림 테두리를 만들려면
필살기073 표로 여러 개의 메뉴를 하나의 메뉴바처럼 보이게 하려면
필살기074 표로 상품 이미지와 내용을 보기 좋게 배치하려면

프레임 삽입과 설정
필살기075 프레임으로 홈페이지를 만들려면
필살기076 원하는 프레임 레이아웃을 구성하려면
필살기077 네 개의 프레임 홈페이지를 만들려면
필살기078 세 개의 프레임 홈페이지를 만들려면
필살기079 프레임의 테두리 두께를 조절하려면
필살기080 스크롤바의 모양을 다양하게 변경하려면
필살기081 링크로 연결된 페이지가 열릴 프레임을 설정하려면

아이프레임 삽입과 활용
필살기082 아이프레임을 삽입하려면
필살기083 아이프레임에 링크로 연결된 문서를 띄우려면
필살기084 아이프레임에 게시판을 연결하려면

제4장 폼과 레이어로 자유로운 웹 문서 만들기
폼[Form]
필살기085 회원가입 양식을 만들기 위한 기본 태그를 삽입하려면
필살기086 기본 입력 양식을 제작하려면
필살기087 일반 텍스트 필드를 삽입하려면
필살기088 비밀번호 입력 양식을 제작하려면
필살기089 숨김 양식을 삽입하려면
필살기090 여러 줄의 텍스트 입력 양식을 삽입하려면
필살기091 라디오 버튼을 삽입하려면
필살기092 체크 박스를 삽입하려면
필살기093 선택 입력 양식을 제작하려면
필살기094 목록 입력 양식을 제작하려면
필살기095 전송 및 취소 버튼을 제작하려면
필살기096 파일 업로드 양식을 제작하려면
필살기097 양식 영역을 테두리 박스로 묶으려면
필살기098 회원가입 양식을 만들려면
필살기099 상품구매 양식을 만들려면

레이어[Layer]
필살기100 레이어를 제작하려면
필살기101 레이어의 크기와 위치를 설정하려면
필살기102 레이어의 색상을 지정하려면
필살기103 레이어에 이미지를 넣으려면
필살기104 레이어의 순서를 결정하고 변경하려면

제5장 웹 코디네이터! 스타일시트 활용 필살기
CSS와 글자
필살기105 웹 페이지를 화려하게 꾸미는 CSS를 삽입하려면
필살기106 CSS구문을 파일로 저장하려 사용하려면
필살기107 클래스로 작업자가 다양한 스타일을 적용하려면
필살기108 CSS로 글자를 다양하게 꾸미려면
필살기109 CSS로 문단을 가독성 있게 만들려면
필살기110 글자에 그림자 효과를 만들려면
필살기111 글자에 네온 효과를 적용하려면
필살기112 글자를 투명하게 만들려면
필살기113 문서에 어울리게 스크롤바 색상을 바꾸려면

CSS와 이미지
필살기114 이미지에 반투명한 알파 효과를 적용하려면
필살기115 이미지의 크기를 CSS로 제어하려면
필살기116 이미지에 뽀샤시와 플러 효과를 적용하려면
필살기117 이미지에 흑백, X-Ray, 반전 효과를 적용하려면
필살기118 이미지에 웨이브 효과를 적용하려면
필살기119 이미지를 상하좌우로 바꾸려면

다양한 CSS활용
필살기120 CSS로 폼 요소를 다양하게 꾸미려면
필살기121 여러 줄 텍스트 입력 양식의 스크롤바 색상을 바꾸려면
필살기122 CSS로 표를 다양하게 꾸미려면
필살기123 CSS로 표 테두리를 꾸미려면
필살기124 태그를 새로 정의해 나만의 태그를 만들려면
필살기125 하이퍼링크가 설정된 글자 모양을 다양하게 바꾸려면
필살기126 CSS로 특정 하이퍼링크만 속성을 다르게 지정하려면
필살기127 CSS와 태그를 결합시켜 사용하려면
필살기128 배경 이미지를 고정하려면
필살기129 CSS로 TD 태그에 다양한 속성을 정의해 활용하려면
필살기130 마우스 포인터의 모양을 내 맘대로 바꾸려면

제6장 이메일, 미니홈피, 카페 등의 개인 미디어 공간을 위한 HTML+CSS활용 필살기
이메일
필살기131 그림과 글이 보기 좋게 어우러진 이메일을 작성하려면
필살기132 메일 내용에 하이퍼링크를 설정하려면
필살기133 표 형태로 정리된 이메일을 작성하려면
필살기134 음악이 흐르는 이메일을 작성하려면
필살기135 플래시 무비 파일을 활용해 초대장 이메일을 보내려면
필살기136 인라인 스타일시트로 문단을 보기 좋게 작성하려면
필살기137 인라인 스타일시트로 점선 테두리의 테이블을 삽입하려면
필살기138 웹 페이지의 레이아웃을 이메일로 전달하려면

싸이월드 미니홈피+페이퍼진
필살기139 테이블 안에 이미지가 삽입된 게시물을 등록하려면
필살기140 플래시 무비의 바탕을 투명하게 등록하려면
필살기141 동영상을 미니홈피에 등록하려면
필살기142 그림에 액자 테투리를 넣어 미니홈피에 등록하려면
필살기143 줄 간격과 자간을 조절한 페이퍼 진을 발행하려면
필살기144 플래시 무비와 이중실선이 그어진 제목의 페이퍼를 발행하려면

다음 카페
필살기145 카페에 어울리는 대문을 꾸미려면
필살기146 카페에 어울리는 대문 이미지로 꾸미려면
필살기147 카페에 어울리는 플래시 무비를 대문으로 사용하려면
필살기148 다른 웹 페이지를 카페 대문으로 사용하려면
필살기149 카페 대문에 공지사항 메시지 대화상자를 띄우려면
필살기150 카페 회원에게 보내는 이메일 게시물을 등록하려면
필살기151 게시물을 출력하는 인쇄버튼을 삽입하려며
필살기152 특정 웹 사이트로 바로 이동하는 게시물을 등록하려면

차례2 - HTML과 CSS 기능으로 찾기

1. 기본 태그
HTML 문서의 기본
웹 페이지의 제목
HTML 문서의 속성
웹 페이지의 주석

2. 텍스트 관련 태그
HTML문서의 본문
문단 제목과 글자 크기, 서체
정렬
글자 속성
목록
줄바꿈과 문단
글자 움직이기
색상
들여쓰기
하이퍼링크 설정
하이퍼링크 색상
메일 링크
[활용]이메일
[활용]미니홈피, 페이퍼진
[활용]카페

3. 이미지와 멀티미디어 태그
이미지, 배경이미지 삽입
이미지의 크기
이미지의 속성
이미지와 텍스트 정렬
이미지맵
배경 음악, 동영상, 플래시
[활용]이메일
[활용]미니홈피, 페이퍼진
[활용]카페

4. 테이블과 셀 태그
테이블 삽입
테이블 행과 열
테이블과 셀의 크기
테이블의 제목
테이블과 셀의 테두리
테이블 정렬
셀의 병합
셀의 테두리와 여백
셀의 속성
셀의 수평과 수평 정렬
캡션
셀의 줄 바꿈, 고정
배경 이미지와 색상
메뉴 바, 점선과 선 모양의 이미지
1 픽셀 이미지
[활용]이메일
[활용]미니홈피, 페이퍼진

5. 레이어 태그
삽입과 위치, 정렬
색상
순서와 보기 영역
이미지 삽입

6. 프레임 태그
프레임의 구성
프레임의 속성과 타깃
아이프레임과 게시판

7. 폼 태그
폼 양식과 입력 필드
텍스트 필드
숨김과 비밀번호 입력 필드
라디오 버튼과 체크박스
선택 입력과 목록 입력 양식
전송, 취소, 파일 업로드 버튼
[활용]카페

8. 스타일시트(CSS)
사용자, 외부, 링크스타일, 스타일 재정의
텍스트의 그림자, 네온, 투명한 효고
스크롤바 색상과 모양
이미지 효과
뽀샤시, 블러, 흑백, X-Ray, 반전 효과
테이블
웨이브, 회전 효과
폼 효과
폼의 전체 적용, 테두리
하이퍼링크
배경 이미지 고정
마우스 커서
[활용]이메일