• 쉽고 빠르게 익히는 CSS3

  • 제이슨 크랜포드 티그 지음
  • 유윤선 옮김

  • 오픈소스 & 웹 시리즈 _ 028
  • ISBN: 9788992939713
  • 25,000원 | 2011년 04월 15일 발행 | 456쪽



이 책은 CSS3를 스타일 있게 배울 수 있는 최고의 지침서다. 한눈에 들어오는 편집과 직관적이고 군더더기 없는 설명, 디자이너의 눈높이에 맞춘 쉬운 표현으로 CSS3의 맥을 잘 짚어준다. 이 책을 읽다 보면 옆에서 CSS3의 대가가 그림을 그려 가면서 CSS3를 설명해주는 듯한 느낌을 받는다. 단순히 책을 빠르게 훑어보는 것만으로도 CSS3를 이해할 수 있을 정도로 책의 요소 요소마다 핵심을 잘 정리한 책이다. 최신 버전인 CSS3뿐 아니라 CSS에 대한 이해의 폭을 넓히고 체계적인 지식을 쌓으려는 독자에게 좋은 가이드가 될 것이다.

쉽고 빠르게 익히는 CSS3!

★ 이 책의 특징 ★

  • CSS3의 새로운 기능을 그림을 통해 쉽게 이해하고 CSS3 적용 방법을 차근차근 단계적으로 배운다.
  • 간결한 절차와 설명을 따라 하다 보면 금세 CSS3를 적용할 수 있다.
  • 늘 옆에 두고 참고할 만한 핵심적인 설명으로 가득하다.
  • CSS 초보자와 전문가를 대상으로 CSS3의 가장 중요한 새로운 기능부터 타이포그래피, 색상, 이미지, 레이아웃 등과 관련한 모범 디자인 원칙에 이르기까지 두루두루 설명한다.

www.speaking-in-styles.com/css3vqs 웹사이트를 방문하면 책의 내용을 따라 할 수 있는 코드 예제를 내려받을 수 있다.

제이슨 크랜포드 티그 (Jason Cranford Teague)

제이슨 크랜포드 티그는 최초의 온라인 잡지인 CMC에서 디자이너로 웹을 시작하여 15년 넘게 웹 디자이너로 일하고 있다. CNN, Virgin Group, AOL을 포함한 최고의 웹 사이트들의 작업에 참여했다. 컨설턴트이자 강사(www.brighteyemedia.com)로서 W3C와 현재 진행 중인 사안들에 자문을 하고 있다. 그의 베스트셀러인 『CSS,DHTML, 그리고 Ajax: Visual QuickStart Guide』를 포함해 많은 디자인 책을 출간했다. 블로그 webbedenvironments.com를 운영한다.

유윤선

IT 프리랜서 번역가로 활동하고 있다. 역서로는 『어도비 AIR 인 액션』, 『액션스크립트 3.0 완벽 가이드』, 『시작하세요! 아이패드 프로그래밍』, 『스프링 시큐리티 3』이 있으며, 현재 플래시, 자바, 모바일 프로그래밍 등 다양한 분야에 관심을 가지고 번역을 하고 있다. http://joshy21.com/weblog에서 개인 블로그를 운영하고 있다.

 

옮긴이 글

CSS를 말 그대로 ‘잘’ 구현하기란 생각보다 쉽지 않다. 물론 지원할 브라우저가 하나뿐이라면 CSS 디자인이 조금 덜 어렵겠지만, 그렇다 하더라도 고려해야 할 요소가 여전히 많다. 이전 브라우저 버전과의 호환성, 인쇄용 페이지에 사용할 스타일, 다른 기기(휴대용 기기)에 대한 스타일 지원 등은 이런 여러 고려 사항 중 하나일 뿐이다. 이 책에서는 CSS 디자이너가 이런 문제들을 해결할 때 직접적인 도움을 줄 수 있는 여러 자료를 제공한다. 일례로 새로운 CSS 속성이 나올 때마다 속성을 표로 정리해 CSS 호환성을 보여준다. 독자들은 이 표만 가지고도 디자인 대상이 되는 브라우저에서 해당 스타일을 쓸 수 있는지 여부를 쉽게 판단할 수 있다. 또 두세 페이지에 걸쳐 한 번 꼴로 등장하는 저자의 팁은 CSS 디자이너들이 더 나은 디자인을 하기 위해 참고해야 할 내용으로 가득 차 있다.

이 책은 CSS3뿐 아니라 CSS를 전반적으로 다루는 책이다. 이 책은 단순히 CSS를 설명하는 데 그치는 것이 아니라 어떻게 하면 CSS를 더 잘 활용할 수 있고 어떻게 하면 디자이너들이 좀 더 쉽게 CSS를 ‘잘’ 구현할 수 있는지 오랫동안 고민한 저자의 흔적을 여실히 보여준다. CSS 디자이너이자 책의 저자로 오랫동안 활약한 저자의 경험에서 우러나온 팁과 혜안은 새로운 CSS 지식을 배우는 것보다 더 큰 자산을 이 책의 독자에게 물려줄 것이다. 이 책을 통해 CSS3를 어려워하는 디자이너들이 좀 더 쉽고 편하게 CSS3를 배울 수 있게 되기를 바란다.

★ 이 책의 대상 독자 ★

이 책은 CSS 디자이너와 웹 개발자를 위한 책이다. HTML을 잘 알고 있는 CSS 디자이너라면 더욱 좋겠지만, HTML을 몰라도 책의 내용을 이해하는 데는 아무런 문제가 없다. 이 책은 CSS3뿐 아니라 CSS 전반을 다루므로 CSS를 처음 시작하는 디자이너가 CSS를 처음부터 배우기에도 적합하며, 웹 개발자가 CSS를 배우는 용도로도 적합하다. CSS3를 배우려고 하는 기존 웹 디자이너, CSS를 처음 접하는 웹 디자이너, 새로운 웹 환경에 맞는 최신 CSS 지식을 익히고자 하는 웹 개발자 모두에게 이 책을 추천한다.

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

예제코드 관련 GitHub 페이지