CSS3(쉽고 빠르게 익히는)(위키북스 오픈소스 웹 시리즈 28)

쉽고 빠르게 익히는 CSS3!



★ 이 책의 특징 ★



■ CSS3의 새로운 기능을 그림을 통해 쉽게 이해하고 CSS3 적용 방법을 차근차근 단계적으로 배운다.

■ 간결한 절차와 설명을 따라 하다 보면 금세 CSS3를 적용할 수 있다.

■ 늘 옆에 두고 참고할 만한 핵심적인 설명으로 가득하다.

■ CSS 초보자와 전문가를 대상으로 CSS3의 가장 중요한 새로운 기능부터 타이포그래피, 색상, 이미지, 레이아웃 등과 관련한 모범 디자인 원칙에 이르기까지 두루두루 설명한다.

01장 CSS 이해



스타일이란?

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 문자 인코딩

제이슨 크랜포드 티그 저자 제이슨 크랜포드 티그(Jason Cranford Teague)는 디자이너이자 저자이며 사람들이 창조적으로 기술을 적용하게끔 도와주는 강연자이기도 하다. 제이슨은 버진, 웹 MD, 지멘스, 코카콜라, CNN, AOL, 메리어트, 뱅크 오브 아메리카를 비롯한 여러 고객을 대상으로 15년 이상 온라인 디자인 작업을 했다. 출간한 저서로는 와 <스타일로 말해요: CSS를 아는 웹디자이너 되기>가 있다. 제이슨은 포럼 원에서 사용자 경험 및 디자인 디렉터로 활동하며 개인 블로그를 운영한다.