추천사 역자서문 저자서문 Part 1 CSS기초 ... 33 1장 CSS를 위한 HTML 인식 전환 ... 35 HTML : 과거와 현재 ... 35 HTML 과거 : 좋아보이기만 하면 그만이다 ... 36 HTML 현재 : CSS를 위한 뼈대로 ... 38 CSS를 위한 HTML 작성하기 ... 38 구성 생각하기 ... 38 알아야 할 새로운 HTML 태그 두 개 ... 39 잊어야 할 HTML ... 41 여러분을 인도해 줄 조언 ... 44 Doctype의 중요성 ... 45 2장 스타일 및 스타일시트 작성 ... 49 스타일에 대한 분석 ... 49 스타일시트의 이해 ... 52 내부냐, 외부냐 - 선택의 기준 ... 52 내부 스타일시트 ... 53 외부 스타일시트 ... 54 HTML을 이용한 스타일시트의 연결 ... 55 CSS를 이용한 스타일시트의 연결 ... 56 확인학습 : 첫 스타일의 작성 ... 58 인라인 스타일 작성 ... 59 내부 스타일시트 작성 ... 60 외부 스타일시트 작성 ... 63 3장 선택자 기초 : 스타일 대상 확인 ... 67 태그 선택자 : 페이지 전체 스타일 정의 ... 68 클래스 선택자 : 세부적인 조절 ... 69 ID 선택자 : 특정 페이지 엘리먼트 ... 71 태그에 포함된 태그 스타일 정의 ... 74 HTML 가계도 ... 75 하위 선택자 구성하기 ... 76 태그 그룹의 스타일 정의 ... 78 그룹 선택자 생성하기 ... 79 전체 선택자(*) ... 79 가상 클래스 및 가상 엘리먼트 ... 80 링크의 스타일 정의 ... 80 그밖의 가상 클래스 및 가상 엘리먼트 ... 81 고급 선택자 ... 85 자식 선택자 ... 85 인접 동기 선택자 ... 86 애트리뷰트 선택자 ... 87 확인학습 : 선택자 종합 선물 세트 ... 88 그룹 선택자 생성 ... 91 클래스 선택자의 생성 및 적용 ... 92 ID 선택자의 생성 및 적용 ... 94 하위 선택자 생성 ... 96 4장 상속을 통한 시간 절약 ... 99 상속이란? ... 99 상속으로 스타일시트를 효율화하는 방법 ... 100 상속의 제한 ... 102 확인학습 : 상속 ... 103 기초 예제 : 1단계 상속 ... 104 상속을 이용하여 페이지 전체의 스타일 재정의하기 ... 105 상속 무활동 ... 107 5장 다중 스타일 관리 : 캐스케이드(종속) ... 109 스타일의 캐스케이드 원리 ... 110 상속 스타일의 누적 ... 110 가장 인접한 피상속자가 우선한다 ... 111 직접 적용된 스타일이 우선한다 ... 112 태그는 하나, 스타일은 여러 개 ... 113 특정도 : 어느 스타일이 우선하느냐 ... 115 연장전 : 최후의 스타일이 우선한다 ... 117 캐스케이드 조정하기 ... 118 특정도 변경하기 ... 119 선택적 오버라이딩 ... 119 확인학습 : 캐스케이드 실습 ... 121 혼성 스타일의 작성 ... 121 캐스케이딩과 상속의 연결 ... 123 충돌 해소 ... 124 Part 2 CSS적용 ... 127 6장 텍스트 형식 정의하기 ... 129 텍스트 형식 정의 ... 129 글꼴 선택 ... 131 텍스트에 색상 입히기 ... 132 글꼴 크기 변경 ... 134 픽셀을 이용하는 방법 ... 135 키워드, 백분율, Em을 이용하는 방법 ... 135 단어 및 문자의 형식 정의 ... 140 이탤릭체화 및 볼드체화 ... 140 대／소문자 전환 ... 141 Decorating ... 142 문자 및 단어 간격 ... 143 단락 전체의 형식 정의 ... 145 줄 간격 조정 ... 145 텍스트 정렬 ... 147 첫 줄 들여쓰기 및 여백 없애기 ... 148 첫 글자나 단락 첫 줄의 형식 정의 ... 149 목록 스타일 정의하기 ... 150 목록의 유형 ... 150 블릿과 번호의 위치 지정 ... 153 이미지 블릿 ... 155 확인학습 : 텍스트 형식 정의 실습 ... 156 페이지 설정하기 ... 156 머리글자 및 단락의 형식 지정 ... 158 목록의 형식 지정 ... 160 마무리 손질하기 ... 163 7장 Margin, Padding, Border ... 165 박스 모델의 이해 ... 165 Margin과 Padding으로 공간 조절하기 ... 167 Margin 및 Padding의 간략한 표기 ... 168 여러 Margin 사이의 충돌 ... 169 음수 Margin을 이용하여 간격 없애기 ... 171 인라인 및 블록 - 계층 박스 표시하기 ... 172 테두리 넣기 ... 174 Border 프로퍼티의 간략한 표기 ... 175 개별 테두리의 형식 정의 ... 176 배경색 넣기 ... 178 높이와 폭 정하기 ... 179 박스의 실제 너비와 높이 계산하기 ... 180 Overflow 프로퍼티로 탭 조절하기 ... 182 IE 5에서 깨지는 박스 모델 바로잡기 ... 183 부유 엘리먼트로 내용 감싸기 ... 187 배경, 테두리, 부유 엘리먼트 ... 189 Float 해제 ... 190 확인학습 : 여백, 배경, 테두리 ... 192 페이지 여백 조정하기 ... 193 태그 주변 공간조정하기 ... 194 배경 및 테두리를 넣어 텍스트 강조하기 ... 195 사이드 바 제작 ... 198 브라우저 버그 바로잡기 ... 201 좀더 해보기 ... 204 8장 웹페이지에 그림 넣기 ... 205 CSS와〈img〉태그 ... 205 배경 이미지 ... 207 반복 제어하기 ... 209 배경 이미지의 위치 지정 ... 211 Keyword ... 212 정확한 값 ... 213 백분율 값 ... 214 제자리에 이미지 고정시키기 ... 216 Background 프로퍼티 속기법의 이용 ... 217 확인학습 : 사진 갤러리 제작 ... 219 이미지에 테두리 넣기 ... 219 캡션 넣기 ... 221 사진 갤러리 만들기 ... 225 드롭 쉐도우 넣기 ... 229 확인학습 : 배경 이미지 사용하기 ... 231 페이지의 배경에 이미지 넣기 ... 232 테두리를 그림으로 대체하기 ... 236 블릿 목록에 이미지 블릿 사용하기 ... 237 사이드 바에 둥근 모서리 넣기 ... 239 외부 스타일시트 제작하기 ... 243 9장 사이트에 내비게이션 달기 ... 245 스타일을 정의할 대상 링크 선정하기 ... 245 링크 상태에 대한 이해 ... 246 특정 링크를 대상화하기 ... 247 링크 스타일 정의하기 ... 249 링크에 밑줄 넣기 ... 249 버튼 제작 ... 251 이미지 사용하기 ... 253 내비게이션 바 제작 ... 255 비순차 목록 이용하기 ... 255 세로 내비게이션 바 ... 257 가로 내비게이션 바 ... 259 고급 링크 기법 ... 265 커다란 클릭 버튼 ... 265 CSS 방식의 프리로딩 롤오버 ... 267 미닫이 문 ... 269 확인학습 : 링크 스타일 정의하기 ... 271 기본적인 링크 형식 지정 ... 271 링크에 배경 이미지 넣기 ... 273 외부 링크에 하이라이트 주기 ... 275 방문한 페이지 표시하기 ... 277 세로 내비게이션 바 제작 ... 278 롤오버 추가와 '현재 페이지' 링크 생성 ... 282 IE 버그 바로잡기 ... 285 세로를 가로로 ... 286 10장 테이블 및 폼의 형식 정의 ... 291 테이블 올바로 사용하기 ... 291 테이블 스타일 정의하기 ... 293 Padding 넣기 ... 294 세로와 가로 정렬 조정하기 ... 295 테두리 생성 ... 296 행과 열의 스타일 정의 ... 297 폼 스타일 정의하기 ... 299 HTML 폼 엘리먼트 ... 300 CSS를 이용하여 폼 레이아웃 하기 ... 302 확인학습 : 테이블 스타일 정의하기 ... 305 확인학습 : 폼 스타일 정의하기 ... 309 Part 3 CSS 페이지 레이아웃 ... 315 11장 Float을 이용한 레이아웃 제작하기 ... 317 CSS 레이아웃의 동작 원리 ... 317 중요한〈div〉태그 ... 318 웹페이지 레이아웃의 종류 ... 319 부유 레이아웃의 기초 ... 322 레이아웃에 부유 엘리먼트 적용하기 ... 325 전체 단 부유시키기 ... 326 부유 엘리먼트에 포함된 부유 엘리먼트 ... 328 음수 Margin을 이용하여 엘리먼트 배치하기 ... 329 Float의 문제점 해소 ... 334 Float의 해제와 포장 ... 334 단을 전체 높이에 꽉 차게 하기 ... 337 플로트 드롭의 방지 ... 341 인터넷 익스플로러의 버그 다루기 ... 344 이중여백 버그 ... 344 3px 간격 버그 ... 346 기타 IE의 문제점 ... 348 확인학습 : 다단 레이아웃 ... 349 HTML 구조화하기 ... 350 레이아웃 스타일 작성 ... 351 단 하나 더 넣기 ... 352 '가짜 단' 넣기 ... 353 너비 고정하기 ... 356 확인학습 : 음수 Margin 레이아웃 ... 357 레이아웃의 중앙 정렬 ... 358 단 이동하기 ... 361 최종 수정 ... 364 12장 웹페이지 상에 엘리먼트 위치 지정 ... 367 위치 지정 프로퍼티의 동작 원리 ... 368 위치 지정 값 할당하기 ... 370 절대 위치 지정이 상대적인 경우 ... 374 상대 위치 지정을 사용하는 경우와 그 대상 ... 375 엘리먼트 쌓아올리기 ... 378 페이지의 일부 가리기 ... 379 막강한 위치 지정 기법들 ... 381 엘리먼트 내에서의 위치 지정하기 ... 381 엘리먼트를 박스 밖으로 삐져나오게 하기 ... 382 CSS의 위치 지정을 이용하여 페이지 레이아웃하기 ... 384 고정 위치 지정을 이용하여 CSS 스타일의 테두리 제작하기 ... 389 확인학습 : 페이지 엘리먼트의 위치 지정 ... 393 페이지 배너 개선하기 ... 393 사진에 캡션 넣기 ... 398 페이지 레이아웃 하기 ... 400 Part4 CSS 고급 ... 407 13장 인쇄 페이지를 위한 CSS ... 409 미디어 스타일시트의 동작 원리 ... 410 미디어 스타일시트를 추가하는 방법 ... 412 외부 스타일시트에 대한 미디어 유형 명기 ... 412 스타일시트 내부에 미디어 유형 명기 ... 413 인쇄용 스타일시트의 작성 ... 414 화면용 스타일 정의를 무효화하기 위한 !important 사용 ... 414 텍스트 스타일 뜯어 고치기 ... 415 인쇄용으로 배경 스타일 정의하기 ... 417 불필요한 페이지 영역 감추기 ... 419 인쇄용 페이지 구분선 넣기 ... 421 확인학습 : 인쇄용 스타일시트 작성하기 ... 422 불필요한 페이지 엘리먼트 삭제 ... 422 배경삭제와 레이아웃 조정 ... 424 텍스트의 형식 재정의하기 ... 426 로고 나오게 하기 ... 427 URL 나오게 하기 ... 427 14장 CSS 코딩습관 개선하기 ... 429 주석 달기 ... 429 스타일과 스타일시트의 체계화 ... 431 스타일 이름은 간명하게 ... 431 다중 클래스를 사용하여 시간 절약하기 ... 432 스타일들을 그룹으로 묶어 조직화하기 ... 434 다중 스타일시트 이용하기 ... 435 브라우저의 스타일 간섭 없애기 ... 438 하위 선택자 사용하기 ... 441 페이지 분할하기 ... 442 섹션별 Body 구분짓기 ... 444 인터넷 익스플로러 핵 관리하기 ... 446 먼저 최신 브라우저에 맞추어 디자인하자 ... 447 조건부 주석으로 IE용 CSS 코드 분리하기 ... 448 부록 A : CSS 프로퍼티 참고자료 ... 453 부록 B : 드림위버 8에서 CSS 작성방법 ... 487 부록 C : CSS 참고자료 ... 511 찾아보기 ... 521