1장 기초 다지기 <br/> 구조가 탄탄한 코드 만들기 <br/> 의미를 살린 마크업 <br/> ID와 클래스 이름 짓기 <br/> div와 span <br/> 문서 유형, DOCTYPE 전환, 브라우저 모드 <br/> 유효성 검사 <br/> 브라우저 모드 <br/> DOCTYPE 전환 <br/> 스타일을 꾸밀 대상 선택하기 <br/> 선택자 활용 기초 <br/> 유사 클래스 선택자 <br/> 전체 선택자 <br/> 고급 선택자 <br/> 자식 선택자, 인접 형제 선택자 <br/> 속성 선택자 <br/> 캐스캐이드 효과와 적용순서 <br/> 지정순위 <br/> 스타일시트에서 지정순위 활용하기 <br/> body 태그에 클래스나 ID 지정하기 <br/> 상속 <br/> 스타일 시트를 계획/구성/관리하는 방법 <br/> 문서에 스타일 적용하기 <br/> 코드 주석 활용법 <br/> 구조 표시를 위한 주석 <br/> 작업 기록을 위한 주석 <br/> 주석을 제거하고 스타일시트 최적화하기 <br/> 스타일 가이드 <br/> 손쉬운 스타일시트 유지관리법 <br/> 요약 <br/><br/>2장 화면 표시를 위한 모델 완벽 정리 <br/> 박스 모델 완벽 정리 <br/> 윈도우용 인터넷 익스플로러의 박스 모델 <br/> 마진 겹침 현상 <br/> 포지셔닝 완벽 정리 <br/> 화면 표시 모델 <br/> 상대 위치 <br/> 절대 위치 <br/> 고정 위치 <br/> 플로팅 <br/> 라인박스와 플로트 해제 방법 <br/> 요약 <br/><br/>3장 배경 이미지와 이미지 대치 기법 <br/> 배경 이미지 기초 다지기 <br/> 둥근 모서리 상자 모양 만들기 <br/> 고정폭 둥근 모서리 상자 모양 <br/> 유동폭 둥근 모서리 상자 <br/> 마운틴탑 코너 <br/> 그림자 효과 <br/> 간단한 그림자 효과 내기 <br/> Clagnut 스타일 그림자 효과 <br/> 부드러운 그림자 효과 만들기 <br/> 여러 겹으로 만드는 그림자 효과 <br/> 이미지 대치 기법 <br/> FIR 방법 <br/> 파크 방법 <br/> 길더/레빈 방법 <br/> IFR와 sIFR 방법 <br/> 요약 <br/><br/>4장 링크 모양 꾸미기 <br/> 링크 스타일 기초 <br/> 밑줄치며 놀기 <br/> 예쁜 링크 밑줄 만들기 <br/> 링크 유형별로 스타일 지정하기 <br/> 문서나 뉴스 피드 다운로드용 링크 꾸미기 <br/> 버튼과 롤오버 효과 만들기 <br/> 롤오버 기초 <br/> 이미지를 사용한 롤오버 효과 <br/> 픽시 방법을 이용한 롤오버 효과 <br/> 방문한 링크 스타일 꾸미기 <br/> CSS로만 만드는 툴팁 <br/> 요약 <br/><br/>5장 리스트 스타일과 내비게이션 바 만들기 <br/> 리스트 스타일 기초 <br/> 세로형 내비게이션 바 만들기 <br/> 내비게이션 바에서 현재 페이지 표시하기 <br/> 가로형 내비게이션 바 만들기 <br/> 슬라이딩 도어 효과의 탭 내비게이션 바 만들기 <br/> CSS 이미지 맵 만들기 <br/> 플리커 스타일의 이미지 맵 만들기 <br/> 리모트 롤오버 만들기 <br/> 정의 리스트 <br/> 요약 <br/><br/>6장 접근성 높은 폼과 테이블 만들기 <br/> 데이터 테이블 스타일 꾸미기 <br/> 테이블 관련 엘리먼트 소개 <br/> 써머리와 캡션 <br/> thead, tbody, tfoot <br/> col, colgroup <br/> 데이터 테이블 마크업 만들기 <br/> 테이블 스타일 꾸미기 <br/> 화면 모양 만들기 <br/> 추가 사항 처리 <br/> 간단한 폼 레이아웃 만들기 <br/> 유용한 폼 엘리먼트 <br/> 폼 레이블 <br/> 기본 레이아웃 <br/> 기타 엘리먼트 처리방법 <br/> 장식 마무리하기 <br/> 필수 입력항목 <br/> 복잡한 폼 레이아웃 만들기 <br/> 접근성을 고려한 데이터 입력 방식 <br/> 다단 레이아웃의 체크박스 <br/> 폼 에러 메시지 만들기 <br/> 요약 <br/><br/>7장 레이아웃 <br/> 디자인을 가로 중간에 배치하기 <br/> auto 마진 이용 방법 <br/> 포지셔닝 음수 마진값 이용 방법 <br/> 플로트 기반의 레이아웃 <br/> 플로트를 이용한 2단 레이아웃 <br/> 플로트를 이용한 3단 레이아웃 <br/> 고정 레이아웃, 유동 레이아웃 <br/> 화면비례형 레이아웃 <br/> 글자비례형 레이아웃 <br/> 글자비례-화면비례 혼합형 레이아웃 <br/> 글자와 화면크기에 따라 늘어나는 이미지 <br/> 가짜 단 모양 만들기 <br/> 요약 <br/><br/>8장 핵과 필터 <br/> 핵과 필터 <br/> 핵과 필터 사용에 대한 경고 <br/> 핵 사용시 유의점 <br/> 개별적인 스타일시트에 필터 적용하기 <br/> 인터넷 익스플로러 조건 주석문 <br/> 밴드 패스 필터 <br/> 개별적인 규칙과 선언에 필터 적용하기 <br/> 자식 선택자 필터 <br/> 속성 선택자 필터 <br/> 별표 HTML 필터 <br/> 맥용 IE의 주석처리된 백슬래시 핵 <br/> 속성에 이스케이프 문자를 사용하는 핵 <br/> 탄텍 박스 모델 핵 <br/> 쉽게 개선된 박스 모델 핵 <br/> !important와 언더바 핵 <br/> 오웬 핵 <br/> 요약 <br/><br/>9장 브라우저 버그 해결하기 <br/> 버그 잡기 <br/> 흔히 발생하는 CSS 문제 <br/> 지정순위와 정렬방법 오류 <br/> 마진 겹침 현상 <br/> 버그 잡기 기초 <br/> 문제 분리하기 <br/> 테스트 범위 최소화하기 <br/> 증상이 아닌 문제원인 바로 잡기 <br/> 도움 요청하기 <br/> 레이아웃 <br/> 레이아웃이란? <br/> 레이아웃 때문에 생기는 효과 <br/> 흔히 발생하는 버그 해결방법 <br/> 더블마진 플로트 버그 <br/> 텍스트 주변에 3픽셀 공간 표시 버그 <br/> IE 6의 문자 중복 표시 버그 <br/> IE 6의 피커부 버그 <br/> 상대좌표 컨테이너에서 절대좌표 지정 <br/> 인터넷 익스플로러 관련 이야기 <br/> 요약 <br/><br/>부록Ⅰ 동호회 사이트 만들기 <br/> 적용 사례 소개 <br/> 하위 선택자를 이용한 컨텐트 영역 조정 <br/> XHTML 구조 <br/> 명명 규칙에 대해 <br/> 3단 레이아웃 <br/> 2단 레이아웃 <br/> 1단 레이아웃 <br/> 불필요한 단 제거 <br/> 컬럼 띄우기 <br/> 계산방법 <br/> 올바른 위치에 컬럼 띄우기 <br/> body 클래스를 이용해서 현재 페이지 표시하기 <br/> 드롭인 박스 <br/> 둥근 모서리 상자 만들기 <br/> 평면 흰색 상자 <br/> 특별한 모양 만들기 <br/> 투명 모서리와 테두리선 <br/> 이미지 <br/> CSS <br/> 원하는 동작을 위한 클래스 조합 <br/> 이미지 클래스 <br/> 기본 이미지 <br/> 테두리선 없는 이미지 <br/> 큰 이미지 <br/> 링크 모양 꾸미기 <br/> 사이드바 링크 <br/> 방문한 링크 표시하기 <br/> LVHA가 아니라 LAHV 사용하기 <br/> 외부 링크 다르게 표시하기 <br/> 그림자 효과 만들기 <br/> 그림자 이미지 만들기 <br/> 이미지에 플로팅 지정하기 <br/> 요약 <br/><br/>부록 II 투스카니 럭셔리 리조트 <br/> 적용 사례 소개 <br/> 유동적인 레이아웃 <br/> 본문과 컨테이너 <br/> masthead <br/> 컨텐트와 사이드바 <br/> 유동적인 속성 <br/> 푸터 <br/> 유동 레이아웃 관련 문제 해결하기 <br/> 절대위치를 이용한 엘리먼트 배치 <br/> 위치 관련 속성 <br/> 쌓는 순서 <br/> 배경 이미지 관련 기법 <br/> 상단을 3개로 나누기 <br/> 방탄웹 기법 적용하기 <br/> 이미지 대치 기법 <br/> 로고 이미지 대치 <br/> 첫 대문자 이미지 대치 <br/> 유동적인 이미지 <br/> 유동적인 이미지를 위한 코딩 <br/> 리스트 항목 하나에 여러 엘리먼트 넣기 <br/> 메뉴 코드 작성 <br/> 요약

