물고기 시리즈로도 유명한 《CSS 완벽가이드》는 전 세계 및 국내 웹디자이너와 프론트엔드 개발자 사이에서 CSS 기술 분야의 인기 있는 책으로, 12년 만에 최신 기술로 업그레이드되어 새롭게 개정판으로 출간되었습니다. 현재 아마존 CSS 기술 분야에서 베스트셀러인 이 책은 전 세계 ‘CSS의 황제’라 불리는 에릭 마이어가 에스텔 웨일과 함께 심혈을 기울여 CSS의 최신 기술 및 노하우를 집대성했습니다. 세련된 페이지 스타일과 개선된 접근성을 추구하면서도 근본적인 깊이 있는 CSS 기술을 배우고 싶은 독자라면 《CSS 완벽 가이드》가 해법을 알려줄 것입니다. 웹을 표현하는 방법에 대한 시간과 노력을 아끼고 싶은 웹디자이너나 개발자들에게 도움이 될 것입니다.

저자 : 에릭 마이어 Eric Meyer 1993 년부터 웹 관련 일을 해왔으며 세계적으로 명성 있는 HTML, CSS, 웹 표준 전문가입니다. ‘레베카의 선물’의 최고 기술이사이며, ‘언 이벤트 어파트’의 공동 창립자이기도 합니다. HTML 과 CSS 를 전 세계에 전파하고, 웹의 우수성과 효율성을 널리 알리고 공로를 인정받아 2006 년 국제디지털예술 및 과학아카데미에 가입했습니다. 현재 세계 각지의 콘퍼런스와 자신의 웹사이트(meyerweb.com)에서 다양한 지식을 공유하고 있습니다. 저자 : 에스텔 웨일 Estelle Weyl 1999년부터 CSS, HTML, 자바스크립트를 코딩하고 있는 컨설팅 웹개발자, 트레이너, 저자, 연설가로서 전 세계에서 웹개발에 관한 워크숍을 이끌며 강연 활동을 하고 있습니다. 그의 책들은 전 세계에서 14개 이상의 언어로 번역, 출간되었습니다. standardista.com에 CSS3, HTML5, 자바스크립트, 접근성, 모바일 웹 관련 글을 올리며 활동 중입니다. 저서로는 《Flexbox in CSS》《Transitions and Animations in CSS》 등이 있습니다. 역자 : 한선용 웹 표준과 자바스크립트에 관심이 많은 번역가입니다. 2008년부터 웹 관련 일을 했으며, ‘WCAG 2.0을 위한 일반적 테크닉’ 등의 문서를 번역해 웹에 올렸습니다. 번역서로 《파이썬으로 웹 크롤러 만들기(2판)》 《프로그래머 첫걸음》 《러닝 자바스크립트》, 《에릭 마이어의 CSS 노하우》《HTML5&CSS3: 오늘 구현하는 내일의 웹 표준》 《프론트엔드 개발자를 위한 자바스크립트 프로그래밍》 등이 있습니다.

이 책에 대하여 chapter 1 CSS 와 문서 chapter 2 선택자 chapter 3 우선순위와 캐스케이드 chapter 4 값과 단위 chapter 5 폰트 chapter 6 텍스트 프로퍼티 chapter 7 레이아웃 기본 chapter 8 패딩, 보더, 외곽선, 마진 chapter 9 색깔, 배경, 그레이디언트 chapter 10 플로트와 셰이프 chapter 11 포지션 chapter 12 플렉서블 박스 레이아웃 chapter 13 그리드 레이아웃 chapter 14 테이블 레이아웃 chapter 15 리스트와 생성된 콘텐츠 chapter 16 트랜스폼 chapter 17 트랜지션 chapter 18 애니메이션 chapter 19 필터, 혼합, 자르기, 가리기 chapter 20 미디어 전용 스타일 부록 A 애니메이션 가능 프로퍼티 부록 B 기본 프로퍼티 레퍼런스 부록 C 색상표 찾아보기

