실전 테크닉 150선 HTML+CSS 홈페이지 작성법

Chapter 1. 문서 만들기

HTML에 관하여
스타일 시트에 관하여
001 글꼴 크기를 변경하여 문서 형식을 꾸미자
002 어느 브라우저에서든 같은 크기의 폰트로 표시한다
003 문자 색을 지정하여 보기 좋게 완성한다
004 같은 제목 레벨의 문자 색을 통일한다
005 문자의 배열을 변경하여 읽기 쉬운 페이지로 완성한다
006 문장을 양쪽으로 정렬해 읽기 쉬운 페이지로 만든다
007 페이지 키워드를 검색 엔진이 찾을 수 있도록 합니다
008 선을 사용해 문자를 강조합니다
009 제목에는 항상 밑줄을 첨부하도록 설정한다
010 강조하고 싶은 문자열을 이미지대로 표시합니다
011 마커로 문장 내의 문자열을 강조합니다
012 어느 컴퓨터에서든 원하는 글꼴로 표시합니다
013 문자열을 움직여 강조합니다
014 작은 제목을 붙여 제목을 장식합니다
015 작은 제목을 보기 좋게 배치합니다
016 문자열을 위 첨자/아래 첨자로 지정해 제목을 장식합니다
017 문자열 주위에 여백을 설정해 제목을 깔끔하게 보이게 합니다
018 문자열을 파도 모양으로 만들어 제목에 변화를 줍니다
019 문자열 주위에 그림자를 넣어 제목에 떠 있는 느낌을 줍니다
020 문자열의 그림자 위치와 크기를 지정해 제목에 변화를 줍니다
021 키보드로 입력할 수 없는 문자를 표시합니다
022 문자열을 깜박이게 만들어 주위를 끕니다


Chapter 2. 레이아웃 만들기
023 문단의 시작 위치를 지정해 읽기 좋은 문장을 만듭니다
024 문단 전체를 조금 내려 다른 문단과 구분합니다
025 줄 간격을 넓혀 긴 글을 읽기 쉽게 만듭니다
026 글자 간격을 넓혀 긴 글을 읽기 쉽게 만듭니다
027 다단으로 만들어 페이지 전체를 보이는 방법을 활용합니다
028 다단의 가로 너비를 지정해 페이지를 같은 형태로 보게 합니다
029 다단의 중간 여백을 지정해 깔끔한 페이지로 만듭니다
030 화면 위와 왼쪽 여백을 없애고 화면 가득히 내용을 표시합니다
031 페이지 내에 테두리를 만들어 칼럼 기사처럼 만듭니다
032 설정한 박스를 원하는 위치로 옮겨 레이아웃을 조정합니다
033 박스 내에 여백을 설정해 안쪽 글을 보기 쉽게 만듭니다
034 박스 주위에 글을 배열하고 레이아웃을 조정합니다
035 박스에 스크롤 바를 만들어 레이아웃이 무너지지 않도록 합니다
036 페이지 전체에 테두리를 만들어 레이아웃에 효과를 줍니다
037 페이지 전체를 묶은 테두리의 모양을 변경해 전체 통일감을 줍니다


Chapter 3. 링크 만들기

링크에 관하여
파일의 지정 방법에 관하여
038 같은 페이지 내에서 링크를 설정해 효율적으로 읽을 수 있게 합니다
039 다른 페이지의 특정 부분에 링크를 설정하여 관련 내용을 표시합니다
040 저해상도 그림에 원본 그림을 링크하여 표시 시간을 단축합니다
041 링크 대상을 다른 창에 표시하여 동시에 볼 수 있도록 합니다
042 링크 색을 변경하여 읽기 쉽게 표시합니다
043 특정 위치에 링크 색을 설정하여 보다 읽기 쉽게 표시합니다
044 링크의 밑줄을 제거하여 글을 읽기 쉽게 표시합니다
045 마우스에 반응하는 링크를 설정하여 링크 부분이 눈에 띄게 합니다
046 마우스를 옮겼을 때 설명을 표시하여 내용을 이해하기 쉽게 만듭니다
047 링크 설명을 마우스 움직임에 맞춰 페이지의 특정 부분에 표시합니다
048 마우스를 옮겼을 때 글꼴 크기에 변화를 줍니다
049 마우스를 옮겼을 때 글꼴 종류에 변화를 줍니다
050 마우스를 옮겼을 때 글꼴을 기울임으로 변경합니다
051 마우스를 옮겼을 때 글꼴 색에 변화를 줍니다
052 마우스를 옮겼을 때 글꼴의 굵기에 변화를 줍니다
053 마우스를 옮겼을 때 포인터의 모양에 변화를 줍니다
054 클릭만으로 이-메일 프로그램을 실행하여 사용자의 수고를 덜어줍니다
055 클릭만으로 다운로드가 가능하게 하여 사용자의 수고를 덜어줍니다
056 링크 키를 설정해 키를 누르면 이동할 수 있도록 만듭니다


