웹 표준 마스터를 위한 바이블!
『웹 표준』과 『방탄웹』, 『CSS 마스터 전략』을 하나로 묶었다.

『실용예제로 배우는 웹 표준』에서는 여러 가지 웹 표준 개념의 이론과 실습을 다루며, 쉽게 이해할 수 있도록 문제에 대해 여러 가지 다른 해결방법을 보여준다. 각 방법에 대해서는 장점과 단점을 따져가며 상세하게 설명하며 또 각 장의 마지막 부분에는 심화 학습을 제공해 그 장에서 설명한 내용과 관련된 고급 마크업과 CSS에 대해서 소개하고 있다.

『웹 2.0을 이끄는 방탄웹』에서는 표준화를 어떻게 시작하고 무엇을 표준화 시켜야 하는지 알려주는 가이드 북으로 기존의 웹 사이트들을 사례로 들어 문제점을 지적하여 분석하고 있다.

『CSS 마스터 전략』에서는 가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자.


[ SET 구성: 전 3권 ]

1) 『실용 예제로 배우는 웹 표준』
2) 『웹 2.0을 이끄는 방탄웹』
3) 『CSS 마스터 전략』


『실용 예제로 배우는 웹 표준』 소개

웹 표준을 이용해 사이트를 구현하면 어떤 장점이 있을까?
이 책은 웹 표준의 장점을 이해하기 위한 필수 안내서입니다.

XHTML과 CSS 같은 웹 표준은 이미 많이 알려진 기술입니다. 웹 관련 직종에 있다면 웹 표준에 대해서 들어봤을 것입니다. 하지만 웹 표준을 지원하는 웹 브라우저가 점차 늘어가고 있고, 웹 디자이너와 웹 개발자가 웹 표준이 주는 실질적인 이점을 이해하고 이를 준수하려고 하는 움직임이 많아지고는 있지만, 웹 표준으로 사이트를 구축하는 것은 아직까지 쉬운 일은 아닙니다. 웹 표준의 혜택을 완벽하게 이해하고 웹 표준을 이용해 효율적으로 사이트를 구현해야만 비로소 웹 표준의 진수를 아는 것입니다.

웹 표준 가이드는 16장과 부록으로 구성돼있습니다. 각 장에서는 여러 가지 웹 표준 개념의 이론과 실습을 다루며, 쉽게 이해할 수 있도록 문제에 대해 여러 가지 다른 해결방법을 보여줍니다. 이 책을 통해 다단 레이아웃, 이미지 바꿔치기, 테이블과 리스트 제대로 사용하기 등의 방법을 배울 수 있습니다. 이런 접근방법을 통해서 웹 표준의 핵심사항을 빠르게 이해하고 소화해 제대로 활용할 수 있을 것입니다.


『 웹 2.0을 이끄는 방탄웹 』 소개

아무리 멋진 모양과 좋은 내용으로 가득찬 웹사이트를 만들었더라도 다양한 상황과 폭넓은 사용자층을 고려하지 않았다면 그것은 반쪽의 성공이라고 말할 수 있습니다. 댄 씨더홈의 『웹 2.0을 이끄는 방탄웹』은 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 방탄웹을 구축하는 과정을 설명하는 책입니다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 어떤 한계점을 갖고 있는지, 왜 방탄웹이 아닌지를 설명합니다. 그리고 이 사이트를 XHTML과 CSS로 재구축하여 엄청난 양의 코드를 깔끔한 마크업으로 정리하고 CSS를 통해 빠르게 로딩되면서 접근성이 높은 방탄웹으로 변신시키는 방법을 안내합니다. 특히 마지막 장에서는 이 책에서 다룬 기법을 종합해 진정한 방탄웹을 만들어 보게 됩니다.


『 CSS 마스터 전략』 소개

이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다. 기본 사항을 살펴본 후, 각 장에서는 CSS 기반 디자인에서 사용되는 특징을 다룹니다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 독자들이 수행하고 있는 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것입니다.

