CSS3(쉽고 빠르게 익히는)(위키북스 오픈소스 웹 시리즈 28)
사용자 경험ㆍ디자인 디렉터 제이슨 크랜포드 티그의 『쉽고 빠르게 익히는 CSS3』. CSS 초보자와 전문가를 대상으로 CSS3의 가장 중요한 새로운 기능은 물론, 타이포그래피, 이미지, 레이아웃, 그리고 색상 등과 관련된 모범 디자인 원칙까지 다루고 있다. 특히 CSS3의 새로운 기능을 그림을 통해 쉽게 이해하도록 구성했다. 간결한 순서를 따라 단계적으로 따라하다 보면 자연스럽게 CSS3에 적용할 수 있다. 늘 곁에 두고 참고 할 만한 핵심적 설명으로 가득하다.
Couldn't load pickup availability
출판사 리뷰
출판사 리뷰
★ 이 책의 특징 ★
■ CSS3의 새로운 기능을 그림을 통해 쉽게 이해하고 CSS3 적용 방법을 차근차근 단계적으로 배운다.
■ 간결한 절차와 설명을 따라 하다 보면 금세 CSS3를 적용할 수 있다.
■ 늘 옆에 두고 참고할 만한 핵심적인 설명으로 가득하다.
■ CSS 초보자와 전문가를 대상으로 CSS3의 가장 중요한 새로운 기능부터 타이포그래피, 색상, 이미지, 레이아웃 등과 관련한 모범 디자인 원칙에 이르기까지 두루두루 설명한다.
목차
목차
스타일이란?
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 문자 인코딩
저자
저자
Your payment information is processed securely. We do not store credit card details nor have access to your credit card information.