Chapter 4. 목록 만들기

목록에 관하여
057 목록 표시를 변경하여 목록에 변화를 줍니다
058 번호로 된 목록 표시를 변경하여 목록에 변화를 줍니다
059 목록 표시를 일괄적으로 지정하여 수고를 덥니다
060 그림을 목록 표시로 지정 하고, 빠르게 표시합니다
061 목록 번호를 조정해 원하는 번호부터 시작합니다
062 목록 표시의 위치를 변경 하여 문단을 다듬습니다
063 목록 표시의 종류 등을 일괄적으로 지정하여 수고를 덥니다
064 목록 제목을 균형 있게 배열하여 레이아웃을 정돈합니다
065 목록 기능을 이용하여 사이트 맵을 작성합니다
066 표 대신 정의 목록으로 작성하여 빠르게 표시합니다


Chapter 5. 배경 만들기

배경에 관하여
067 배경과 글꼴의 색을 일괄 적으로 지정합니다
068 배경으로 그림을 설정하여 보기 좋은 페이지로 만듭니다
069 배경 그림을 고정해 글을 읽기 쉬운 페이지로 만듭니다
070 배경 그림의 배열 방법을 지정하여 반복 표시되는 것을 막습니다
071 배경 그림을 하나만 표시하여 깔끔한 배경으로 만듭니다
072 배경 그림을 원하는 위치에 표시하여 글을 읽기 쉽게 만듭니다
073 배경 그림의 위치를 명령어로 지정합니다
074 배경을 일괄적으로 설정하여 따로 지정하는 수고를 덥니다
075 문자의 배경에만 그림을 표시하여 문자열을 강조합니다
076 배경에 테두리를 설정하여 페이지 전제가 칼럼처럼 보이게 합니다


Chapter 6. 표와 괘선 만들기

표에 관하여
077 표에 제목과 캡션을 표시하여 표를 보기 좋게 만듭니다
078 제목과 캡션의 위치를 읽기 쉽도록 변경합니다
079 표 주위에 문장을 배치하여 보기 좋게 만듭니다
080 표와 문장 사이의 간격을 두어 읽기 쉽게 배치합니다
081 표의 가로, 세로 크기를 설정해 페이지의 균형을 잡습니다
082 셀 내의 문자열 위치를 변경해 읽기 쉬운 표로 만듭니다
083 스타일 시트를 사용해 셀 내의 문자열 위치를 변경합니다
084 셀의 괘선과 문자열 사이의 간격을 설정하여 보기 좋은 표를 만듭니다
085 셀 내 문자열의 줄바꾸기를 제한하여 보기 좋은 표로 만듭니다
086 셀을 통합하여 변칙적인 표도 보기 좋게 만듭니다
087 셀의 배경에 색을 넣어 개성적인 표를 만듭니다
088 스타일 시트를 이용해 셀의 배경에 간단하게 색을 설정합니다
089 셀 배경에 그림을 넣어 개성적인 표로 만듭니다
090 표 외곽의 두께를 변경하여 입체적인 표로 만듭니다
091 표 외곽의 스타일을 변경하여 다양하게 변화된 표로 만듭니다
092 표 외곽의 각 변 두께를 변경하여 다양하게 변화된 표로 만듭니다
093 표 괘선의 중 원하는 선을 삭제하여 표에 변화를 줍니다
094 표의 괘선에 명암을 넣어 보다 입체적인 표로 만듭니다
095 표의 외곽선을 일괄적으로 설정하여 수고를 덥니다
096 표 외곽선의 스타일을 일괄적으로 설정하여 수고를 덥니다
097 내부 괘선의 굵기를 설정하여 보기 좋은 표로 만듭니다
098 내부 괘선을 제거하여 원하는 표로 만듭니다
099 표의 행을 그룹화하여 각 그룹의 스타일을 일괄 지정합니다
100 표의 열을 그룹화하여 각 그룹의 스타일을 일괄 지정합니다


Chapter 7. 프레임 만들기