먼저 기본적인 (X)HTML과 CSS 개념, 코드 작성방법을 쉽게 설명하는 것에서 시작합니다. 코드 구성 방법과 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배우게 될 것입니다.

1장과 2장은 CSS 기본에 대한 핵심 정리이며, 이미 알고 있었던 내용을 다시 한번 상기시켜줄 것입니다.
3장에서 7장까지에서는 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다룹니다. 각 장은 간단한 설명으로 시작해서 점점 더 복잡한 예제로 발전시켜 나갑니다. 이 부분에서는 모서리가 둥근 상자 만드는 방법, 투명 그림자 효과 사용방법, 탭형 내비게이션 바 만드는 방법, 플리커 스타일의 이미지 맵 만드는 방법 등을 예제로 설명합니다. 브라우저 버그 때문에 CSS 개발자들이 많은 고생을 하기 때문에 각 예제를 만들 때는 여러 브라우저에서 잘 동작할 수 있도록 하는 기법에도 신경을 썼습니다.

8장과 9장에서는 핵, 필터, 브라우저 버그 해결 방법을 설명합니다. 가장 많이 사용되는 필터의 종류와 적절하게 사용하는 방법, 즉 언제 사용해야 하고 언제 사용하면 안되는지를 설명해뒀습니다. 그리고 마이크로소프트 인터넷 익스플로러에서 CSS 버그가 나타나는 이유에 대해서도 배우게 될 것입니다.
마지막 2개 부록에서는 유명한 CSS 디자이너인 사이먼 콜리슨과 캐머론 몰이 이 책에 나온 기법을 종합해 직접 만든 환상적인 적용 사례를 설명합니다. 따라서 각 기법의 동작 방식뿐만 아니라 실제 웹 프로젝트에서 활용하는 방법에 대해 배우게 될 것입니다.
모든 예제 소스코드는 에이콘출판사 웹사이트 http://www.acornpub.co.kr/book/css에서 다운로드 받을 수 있습니다.