여러 브라우저 간에 다르게 동작하는 현상 때문에 CSS 작업을 하는 사람들이 많은 고생을 합니다. 이 책에서는 이런 문제를 해결할 수 있는 CSS 핵, 필터, 버그 해결방법을 설명합니다. 또한 이미지 대치 기법, 링크 스타일 만들기, 폼과 리스트 모양 꾸미기, 순수하게 CSS만으로 만드는 레이아웃을 비롯한 많은 정보를 제공하고 있습니다. 이렇게 다룬 모든 기법을 종합해서 CSS 디자이너로 유명한 사이먼 콜리슨과 캐머론 몰이 직접 작성한 2개의 실전사례 예제를 부록에 포함했습니다.

[ 저자 소개 ]

댄 씨더홈
댄 씨더홈은 여러 차례 수상 경력이 있는 웹 디자이너이자 작가입니다. 현재 메사추세츠주의 살렘에 살고 있으며, 디자인 및 웹 개발 컨설팅 회사인 심플비츠(SimpleBits)의 창업자이기도 합니다. 저자는 웹 표준 기반의 사이트 디자인과 구축에 다년간의 경험을 쌓아왔습니다. 이 분야에 관련된 전문성이 널리 인정받아 다양한 컨퍼런스에서 강의한 바 있으며 웹표준 기반의 디자인을 도입하려는 기업에 자문을 많이 하고 있습니다. 많은 관심을 받은 바 있는 『실용 예제로 배우는 웹 표준』의 저자이면서, “어 리스트 어파트(A List Apart)”에 여러 기사를 기고했습니다. 웹, 기술, 그리고 인생 전반에 대한 글을 올리는 유명 블로그인 심플비츠(SimpleBits)를 운영하고 있습니다.