Chapter 1 CSS 와 문서
캐스케이딩 스타일 시트(CSS)는 문서의 표현을 바꾸는 강력한 도구입니다. CSS 는 웹의 거의 모든 곳에서 사용되며, 표면적으로는 웹이 아닌 것처럼 보이는 환경에서도 사용됩니다.
CSS 를 사용하면 사용자 에이전트가 요소를 표시하는 방식을 완전히 변경할 수 있습니다.
CSS 의 힘을 최대한 활용하려면 스타일을 문서 요소와 연결하는 방법을 알아야 합니다. 또 CSS 에 대해 완전히 이해하려면 먼저 CSS 가 스타일을 적용할 각 요소를 어떻게 선택하는지 확실하게 이해해야 합니다.

Chapter 2 선택자
CSS 의 주요 이점 중 하나는 같은 유형의 요소 전체에 스타일을 쉽게 적용할 수 있다는 겁니다.
코드 한 줄만 수정하면 보라색, 노란색 등 원하는 색깔이 뭐든 적용할 수 있습니다. 물론 CSS 가 만능 해결사는 아닙니다. 하지만 파일 전체 또는 웹사이트 전체의 모양을 바꾸는 작업이 훨씬 쉬워지는 것은 분명합니다.

Chapter 3 우선순위와 캐스케이드
상속은 일부 프로퍼티 값이 요소에서 그 자손으로 전달되는 메커니즘입니다. 어떤 값을 요소에 적용해야 하는지 결정할 때, 사용자 에이전트는 상속뿐만 아니라 선언의 우선순위와 선언의 출처를 고려해야 합니다. 이 결정 과정을 캐스케이드라고 부릅니다. 이 장에서는 우선순위와 상속, 캐스케이드 세 가지 메커니즘이 어떻게 서로 어울려 동작하는지 알아보고 상속, 캐스케이드가 어떻게 다른지 요약합니다.

Chapter 4 값과 단위
이 장에서는 CSS 로 수행할 수 있는 거의 모든 것의 기초, 즉 색상과 거리를 비롯해 모든 프로퍼티를 정의하는 값과 단위에 대해 배웁니다. 여기에서 설명하는 개념을 이해하면 CSS 를 더 빨리 배우고 사용할 수 있습니다.

Chapter 5 폰트
이제는 웹에서 폰트가 표시되는 방법을 넓고도 세밀하게 제어할 수 있게 되었습니다. 웹을 통해 커스텀 폰트를 다운로드할 수 있을 뿐 아니라 내려받은 폰트를 조합해서 자신만의 폰트 패밀리를 창조할 수도 있습니다. 그 어느 때보다 강력한 힘을 갖게 됐지만 그 힘을 현명하게 써야 합니다. 다양함이 지나치면 사용자를 혼란에 빠뜨릴 수 있고, 페이지가 필요 이상으로 무거워집니다.

Chapter 6 텍스트 프로퍼티
텍스트는 매우 중요합니다. 이와 관련된 프로퍼티도 많습니다. 텍스트와 폰트의 차이점은 무엇일까요? 텍스트는 콘텐츠이고, 폰트는 그 콘텐츠를 표현하는 데 사용됩니다. 텍스트 프로퍼티를 통해 행의 나머지 부분을 기준으로 위치를 조절하고, 위첨자를 표시하기도 하고, 밑줄을 긋기도 하고, 대소문자를 바꾸는 일도 할 수 있습니다. 폰트를 바꾸지 않고도 다양한 방법으로 텍스트가 주는 느낌을 바꿀 수 있습니다.

Chapter 7 레이아웃 기본
이 장은 CSS 의 시각적 렌더링 이론에 관해 설명합니다. CSS 에 포함된 모델은 굉장히 강력하며 개방적이라서 어떤 책으로도 CSS 에서 가능한 프로퍼티와 효과들의 조합 전체를 설명하지 못합니다. 하지만 이 챕터를 읽으면 CSS 를 사용하는 새로운 방법을 발견하게 될 것입니다.
렌더링 모델의 작동 방식을 완전히 파악하면 예기치 않은 동작을 마주치더라도 그것이 CSS 에서 정의하는 렌더링 엔진이 정확히 동작한 것임을 알 수 있게 될 것입니다.

