스타일이란? CSS란? - CSS의 동작 방식 CSS의 발전 과정 - CSS 레벨 1 (CSS1) - CSS 레벨 2 (CSS2) - CSS 레벨 3 (CSS3) CSS 규칙의 종류 CSS 규칙의 구성요소 - 브라우저의 CSS 확장 속성 CSS3의 새 기능
02장 HTML5 기초
HTML이란? - 기본 HTML 문서 구조 - HTML 속성 - HTML과 CSS HTML 엘리먼트의 종류 HTML5의 발전 과정 - 그런 다음 XHTML이 등장한다 - XHTML2의 문제점 - 그때 HTML5가 등장했다 - HTML5인가 XHTML5인가? HTML5의 새 기능 HTML5 구조의 동작 원리 HTML5 구조 사용하기 - 인터넷 익스플로러에서의 HTML5 보완
03장 CSS 기초
기본 CSS 선택자 인라인 스타일 - HTML 태그 내의 스타일 추가 - 개별 HTML 태그 내에서의 스타일 속성 설정 페이지 내 스타일 - 웹 페이지에서의 스타일 추가 - HTML 문서 내에서의 태그 스타일 설정 외부 스타일 - 전체 웹 사이트 차원의 스타일 추가 - 외부 스타일 시트 생성 - 외부 CSS 파일의 설정 - 외부 CSS 파일 링크 - 스타일 시트 불러오기 - 외부 CSS 파일 불러오기 HTML 태그 (재)정의 - HTML 선택자 정의 재사용 가능한 클래스 정의 - 클래스 선택자 정의 고유 ID 정의 - ID 선택자 정의 - 공통 선택자의 적용 그룹 지정 - 동일 스타일을 사용하는 엘리먼트 정의 - 선택자 그룹 지정 CSS에 주석 추가 - 스타일 시트에서의 주석 추가
04장 선택적 스타일 적용
엘리먼트 가계도 문맥에 따른 스타일 정의 - 자손 엘리먼트의 스타일 적용 - 자손의 전체 스타일 적용 - 자식 엘리먼트에만 스타일 적용 - 형제 엘리먼트의 스타일 적용 - 인접 형제 선택자의 정의 의사 클래스의 사용 - 링크의 스타일 적용 - 서로 구분된 링크 스타일 설정 - 사용자 상호작용에 대한 스타일 적용 - 동적 의사 클래스의 정의 - CSS3의 새 기능 - 의사 클래스를 지닌 특정 자식에 대한 스타일 적용 - 엘리먼트의 자식 스타일 적용 - 특정 언어에 대한 스타일 적용 - 특정 언어에 대한 스타일 설정 - CSS3의 새 기능 - 엘리먼트에 대한 스타일 부정 - 특정 엘리먼트에 대한 스타일 부정 의사 엘리먼트의 사용 - 첫 글자 및 첫 줄 의사 엘리먼트의 사용 - 아티클의 시작 부분 강조 - 엘리먼트 전, 후 콘텐츠 설정 - 엘리먼트 전, 후 콘텐츠 추가 태그 어트리뷰트 기반 스타일 정의 - 엘리먼트 어트리뷰트를 기반으로 한 스타일 설정 CSS3의 새 기능 - 미디어 쿼리 - 미디어 쿼리 - 미디어 쿼리를 사용한 스타일 지정 - @media 규칙 사용법 - @media를 사용한 스타일 지정 부모로부터의 속성 상속 - 기존 속성값과 상속한 속성값의 관리 !important 선언 지정 - 강제로 선언 적용하기 캐스케이딩 순서의 판단 - 엘리먼트의 캐스케이딩 우선순위 판단
05장 폰트 속성
웹 타이포그래피의 이해 - 캐릭터셋 지정 - 일반 폰트 패밀리 - 딩뱃 - HTML 캐릭터 엔티티 폰트 스택 설정 - 엘리먼트에 대한 폰트 패밀리 정의 폰트 선택 - 웹 안전 폰트 - 다운로드 가능한 웹폰트 - 더 나은 폰트 스택 설정 - 엘리먼트에 대한 웹 안전 폰트 또는 웹폰트 정의 폰트 크기 설정 - 엘리먼트의 폰트 크기 정의 CSS3 새 기능 - 대체 폰트의 크기 조절 - 엘리먼트에 대한 폰트 크기 조절 텍스트의 이탤릭체 설정 - 엘리먼트의 폰트 스타일 설정 볼드체 설정 - CSS 규칙에서의 볼드 텍스트 정의 소형 대문자 설정 - 엘리먼트에 대한 소형 대문자 설정 여러 폰트 값 일괄 설정 - 단일 규칙 내에서의 여러 폰트 어트리뷰트 동시 정의
06장 텍스트 속성
텍스트 간격 조절 - 글자 사이의 간격 조절(트래킹) - 자간 정의 - 단어 사이의 간격 조절 - 단어 사이의 간격 설정 - 텍스트 줄 간격 조절(행간) - 리딩 정의하기 텍스트 대소문자 설정 - 텍스트 대소문자 정의 CSS3 새 기능 - 텍스트 드롭 섀도우 추가 - 텍스트 섀도우 정의 텍스트 가로 정렬 - 텍스트 정렬 정의 텍스트 세로 정렬 - 세로 정렬 정의 단락 들여쓰기 - 텍스트 들여쓰기 정의 공백 제어 - 공백 간격 정의 텍스트 장식 - 텍스트 장식(장식 제거) 곧 추가될 기능
07장 색상과 배경 속성
색상값 선택 - 색상 키워드 - RGB 16진수 값 - RGB 10진수 값 - 퍼센트 값 - CSS3의 새 기능 - HSL 값 - CSS3의 새 기능 - 색상 알파 값 CSS3의 새 기능 - 배경색 그라디언트 - 인터넷 익스플로러 그라디언트 - 모질라 그라디언트 - 웹킷 그라디언트 색상 팔레트 선택 - 온라인 색상 스키마 툴 텍스트 색상 설정 - 텍스트 색상 정의하기 배경색 설정 - 엘리먼트의 배경색 정의 - 배경 이미지 정의 배경 단축 속성 활용 - 배경 정의
08장 리스트와 테이블 속성
불릿 스타일 설정 - 불릿 스타일 정의 커스텀 불릿 생성 - 커스텀 그래픽 불릿 정의 불릿 위치 설정 - 리스트 항목에서 줄바꿈 텍스트의 줄 위치 정의 여러 리스트 스타일 설정 - 여러 리스트 스타일 속성 정의 테이블 레이아웃 설정 - 테이블 레이아웃 설정 테이블 셀 사이 간격 설정 테이블 셀 사이의 보더 병합 - 테이블 보더 병합 테이블 설명 위치 설정
09장 사용자 인터페이스 및 동적 생성 콘텐츠 속성
마우스 포인터의 모양 수정 CSS를 사용한 콘텐츠 추가 카운터 적용 방식 지정 인용 스타일 지정
10장 박스 속성
엘리먼트 박스의 이해 - 박스의 구성요소 엘리먼트 보여주기 엘리먼트의 너비 및 높이 설정 - 엘리먼트의 너비 정의 - 엘리먼트의 높이 정의 - 최대 및 최소 너비 설정 콘텐츠 오버플로우 제어 - 오버플로우 제어 정의 창 내에서의 플로팅 엘리먼트 - 플로팅 엘리먼트 제거 - 엘리먼트 플로팅 방지 엘리먼트 마진 설정 - 엘리먼트의 마진 정의 엘리먼트의 외곽선 설정 - 박스 외곽선 설정 엘리먼트 보더 설정 - 보더 설정 CSS3의 새 기능 - 보더 모서리 둥글게 만들기 - 둥근 모서리 설정 CSS3의 새 기능 - 보더 이미지 설정 - 보더 배경 이미지 설정 엘리먼트 패딩 설정 - 패딩 설정 곧 추가될 기능
11장 시각 형태 속성
창과 문서 이해 위치 타입 설정 - 정적 위치 지정 - 상대 위치 지정 - 절대 위치 지정 - 고정 위치 지정 엘리먼트의 위치 설정 객체의 3D 스택 엘리먼트의 가시성 설정 엘리먼트의 가시 영역 잘라내기 CSS3의 새 기능 - 엘리먼트의 불투명도 설정 - 엘리먼트의 불투명도 설정 CSS3의 새 기능 - 엘리먼트 섀도우 설정 - 엘리먼트 섀도우 설정
12장 변형 및 트랜지션 속성
CSS3의 새 기능 - 엘리먼트 변형 - 2D 변형 - 3D 변형 CSS3의 새 기능 - 엘리먼트 상태 간의 트랜지션 추가 - 어떤 것을 트랜지션할 수 있나?
13장 CSS 문제 해결
인터넷 익스플로러 관련 CSS 조정 - 밑줄 핵 인터넷 익스플로러 박스 모델 문제 해결 CSS 리셋 - 간단한 CSS 리셋 - YUI2: 리셋 CSS - 에릭 메이어의 리셋 플로팅 문제 해결 - 줄바꿈 태그를 사용하면 모든 문제가 해결된다 - 오버플로우 해결책
14장 핵심 CSS 기법
플로팅을 사용한 멀티컬럼 레이아웃 생성 - CSS를 사용한 멀티컬럼 레이아웃 설정 링크 스타일과 내비게이션 - 내비게이션과 링크에 스타일 적용 CSS 스프라이트의 사용 - CSS 이미지 롤오버 추가 CSS 드롭다운 메뉴 생성 - 순수 CSS 드롭다운 메뉴 만들기
15장 스타일 시트 관리
읽기 쉬운 스타일 시트 작성 - 소개 및 목차를 작성한다 - 색상, 폰트, 기타 상수를 정의한다 - @rule을 상단에 둔다 - 조직 스키마를 선택한다 - CSS 구체성을 활용한 계층구조 적용 CSS 라이브러리와 프레임워크 스타일 시트 전략 - 전체 통합 방식 - 분할 정복 방식 - 합체 방식 - 동적 방식 CSS 코드 문제 해결 - 다음과 같은 질문을 자문해보자 - 여기까지 했는데도 여전히 문제가 해결되지 않는다면 다음과 같은 방법을 시도해 보자 파이어버그와 웹 인스펙터를 활용한 CSS 디버깅 - 파이어폭스의 파이어버그 - 파이어버그 시작하기 - 사파리와 크롬의 웹 인스펙터 - 웹 인스펙터 시작하기 CSS 코드의 유효성 검증 - W3C의 CSS 유효성 검증기 활용 CSS 최소화 - CSS 최소화 32가지 모범 개발 방식
부록A CSS 빠른 참조표
기본 선택자 의사 클래스 의사 엘리먼트 텍스트 속성 폰트 속성 색상 및 배경 속성 리스트 속성 테이블 속성 UI 및 동적 콘텐츠 속성 박스 속성 시각 형태 속성 변형 속성 (-webkit-, -moz-, -o-) 트랜지션 속성 (-webkit-, -moz-, -o-)
부록B HTML과 UTF 문자 인코딩
HTML과 UTF 문자 인코딩
쉽고 빠르게 익히는 CSS3!
이 책의 특징 - CSS3의 새로운 기능을 그림을 통해 쉽게 이해하고 CSS3 적용 방법을 차근차근 단계적으로 배운다. - 간결한 절차와 설명을 따라 하다 보면 금세 CSS3를 적용할 수 있다. - 늘 옆에 두고 참고할 만한 핵심적인 설명으로 가득하다. - CSS 초보자와 전문가를 대상으로 CSS3의 가장 중요한 새로운 기능부터 타이포그래피, 색상, 이미지, 레이아웃 등과 관련한 모범 디자인 원칙에 이르기까지 두루두루 설명한다.
www.speaking-in-styles.com/css3vqs 웹사이트를 방문하면 책의 내용을 따라 할 수 있는 코드 예제를 내려 받을 수 있다.
이 책은 CSS3를 스타일 있게 배울 수 있는 최고의 지침서다. 한눈에 들어오는 편집과 직관적이고 군더더기 없는 설명, 디자이너의 눈높이에 맞춘 쉬운 표현으로 CSS3의 맥을 잘 짚어준다. 이 책을 읽다 보면 옆에서 CSS3의 대가가 그림을 그려 가면서 CSS3를 설명해주는 듯한 느낌을 받는다. 단순히 책을 빠르게 훑어보는 것만으로도 CSS3를 이해할 수 있을 정도로 책의 요소 요소마다 핵심을 잘 정리한 책이다. 최신 버전인 CSS3뿐 아니라 CSS에 대한 이해의 폭을 넓히고 체계적인 지식을 쌓으려는 독자에게 좋은 가이드가 될 것이다.
총 
바보 빅터