프레임에 관하여
101 프레임 테두리와 글과의 간격을 설정해 프레임 내 배치를 정돈합니다
102 프레임 스크롤 바의 표시 여부를 설정하여 보기 좋은 페이지로 만듭니다
103 프레임의 경계선을 제거하여 보기 좋은 레이아웃을 구성합니다
104 프레임 경계선을 고정시켜 프레임의 크기를 고정합니다
105 프레임 경계선에 색을 넣어 보기 좋은 페이지로 만듭니다
106 프레임을 지원하지 않는 브라우저를 배려한 페이지를 만듭니다
107 링크 대상을 표시할 프레임을 지정하여 보기 좋은 페이지로 만듭니다
108 링크 대상의 내용을 표시할 프레임을 일괄 설정합니다
109 프레임을 해제하여 페이지를 화면 전체에 표시합니다
110 플로팅 프레임의 크기를 변경하여 보기 좋은 페이지로 만듭니다
111 링크 대상의 내용을 플로팅 프레임에 표시합니다
112 플로팅 프레임의 테두리를 제거하여 깔끔한 페이지로 만듭니다
113 플로팅 프레임의 위치를 지정하여 레이아웃을 정리합니다
114 프레임 경계선의 굵기를 변경하여 페이지에 효과를 줍니다


Chapter 8. 이미지 만들기

그림에 관하여
115 그림의 내용을 글로 표시하여 그림 표시가 불가능한 브라우저를 배려합니다
116 그림의 테두리를 제거하여 레이아웃을 살립니다
117 그림 옆에 단문을 배치하여 전체 이미지에 변화를 줍니다
118 그림 옆에 배치할 글을 섬세하게 설정하여 보기 좋게 만듭니다
119 그림 옆에 장문을 배치하여 원하는 레이아웃을 만듭니다
120 그림과 글 사이의 간격을 설정해 보기 좋은 페이지로 만듭니다
121 그림을 단계적으로 표시하여 이용자의 부담을 덜어줍니다
122 그림을 그레이 스케일로 표시하여 흑백 사진처럼 만듭니다
123 그림에 필터를 지정하여 본래의 그림과 다른 이미지로 표시합니다
124 그림에 흔들림을 설정하여 화면 표시에 변화를 줍니다
125 그림의 색을 반전하여 전혀 다른 이미지를 만듭니다
126 그림의 뒤집기 기능을 이용해 표시할 그림의 수를 줄입니다
127 그림에 뢴트겐 사진과 같은 효과를 줍니다
128 여러 개의 그림을 겹쳐 하나의 그림처럼 표시합니다
129 마우스의 움직임에 따라 그림이 변하도록 만듭니다
130 그림을 잘라내어 그림의 일부만을 표시합니다
131 이미지 맵을 이용해 하나의 그림에 여러 개의 링크를 설정합니다
132 특수 글꼴을 사용해 문자로 그림을 표시한다
133 그림 파일을 동화상 파일로 변경하여 역동적인 페이지로 만듭니다


Chapter 9. 폼 만들기

폼에 관하여
134 1행짜리 입력란의 문자 수와 길이를 설정하여 짜임새 있는 폼을 만듭니다
135 필드에 입력한 내용을 표시하여 이해하기 쉬운 폼으로 만듭니다
136 암호를 '*'로 표시해 다른 사람이 볼 수 없도록 만듭니다
137 장문용 입력란을 설정하여 입력하기 쉽게 만듭니다
138 장문용 입력란의 크기를 변경하여 입력하기 쉽게 만듭니다
139 전송되는 글에 자동 줄바꾸기를 설정하여 읽기 쉽게 만듭니다
140 옵션 단추에 속성을 설정하여 자료를 이해하기 쉽게 만듭니다
141 옵션 단추의 기본값을 설정해 자료가 없는 경우를 방지합니다
142 확인란에 속성을 설정하여 답장 자료를 이해하기 쉽게 만듭니다
143 확인란의 기본값을 설정해 자료가 없는 경우를 방지합니다
144 단추 이름을 변경하여 폼의 내용에 맞는 단추로 만듭니다
145 그림에 단추 기능을 설정해 개성적인 전송 단추를 만듭니다
146 단추를 원하는 대로 변경하여 이해하기 쉬운 단추로 만듭니다
147 풀다운 메뉴로 선택 항목을 정리하여 깔끔하게 만듭니다
148 예상되는 응답을 미리 표시해 사용자의 수고를 덜어줍니다
149 선택 항목을 필드 방식으로 표시합니다
150 주제별로 폼을 그룹화하여 보기 쉬운 폼으로 만듭니다


부록
CD-ROM의 사용법
HTML/스타일 시트의 정리
색인