Chapter 8 패딩, 보더, 외곽선, 마진
이 장에서는 요소의 모양 일부를 변경하는 데 사용할 수 있는 CSS 프로퍼티와 값을 살펴봅니다. 여기에는 요소 주위의 패딩, 보더, 마진과 외곽선이 포함됩니다. 마진, 보더, 패딩을 모든 요소에 적용하는 기능은 CSS 를 과거의 웹 마크업보다 훨씬 수준 높게 바꿔주는 특징 중 하나입니다. 이것이 바로 CSS 를 매력적으로 만드는 힘입니다.

Chapter 9 색깔, 배경, 그레이디언트
CSS 를 사용하면 색깔과 배경을 더욱 다양하게 쓸 수 있습니다. 같은 페이지나 요소에 여러가지 색깔과 배경색을 쓸 수 있을 뿐 아니라 같은 요소에 다양한 배경을 적용할 수도 있습니다.
색깔과 배경을 자유롭게 다룰 수 있게 되면서 웹 제작자가 할 수 있는 일도 그만큼 늘어났습니다.

Chapter 10 플로트와 셰이프
플로트된 요소는 아주 오랫동안 웹 레이아웃의 기본처럼 쓰였습니다. 하지만 플로트는 레이아웃 목적으로 설계된 것이 아닙니다. 플로트를 레이아웃에 사용하는 것은 테이블을 레이아웃에 사용하는 것이나 마찬가지입니다. 플로트는 플로트일 뿐입니다.
플로트는 그 자체로도 흥미롭고 유용하지만 최근 플로트 셰이프가 추가되면서 더욱 흥미롭고 유용해졌습니다. 플로트 셰이프(float shape)란 사각형이 아닌 셰이프를 만들어 콘텐츠가 그 주위를 흐르게 만드는 것입니다.

Chapter 11 포지션
포지션의 기본 개념은 아주 단순합니다. 포지션은 요소 박스의 위치를 다른 위치를 기준으로 정확히 정의합니다. 여기서 다른 위치란 부모 요소, 다른 요소, 뷰포트(예를 들어 브라우저 윈도우) 자체가 될 수 있습니다.
포지션을 사용하면 일반적인 문서 흐름에서는 불가능한 형태로 요소를 움직일 수 있습니다.
포지션 테크닉 중 상당수가 그리드 레이아웃에 자리를 내주긴 했지만 뷰포트에 항상 존재하는 사이드 바나 리스트 섹션 제목에 sticky 포지션을 적용하는 등 활용하는 사람이 아직도 많습니다. z 축 방향의 스택과 다양한 오버플로 패턴을 조합하면 아직 포지션으로도 할 수 있는 일이 많습니다.

Chapter 12 플렉서블 박스 레이아웃
CSS 플렉서블 박스 모듈 레벨1을 줄여서 플렉스박스라고도 부릅니다. 플렉스박스는 페이지, 애플리케이션, 위젯, 갤러리 등의 레이아웃을 만드는 어려운 작업을 상당히 단순화했습니다.
플렉스박스를 사용하면 CSS 프레임워크가 필요 없어질 때도 많습니다. 이 장에서 설명하는 내용을 익히면 CSS 몇 줄만 가지고도 사이트에서 필요한 기능을 거의 모두 만들 수 있습니다.

Chapter 13 그리드 레이아웃
그리드 레이아웃은 일반화된 레이아웃 시스템입니다. 그리드 레이아웃은 행과 열이라는 개념에서 출발했습니다. 그 말만 들으면 테이블 레이아웃과 비슷한 느낌을 주고, 사실 어떤면에서는 비슷하기도 하지만 테이블 레이아웃보다 훨씬 더 다재다능합니다. 그리드를 사용하면 여러 디자인 요소들을 문서 소스 순서와 관계없이 배치할 수 있고, 원한다면 레이아웃 요소들을 겹칠 수도 있습니다. 그리드 라인의 반복형 패턴을 정의하고, 요소를 그리드 라인에 붙이는 강력하고 유연한 방법이 있습니다. 그리드 안에 그리드를 넣을 수 있고, 비슷한 발상으로 테이블이나 플렉스박스 컨테이너도 그리드에 넣을 수 있습니다. 할 수 있는 일은 이외에도 훨씬 많습니다.