앤디 버드
앤디는 영국 브리튼에 거주하는 사용자 경험 디자이너이자 웹 표준 개발자입니다. 웹 디자인 컨설팅 회사인 클리어레프트(http://www.clearleft.com) 사의 크리에이티브 디렉터로서, 매력적이고 접근성 높은 웹 표준 호환 웹 사이트 구축 작업을 즐기고 있습니다. 그의 홈페이지는 www.andybudd.com이며 최근 웹 디자인 관련 이슈에 대해서 지속적으로 글을 올리고 있습니다. 앤디는 국제 디자인 컨퍼런스, 워크샵, 교육 강사로 활동하고 있으며 영국의 첫 번째 웹 2.0 컨퍼런스를 진행하기도 했습니다(http://www.dconstruct.org). 업계에 필요한 수준 높은 교육에 대한 열의 때문에 스킬스왑(http://www.skillswap.org)이라는 교육/네트워킹 커뮤니티를 운영하고 있기도 합니다. 또한 웹 표준에 대한 인식을 넓히고 장려하기 위한 웹 표준 어워드(http://www.webstandardsawards.com) 준비를 돕고 있습니다.

캐머론 몰
캐머론은 업계에 가장 많이 알려진 뉴 미디어 디자이너 중 한 명으로 다양한 웹 디자인, 우아한 인터페이스, 깔끔한 마크업 작성에 뛰어난 실력을 지니고 있습니다. 수많은 웹 사이트의 디자인과 리뉴얼에 참여하면서 보여준 다양한 기법은 많은 사이트에 영향을 줬습니다. 캐머론이 지닌 마케팅 경험 배경과 디자인 감각은 새로운 비주얼 경험을 제시할 수 있는 역량이기도 합니다. NPRNational Public Radio, 커뮤니케이션 아트, 비어 등 유명한 웹 사이트 작업을 통해 인정을 받았습니다. 그의 개인 사이트인 CameronMoll.com은 관계 깊은 대화를 통해 디자인 방법을 제공하고 있으며 그의 작업 소스 파일을 다운로드 받을 수 있습니다.

사이먼 콜리슨
사이먼은 Agenzia(http://www.agenzia.co.uk)의 리드 웹 개발자입니다. 그는 레코드 회사, 유명 음악 아티스트, 비주얼 아티스트, 일러스트레이터를 위한 수많은 웹 프로젝트를 수행했습니다. 사이먼은 이런 작업을 하면서 모든 웹 사이트에서 웹 표준에 기반한 접근성과 사용성을 중시한 제작방법이 중요해 질 것을 예견했습니다. 사이먼은 CSS 기반의 웹 사이트인 스타일갈라에 주기적으로 리뷰를 올리고, 그의 개인 블로그인 www.collylogic.com에 웹 표준, 음악, 영화, 여행과 같은 다양한 이야기를 올리고 있습니다.


[ 역자 소개 ]

박수만
새롭고 쉬운 인터넷 서비스를 만드는 (주)더블트랙(www.doubletrack.net) 대표이사로 일하고 있다. 한국 웹표준화 프로젝트(www.webstandard.or.kr) 멤버이며, 웹 표준 관련 대표도서인 『실용예제로 배우는 웹 표준』, 『웹 2.0을 이끄는 방탄웹』을 국내에 소개했다. 개인 블로그인 Suman’s shallow thoughts(www.sumanpark.com/blog)를 통해서 웹 표준 동향 등 새로운 소식을 접할 수 있다. 명지대학교 컴퓨터공학과 학부와 대학원(소프트웨어 공학 전공)을 졸업했다.

목차

• [ 실용예제로 배우는 웹 표준 ]
  
• 1부 마크업, 처음부터 제대로 배우기
  
  • 1장 리스트
    • 블로그 꾸미기
    • 퀴즈 시간
  • 방법 A. <br /> 태그 사용
• 줄 바뀜 문제
• 방법 B. 불릿 활용
  • 방법 C. 좀 더 정확하게
• 방법 D. 잘 감싸봅시다
  • 요약
  • 심화 학습
• 불릿 감추기
• 불릿 이미지를 넣어 더 예쁘게
• 내비게이션 메뉴바로 활용해보기
• 다양한 미니탭 모양 바꿔보기
  

2장 머리글

• 문서 제목을 마크업하는 가장 좋은 방법은?

방법 A. 의미를 살린 방법?

방법 B. p와 b 조합

• 방법 C. 스타일과 내용 모두 살리기
  • 요약
  • 심화 학습
• 스타일링 기초
• 배경 지정
• 배경과 테두리선

아이콘 지정

• 손쉬운 업데이트

카멜레온 효과

• 마무리
  

3장 테이블을 쓰면 안된다?

• 테이블이 적합한 경우
• 테이블 기초

요약 정보 덧붙이기

테이블 헤더

헤더와 데이터의 관계

<thead>, <tfoot>, <tbody>

테이블을 쓰면 안된다?

• 심화 학습

격자 만들기

간격 붙이기

헤더 모양 수정

• 헤더에 배경 이미지 지정

ID에 아이콘 지정

• 마무리
  

4장 인용문

• 방법 A. 의미를 살리지 못한 표현
• 방법 B. 불필요한 클래스 지정
• 방법 C. 최선의 선택, <blockquote>

스크류 드라이버로 망치질하는 꼴

• 요약
• 심화 학습

더 많은 정보를 제공하는 cite 속성

인라인 인용문

<blockquote> 스타일 입히기

• 마무리
  

5장 폼

• 폼을 마크업하는 방법에는 어떤 것이 있나요?

방법 A. 테이블 이용

방법 B. 테이블 쓰지 않기. 하지만 뭔가 답답하죠?

방법 C. 단순하고 접근성이 높은 방법

• 방법 D. 정의 리스트 활용하기
  • 요약
  • 심화 학습
• 탭인덱스
• 자주 사용하는 폼을 위한 액세스 키
• 폼 꾸미기
  • 마무리
    

6장 구문표현 엘리먼트

• 문서모양 vs. 문서구조

<strong>과 <em>이 <b>와 <i>보다 나은 이유

<em>의 사용법

굵은 글꼴이나 이탤릭체로 지정하는 경우

굵은 이탤릭체로 지정하는 경우

• 요약
• 심화 학습
• 문구 엘리먼트

<cite> 태그

<abbr>과 <acronym>

<code>

• <samp>
• <var>
• <kbd>
• 마무리
  
  

7장 앵커

• 웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은?
• 방법 A. name 속성은 있고 내용은 없는 앵커 사용

방법 B. name 속성과 내용을 모두 사용

방법 C. name 속성 사용하지 않기

방법 D. 종합 해결책

• 요약
• 심화 학습

title 속성

링크 꾸미기

• 닻을 들어올리며
  

8장 리스트의 고급 기능

• 번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은?

방법 A. <ul> 사용하기

방법 B. <ol> 사용하기

• 용어와 설명 묶음을 마크업하는 가장 좋은 방법은?

방법 A.

방법 B.

• 요약
• 심화 학습

각 파트에 id 부여

숫자 모양 만들기

CSS에 숫자 추가

결과 화면

• 마무리
  

9장 마크업 용량 줄이기

• 웹 표준을 지켜 사이트를 만들면 마크업 용량을 줄일 수 있을까?

하위 선택자

• 방법 A. 클래스 정의

방법 B. 좀더 자연스럽게

• 불필요한 <div> 제거

방법 A. <div> 사용

방법 B. <div> 제거

그 밖의 사례

• 요약
• 심화 학습

기본 마크업 구조

스타일 입히기

불릿 모양 바꾸기

테두리 추가

• 마무리
  

2부 웹 표준 스타일의 세계로

• 10장 CSS 적용하기
  • CSS를 문서에 어떻게 적용하나요?
• 방법 A. <style> 엘리먼트 사용
  • 방법 B. 외부 스타일 시트 사용
  • 방법 C. @import 사용
  • 방법 B와 방법 C를 조합한 다중 스타일시트 활용법
  • 일반 스타일과 고급 스타일
  • 캐스케이드 효과 활용
  • 방법 D. 인라인 스타일
    • 요약
    • 심화 학습
  • 대체 스타일
    • 마무리
      
• 11장 인쇄를 위한 스타일
  • 인쇄를 위한 스타일은 어떻게 지정하나요?
• 미디어 타입
  • 대상을 지정하는 두 가지 방법
  • 방법 A. media 속성
  • 방법 B. @media 혹은 @import
  • 여러 값 지정
  • 화면 스타일과 인쇄 스타일 분리하기
  • 인쇄용 스타일 시트 만들기
    • 마무리
      
• 12장 CSS로 레이아웃 잡기
  • CSS로 2단 레이아웃을 어떻게 만드나요?
• 방법 A. 사이드바 띄우기
• 방법 B. float을 두 번 사용하기
• 방법 C. 컨텐트 띄우기
• 방법 D. 포지셔닝
  • 요약
  • 심화 학습
• 박스모델 문제
• 가짜 컬럼
  • 마무리
    
• 13장 텍스트 스타일
  • 어떻게 하면 텍스트를 근사하게 꾸밀 수 있나요?
• 사용자마다 다른 웹 브라우저 기본 글꼴
• 줄 간격 조정
• font-family에 글꼴 모아놓기
• 커닝 (글자 간격)

드랍캡

• 텍스트 정렬
• 텍스트 변형
• 소형 대문자
• 문단 들여쓰기
  • 마무리
    

14장 이미지 바꿔치기

• CSS로 텍스트 대신 이미지를 표시하려면 어떻게 해야 하나요?

아직은 진행 중

사용에 유의

방법 A. FIR 방법

방법 B. LIR 방법

방법 C. 파크 방법

• 요약
• 심화 학습

로고 모양 바꾸기

접근성이 뛰어난 이미지 탭 롤오버

마무리

15장 <BODY>를 위한 스타일

• 2단 또는 3단으로 자유롭게 변경하기
• 마크업과 스타일 구조
• <body>에 클래스 지정
• 그 밖의 다양한 활용 방안
• 사용자가 머물고 있는 위치 알리기
• 내비게이션바 구현을 위한 리스트
• 각 파트 지정
• CSS의 마법
• 마무리
  

16장 새로운 도약

• 이제 어디로 가야 할까요?

관련 기관 및 간행물

• 영향력 있는 블로그
• 관련 도서
• 맺는 말
  

3부 한국어판 특별 부록

부록 I 웹 표준 블로그 만들기

블로그 출판

1단계. 블로그 만들기

2단계. 블로그 글 입력

3단계. 블로그 스킨 템플릿 고치기

• 블로그 페이지를 위한 마크업과 스타일
• 1단계. 기본 문서 구조

2단계. 블로그 글 추가하기

3단계. 블로그 템플릿 작성

4단계. CSS 작성하기

• 기타 참조 블로그
• 마무리
  

부록 II 국내외 웹 접근성 소개 및 현황

• 웹 접근성이란
• 우리나라 웹 접근성 관련 법률 및 동향
• 해외 선진국의 웹 접근성 관련 법률 및 동향
• 국내 스크린리더 프로그램 현황
• 한국정보문화진흥원 소개
• 정보통신 접근성 향상 표준화 포럼
• 웹 접근성 자동평가 툴
• 한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0
• W3C 웹 콘텐츠 접근성 지침(WCAG) 1.0
• 미 재활법 508조
  
  

[ 웹 2.0을 이끄는 방탄웹 ]

1장. 글꼴 크기를 내 맘대로

흔해 빠진 구축방식

• 방탄웹이 아닌 이유

최적의 방법 선택하기

• 길이 단위
• 상대크기 키워드
• 퍼센트값
• 퍼센트값

방탄웹으로 만들려면

• 키워드 설명
• 픽셀 고정은 이제 그만
• 두 가지 장애물
• 단순화한 박스 모델 핵

왜 방탄웹인가

다음단계

• 기본 글꼴 크기 지정하기
• 퍼센트 값을 이용해서 기본 글꼴과 다른 크기 지정하기

키워드 값과 퍼센트 값을 사용하기

• 기본 글씨 크기값을 정확하게 잡아가기
• 퍼센트값을 겹쳐 쓸때 유의할 점
• 퍼센트 값을 이용해 일관성 유지하기

요약

2장. 자유롭게 크기가 조절되는 내비게이션 메뉴바

흔해 빠진 구축 방식

• 탭 구현방식
• 롤오버 효과

방탄웹이 아닌 이유

• 용량 크기 문제
• 접근성 문제
• 크기 조절 문제
• 유지보수 문제

방탄웹으로 만들려면?

• 스타일 미적용시 모습
• 작은 이미지 두 개면 오케이
• 스타일 적용
• float을 추가로 지정해 문제 해결하기(float-to-fix 방법)
• 탭 모양 꾸미기
• 배경 이미지 지정
• 바닥 테두리선 추가
• 마우스 오버 효과 주기
• 선택된 상태 표현하기

방탄웹이 좋은 이유

그 밖의 사례 소개

• 모질라
• 슬랜츠
• ESPN 검색

요약

3장. 자유자재로 높낮이가 조절되는 행 만들기

흔해 빠진 구축 방식

방탄웹이 아닌 이유

• 불필요한 그래픽 사용
• 고정된 높이값
• 복잡한 코드

방탄웹으로 만들려면?

• 마크업 구조
• 각 요소에 id 부여하기
• 스타일 미적용시 모습
• 배경 지정
• 위치 지정
• 사라진 배경색
• 디테일한 디자인 요소 추가
• 4개의 둥근 모서리
• 텍스트와 링크 모양
• 마지막 단계

방탄웹이 좋은 이유

• 구조와 디자인의 분리
• 고정되지 않은 높이

세로 확장 사례 하나 더

• 마크업
• 이미지 2개 준비하기
• CSS 적용
• 자동 확장 기능

요약

4장. 나만의 Float 활용 비법

흔해 빠진 구축 방식

• 방탄웹이 아닌 이유

방탄웹으로 만들려면?

• 최적의 구조를 결정해 보자
• 정의 리스트 사용
• 마크업 구조
• 스타일 미적용시 모습
• 외곽 영역 꾸미기
• 사진 이미지를 마크업하자
• 기본 스타일 적용하기
• 이미지 위치 지정
• 양쪽 끝에 띄우기
• 설명문의 길이가 짧아도 깨지지 않는 레이아웃
• 멋지게 꾸미는 마무리
• 이미지 정렬 방식
• 그리드 효과
• 배경 이미지 꾸미기

방탄웹이 좋은 이유

요약

5장. 깨지지 않는 상자 만들기

흔해 빠진 구축 방식

방탄웹이 아닌 이유

방탄웹으로 만들려면?

• 마크업 구조
• 이미지 준비 전략
• 스타일 입히기

방탄웹이 좋은 이유

그 밖의 둥근 모서리 기법 소개

• 브라우즈 해피 사례

요약

6장. 이미지나 CSS가 없이도 볼 수 있게 하기

흔해 빠진 구축 방식

방탄웹이 아닌 이유

방탄웹으로 만들려면?

방탄웹이 좋은 이유

스타일 유무 여부에 관계없는 디자인

• 10초만에 하는 사용성 검사
• 흔해 빠진 구축 방식
• 방탄웹으로 만들려면?

방탄웹을 만들기 위한 도구 소개

• 패블릿
• 웹 개발 확장 기능
• 웹 접근성 툴바
• 유효성 검사도 하나의 도구

요약

7장. 쉽게 변환할 수 있는 테이블 만들기

흔해 빠진 구축 방식

방탄웹이 아닌 이유

방탄웹으로 만들려면?

• 마크업 구조
• 스타일 적용하기

방탄웹이 좋은 이유

요약

8장. 유동적인 레이아웃 만들기

흔해 빠진 구축 방식

방탄웹이 아닌 이유

• 남용되는 코드
• 끔찍한 유지보수
• 컨텐트 표시 순서 문제

방탄웹으로 만들려면?

• 마크업 구조
• 다단 레이아웃 만들기
• 스타일 적용하기
• 단 간격 지정
• 단 여백 지정
• 최소/최대 너비값 지정
• 이동하는 가짜 단 만들기
• 3단 레이아웃 만들기

방탄웹이 좋은 이유

요약

9장. 방탄웹 구축 완결종합편

목표 설정

흔해 빠진 구축 방식

• 유동적인 레이아웃
• 글꼴 크기를 맘대로
• 이미지나 CSS 없이도 볼 수 있는 페이지

기초 공사

• 마크업 구조화
• 기본 스타일 지정
• 레이아웃 구조 지정
• 사이드바 메뉴 배경 만들기
• 헤더 영역
• 이벤트 공지사항 영역 꾸미기
• 단 간격 조정
• 컨텐트 영역 꾸미기
• 사이드바 메뉴 영역 꾸미기
• 푸터 영역 꾸미기

인터넷 익스플로러를 위한 CSS 문제 해결

• 핵 관리 방법
• 푸터 문제 해결 방법
• 자체 float 해제 문제 해결 방법

결론

[ CSS 마스터 전략 ]

1장 기초 다지기

• 구조가 탄탄한 코드 만들기
  • 의미를 살린 마크업
    • ID와 클래스 이름 짓기
    • div와 span
  • 문서 유형, DOCTYPE 전환, 브라우저 모드
  • 유효성 검사
    • 브라우저 모드
    • DOCTYPE 전환
• 스타일을 꾸밀 대상 선택하기
  • 선택자 활용 기초
    • 유사 클래스 선택자
    • 전체 선택자
  • 고급 선택자
    • 자식 선택자, 인접 형제 선택자
    • 속성 선택자
  • 캐스캐이드 효과와 적용순서
    • 지정순위
    • 스타일시트에서 지정순위 활용하기
    • body 태그에 클래스나 ID 지정하기
  • 상속
• 스타일 시트를 계획/구성/관리하는 방법
  • 문서에 스타일 적용하기
  • 코드 주석 활용법
    • 구조 표시를 위한 주석
    • 작업 기록을 위한 주석
    • 주석을 제거하고 스타일시트 최적화하기
  • 스타일 가이드
  • 손쉬운 스타일시트 유지관리법
• 요약
  

2장 화면 표시를 위한 모델 완벽 정리

• 박스 모델 완벽 정리
  • 윈도우용 인터넷 익스플로러의 박스 모델
  • 마진 겹침 현상
• 포지셔닝 완벽 정리
  • 화면 표시 모델
  • 상대 위치
  • 절대 위치
    • 고정 위치
  • 플로팅
    • 라인박스와 플로트 해제 방법
• 요약
  

3장 배경 이미지와 이미지 대치 기법

• 배경 이미지 기초 다지기
• 둥근 모서리 상자 모양 만들기
  • 고정폭 둥근 모서리 상자 모양
  • 유동폭 둥근 모서리 상자
  • 마운틴탑 코너
• 그림자 효과
  • 간단한 그림자 효과 내기
  • Clagnut 스타일 그림자 효과
  • 부드러운 그림자 효과 만들기
    • 여러 겹으로 만드는 그림자 효과
• 이미지 대치 기법
  • FIR 방법
  • 파크 방법
  • 길더/레빈 방법
  • IFR와 sIFR 방법
• 요약
  

4장 링크 모양 꾸미기

• 링크 스타일 기초
• 밑줄치며 놀기
  • 예쁜 링크 밑줄 만들기
• 링크 유형별로 스타일 지정하기
  • 문서나 뉴스 피드 다운로드용 링크 꾸미기
• 버튼과 롤오버 효과 만들기
  • 롤오버 기초
  • 이미지를 사용한 롤오버 효과
  • 픽시 방법을 이용한 롤오버 효과
• 방문한 링크 스타일 꾸미기
• CSS로만 만드는 툴팁
• 요약
  

5장 리스트 스타일과 내비게이션 바 만들기

• 리스트 스타일 기초
• 세로형 내비게이션 바 만들기
• 내비게이션 바에서 현재 페이지 표시하기
• 가로형 내비게이션 바 만들기
• 슬라이딩 도어 효과의 탭 내비게이션 바 만들기
• CSS 이미지 맵 만들기
  • 플리커 스타일의 이미지 맵 만들기
• 리모트 롤오버 만들기
• 정의 리스트
• 요약
  

6장 접근성 높은 폼과 테이블 만들기

• 데이터 테이블 스타일 꾸미기
  • 테이블 관련 엘리먼트 소개
    • 써머리와 캡션
    • thead, tbody, tfoot
    • col, colgroup
  • 데이터 테이블 마크업 만들기
  • 테이블 스타일 꾸미기
  • 화면 모양 만들기
  • 추가 사항 처리
• 간단한 폼 레이아웃 만들기
  • 유용한 폼 엘리먼트
    • 폼 레이블
  • 기본 레이아웃
  • 기타 엘리먼트 처리방법
  • 장식 마무리하기
    • 필수 입력항목
• 복잡한 폼 레이아웃 만들기
  • 접근성을 고려한 데이터 입력 방식
  • 다단 레이아웃의 체크박스
  • 폼 에러 메시지 만들기
• 요약
  

7장 레이아웃

• 디자인을 가로 중간에 배치하기
  • auto 마진 이용 방법
  • 포지셔닝 음수 마진값 이용 방법
• 플로트 기반의 레이아웃
  • 플로트를 이용한 2단 레이아웃
  • 플로트를 이용한 3단 레이아웃
• 고정 레이아웃, 유동 레이아웃
  • 화면비례형 레이아웃
  • 글자비례형 레이아웃
  • 글자비례-화면비례 혼합형 레이아웃
  • 글자와 화면크기에 따라 늘어나는 이미지
• 가짜 단 모양 만들기
• 요약
  

8장 핵과 필터

• 핵과 필터
  • 핵과 필터 사용에 대한 경고
  • 핵 사용시 유의점
• 개별적인 스타일시트에 필터 적용하기
  • 인터넷 익스플로러 조건 주석문
  • 밴드 패스 필터
• 개별적인 규칙과 선언에 필터 적용하기
  • 자식 선택자 필터
  • 속성 선택자 필터
  • 별표 HTML 필터
  • 맥용 IE의 주석처리된 백슬래시 핵
  • 속성에 이스케이프 문자를 사용하는 핵
  • 탄텍 박스 모델 핵
  • 쉽게 개선된 박스 모델 핵
  • !important와 언더바 핵
  • 오웬 핵
• 요약
  

9장 브라우저 버그 해결하기

• 버그 잡기
  • 흔히 발생하는 CSS 문제
    • 지정순위와 정렬방법 오류
    • 마진 겹침 현상
• 버그 잡기 기초
  • 문제 분리하기
  • 테스트 범위 최소화하기
  • 증상이 아닌 문제원인 바로 잡기
  • 도움 요청하기
• 레이아웃
  • 레이아웃이란?
  • 레이아웃 때문에 생기는 효과
• 흔히 발생하는 버그 해결방법
  • 더블마진 플로트 버그
  • 텍스트 주변에 3픽셀 공간 표시 버그
  • IE 6의 문자 중복 표시 버그
  • IE 6의 피커부 버그
  • 상대좌표 컨테이너에서 절대좌표 지정
  • 인터넷 익스플로러 관련 이야기
• 요약
  

부록Ⅰ 동호회 사이트 만들기

• 적용 사례 소개
• 하위 선택자를 이용한 컨텐트 영역 조정
  • XHTML 구조
    • 명명 규칙에 대해
  • 3단 레이아웃
  • 2단 레이아웃
  • 1단 레이아웃
  • 불필요한 단 제거
• 컬럼 띄우기
  • 계산방법
  • 올바른 위치에 컬럼 띄우기
• body 클래스를 이용해서 현재 페이지 표시하기
• 드롭인 박스
• 둥근 모서리 상자 만들기
  • 평면 흰색 상자
  • 특별한 모양 만들기
• 투명 모서리와 테두리선
  • 이미지
  • CSS
• 원하는 동작을 위한 클래스 조합
• 이미지 클래스
  • 기본 이미지
  • 테두리선 없는 이미지
  • 큰 이미지
• 링크 모양 꾸미기
  • 사이드바 링크
  • 방문한 링크 표시하기
    • LVHA가 아니라 LAHV 사용하기
  • 외부 링크 다르게 표시하기
• 그림자 효과 만들기
  • 그림자 이미지 만들기
  • 이미지에 플로팅 지정하기
• 요약
  

부록 II 투스카니 럭셔리 리조트

• 적용 사례 소개
• 유동적인 레이아웃
  • 본문과 컨테이너
  • masthead
  • 컨텐트와 사이드바
    • 유동적인 속성
  • 푸터
  • 유동 레이아웃 관련 문제 해결하기
• 절대위치를 이용한 엘리먼트 배치
  • 위치 관련 속성
  • 쌓는 순서
• 배경 이미지 관련 기법
  • 상단을 3개로 나누기
  • 방탄웹 기법 적용하기
• 이미지 대치 기법
  • 로고 이미지 대치
  • 첫 대문자 이미지 대치
• 유동적인 이미지
  • 유동적인 이미지를 위한 코딩
• 리스트 항목 하나에 여러 엘리먼트 넣기
  • 메뉴 코드 작성