■ 최신 CSS 기법 및 활용팁 총정리<br/>■ 놓치고 있었던 CSS 기본 개념 다시 다지기<br/>■ 브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법<br/>■ 유명 CSS 전문가가 직접 만든 실전사례 및 예제<br/><br/>이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다. 기본 사항을 살펴본 후, 각 장에서는 CSS 기반 디자인에서 사용되는 특징을 다룹니다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 독자들이 수행하고 있는 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것입니다. <br/><br/>여러 브라우저 간에 다르게 동작하는 현상 때문에 CSS 작업을 하는 사람들이 많은 고생을 합니다. 이 책에서는 이런 문제를 해결할 수 있는 CSS 핵, 필터, 버그 해결방법을 설명합니다. 또한 이미지 대치 기법, 링크 스타일 만들기, 폼과 리스트 모양 꾸미기, 순수하게 CSS만으로 만드는 레이아웃을 비롯한 많은 정보를 제공하고 있습니다. 이렇게 다룬 모든 기법을 종합해서 CSS 디자이너로 유명한 사이먼 콜리슨과 캐머론 몰이 직접 작성한 2개의 실전사례 예제를 부록에 포함했습니다.<br/><br/>★ 이 책의 대상 ★<br/><br/>이 책은 최신 기법과 다양한 활용사례를 편리하게 참조할 수 있도록 한 권에 정리해놓고 있어서, CSS의 감춰졌던 부분을 기본 개념부터 하나씩 쉽게 이해할 수 있습니다. 지금까지 대부분 책들이 기본적인 기법과 활용을 다루고 있었다면, 이 책은 기본적인 내용은 이미 숙지하고 있고, CSS를 사용해야 하는 이유를 이미 알고 있는 독자를 대상으로 하여 고급 기법에 중점을 두고 설명을 합니다. <br/>기본적인 (X)HTML과 CSS을 알고 있다면 누구에게나 도움이 될 수 있습니다. 하지만 아직 독자가 아직 전문가는 아니라고 가정하고 진행하므로, CSS 디자인에 이제 막 발을 들여놓았든지 CSS 사이트 개발 경력이 몇 년인지에 관계 없이 이 책이 도움이 될 것입니다. CSS 개발 경험이 있다면 대부분 내용을 이해할 수 있을 것입니다. 이 책은 실용적이고 실제 경험에서 비롯된 조언과 예제를 정리하고 있어서 최신 CSS 디자인을 마스터하도록 도울 것입니다.