Chapter 14 테이블 레이아웃
테이블은 일종의 이단아 같은 존재입니다. 플렉스박스와 그리드가 있기 전에는 요소의 크기를 다른 요소와 결부시키는 존재는 오직 테이블뿐이었습니다. 예를 들어 같은 행에 있는 셀은 콘텐츠가 많든 적든 상관없이 높이가 모두 같습니다. 같은 열에 존재하는 셀의 너비가 모두 같은 것도 마찬가지죠. 인접한 셀은 각각의 보더 스타일이 완전히 다르더라도 보더 하나를 공유할 수 있습니다. 테이블의 이런 특징은 오직 테이블에만 적용되는 수많은 동작 방식과 규칙 위에서 이뤄지는 것입니다.
수년 동안 테이블과 ‘스페이서’ 이미지를 사용한 탓에 테이블 레이아웃에 익숙한 독자도 있겠지만 테이블 레이아웃 메커니즘은 상당히 복잡합니다. 셀 정렬과 테이블 너비에 영향을 주는 프로퍼티가 추가되면서 이제 테이블을 전보다 더 쉽게 디자인할 수 있게 됐습니다.

Chapter 15 리스트와 생성된 콘텐츠
CSS 레이아웃에서 리스트는 흥미로운 케이스 중 하나입니다.
CSS1에서는 이런 콘텐츠 생성을 정의하지도 않았고, 제어할 수도 없었습니다. 하지만 CSS2에서는 리스트 아이템 번호를 정의하는 기능이 생겼습니다. 이제 CSS를 통해 자신만의 패턴과 형식을 정의하고, 그 카운터를 순서 있는 리스트 아이템뿐만 아니라 모든 요소에 사용할 수 있게 됐습니다. 이 기본적인 메커니즘을 통해 텍스트 문자열, 속성 값 심지어 외부 자원까지 문서에 삽입할 수 있습니다. 즉 마크업을 수정하지 않은 채 CSS만 써서 링크 아이콘, 사설 기호(editorial symbol) 등을 문서에 삽입할 수 있는 것입니다.
에릭 마이어는 CSS3에서 리스트 스타일이 더 강화될 것을 감안하면 리스트가 앞으로 계속 더 유용해질 것이라고 예상합니다.

Chapter 16 트랜스폼
CSS 트랜스폼에는 요소를 이동하는 것 외에도 완전히 새로운 변형이 존재합니다. 사진을 약간 기울여서 더 자연스럽게 보이게 하거나 요소를 뒤집어서 정보를 노출하는 인터페이스를 만들거나 사이드바를 활용해 원근법의 착시 효과를 내는 등 일일이 나열할 수 없는 수많은 것이 가능합니다. 간단히 말해 CSS 트랜스폼은 디자인하는 발상 자체를 바꿀 수 있습니다.
요소를 2차원과 3차원 공간에서 변형할 수 있게 하는 CSS 트랜스폼은 정보를 전달할 새로운 방법을 찾고 있던 디자이너들에게 강력한 힘을 부여했습니다. 2차원 트랜스폼을 흥미로운 방법으로 조합하고, 완전한 3차원 인터페이스를 만드는 것까지 트랜스폼은 디자인 영역에 새로운 길을 개척했습니다. 프로퍼티 사이에 의외의 의존성이 있고, CSS 사용자들이 처음부터 익숙해지긴 어렵겠지만 조금만 연습하면 숨 쉬듯 자연스러워질 것입니다.

Chapter 17 트랜지션
CSS 트랜지션은 프로퍼티 값이 바뀔 때 원래 값이 새 값으로 시간에 따라 변하는 애니메이션 효과입니다. 트랜지션은 어떤 변화에 대한 반응으로 요소의 상태를 바꿉니다. 여기서 변화란 보통 마우스 움직임 등의 사용자 상호작용이지만 스크립트를 통해 클래스나 ID 등의 상태를 바꾸는 것도 해당됩니다.
일반적으로 CSS 프로퍼티 값이 바뀌면 스타일 변경 이벤트가 일어나고, 그 변화는 순간적입니다. 새 프로퍼티 값이 이전 값을 대체하면서 요소를 다시 그리거나 배치하는 데는 대개 몇 밀리초면 충분합니다.

