HTML + CSS 필살기

제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 DIV 태그로 문단을 나누지 않고 원하는 부분만 정렬하려면
필살기 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 특정 웹 사이트로 바로 이동하는 게시물을 등록하려면