웹 디자인의 세계는 놀랍습니다. 똑같은 모양을 만들기 위한 방법이 어림잡아 3,647가지나 됩니다. 그나마도 새로운 방법이 계속 나오고 있어서 이 숫자도 정확하지는 않습니다. 특정 문제를 바로잡는 방법은 한 가지가 아니라 여러 웹 디자이너들이 발견한 수많은 방법들을 이용할 수 있습니다. 이런 방법들을 선택할 수 있기에 웹 디자인은 재미있고 흥미로운 동시에, 너무나 많은 정보 때문에 정신이 없기도 하죠. 이 책은 지나치게 많은 정보에 파묻힌 사람들에게 확실한 안내를 해줄 것입니다.
앤디 버드는 지난 몇 년간 웹 표준 디자인을 위한 많은 글과 디자인을 발표했습니다. 명확하고도 쉽게 따라 해 볼 수 있는 핵심적인 CSS 기법의 설명이 녹아있는 이런 책을 접할 수 있다는 건 정말 행운입니다. 우리 같은 웹 전문가에게는 없어서는 안될 모든 해법과 팁을 한눈에 볼 수 있도록 이 책에 정리해놓았습니다.
제가 어떤 목표를 달성하기 위한 한 가지 방법을 소개하기 위한 저술활동을 해온 반면, 앤디 버드는 저와는 완전히 반대의 접근 방법으로 다양한 방식을 설명하고 있습니다. 예를 들어 링크 스타일을 꾸민다든지, 탭 내비게이션을 만든다든지, 다단 레이아웃을 만드는 다양한 방법 말이죠. 이렇게 일반적인 디자인 요소를 다양한 스타일로 만들 수 있는 기법을 갖춤으로써, 정보에 기반해 올바른 결정을 내릴 수 있도록 준비해둘 수 있을 것입니다.
이뿐만 아니라, 디자이너 두 명의 도움을 받아 이 책에서 설명한 기법을 종합해서 사이트를 만드는 방법까지 다루었습니다. 저는 오래 전부터 캐머론과 사이먼 작업의 팬이었습니다. 이 두 사람이 만든 적용사례를 통해 유동적이고 방탄웹적인 유연한 스타일 해법을 볼 수 있다는 건 정말 대단한 혜택이 아닐 수 없습니다.
자, 그럼 여러분 스스로 3,647가지 방법을 직접 실행해 보면서 CSS를 마스터하시기 바랍니다.
댄 씨더홈 『실용예제로 배우는 웹 표준』, 『웹 2.0을 이끄는 방탄웹』의 저자