Chapter 18 애니메이션
프로퍼티 값이 시간에 따라 바뀐다는 점에서는 CSS 애니메이션도 트랜지션과 비슷하지만 그 변화가 어떻게 일어나는지 훨씬 세밀하게 컨트롤할 수 있습니다. 예를 들어 CSS 키프레임 애니메이션에서는 애니메이션을 반복할 수도 있고, 반복하는 방법도 정할 수 있고, 애니메이션 시간 동안 무엇이 어떻게 바뀌는지도 더 세밀하게 정할 수 있습니다. 트랜지션은 프로퍼티 값을 암시적으로 바꾸지만 애니메이션은 애니메이션 키프레임 프로퍼티를 통해 명시적으로 바꿉니다.

Chapter 19 필터, 혼합, 자르기, 가리기
CSS에는 흥미로운 새 기능이 몇 가지 생겼습니다. 이 기능을 통해 필터를 사용하고, 요소를 그 뒤에 가려진 내용과 혼합하고, 요소의 일부만을 보이고 나머지는 가리는 일들이 가능해졌습니다. 언뜻 보기엔 CSS와 동떨어진 개념으로 보일 수 있지만 여기에는 한 가지 공통점이 있습니다. 다른 방법으로는 불가능하거나 가능하더라도 아주 어려운 형태로 요소를 변형한다는 겁니다.

Chapter 20 미디어 전용 스타일
CSS 작성 시간 대부분은 다양한 화면에 대응할 방법을 찾으며 보내게 됩니다. 그 화면이 모니터일 수도 있고, 손바닥 위에 있을 수도 있습니다. 화면에 집중하더라도 화면의 종류는 실로 다양하며 각각의 경우마다 고려해야 할 것이 다릅니다. CSS는 이런 현실을 감안해 스타일을 특정 미디어 또는 일정한 특징이 있는 미디어에만 적용할 수 있게 만들었습니다.
미디어 쿼리와 미디어 전용 스타일 기능을 조합하면 스타일시트 단 하나로 광범위한 디자인을 만들 수 있습니다. 페이지 구조를 바꿔서 다양한 디스플레이 크기에 대응하는 것에서부터 색조를 바꿔 그레이스케일 인쇄를 지원하는 것까지. 이제 미디어에 구애받지 않고 최선의 결과를 추구할 수 있게 됐습니다.

전 세계 웹디자인계 트렌드나 핫이슈를 파악하면서 항상 많이 발견되는 주제는 단연 CSS 기술입니다. 국내에서는 웹을 표현할 때 많은 부분에서 자바스크립트로 프론트엔드를 처리하는 부분이 많지만, 글로벌 웹디자인계에서는 가능하다면 CSS만으로 표현하려는 실험이 끊임없이 이어집니다. 웹 접근성과 탄탄한 기본기를 중요하게 다루는 이유도 한몫하지 않을까 합니다. 물론 JS를 사용한다고 해서 접근성이 떨어지는 것은 아닙니다. 단순히 구현만 하는 것이 아니라 이것을 왜 사용하며 어떻게 작동하는지에 대해 웹을 표현하기 위한 기본부터 체크하려는 열정이 저자의 철학입니다. CSS워킹그룹의 핵심 전문가들의 많은 도움도 이 책을 빛나게 해준 조연자들입니다. 이 책은 저자의 CSS에 대한 열정과 끊임없는 깊은 탐구열의 산물이라고 할 수 있습니다. ◆이 책에서 다루는 내용 -선택자, 우선순위, 캐스케이드 -값, 단위, 폰트 그리고 text 프로퍼티 -패딩, 보더, 외곽선, 마진 -색상, 배경, 그레이디언트 -플로트와 포지셔닝 -플렉서블 박스 레이아웃 -새로운 그리드 레이아웃 시스템 -테이블 레이아웃 -리스트 -2D 와 3D 트랜스폼, 트랜지션 그리고 애니메이션 -필터, 혼합, 자르기, 가리기 -미디어 전용 스타일