CSS 완벽가이드

by 에릭 마이어 저 / 남덕현, 이준, 연홍석, 정태영 역

최신 사양의 CSS2와 CSS2.1을 이용하여 CSS의 모든 것들을 실무에 적용하는 방법을 알려주고 있는 책이다. CSS 2.1의 모든 내용들을 실무에 완벽하게 적용할 수 있도록 포괄적인 내용을 다루고 있으며, 이전 버전보다 크게 개선된 마이크로소프트 인터넷 익스플로러 7에 맞추어 콘텐츠의 위치지정, 리스트와 생성된 콘텐츠, 테이블 레이아웃, 유저 인터페이스, 페이지의 미디어 타입 등 많은 내용을 다루고 있다.

저자는 실제 업무 경험을 통해 얻은 실수를 피하는 방법 등의 노하우들을 수록하였으며, CSS 속성들을 꼼꼼히 살피고 있다. 그리고 이것이 다른 속성들과 어떻게 작용하는지 잘 설명하고 있다. 다양한 예제를 통해 한 번의 수정으로 전체 웹 사이트의 스타일을 새롭게 만들거나 변경하는 방법을 배울 수 있도록 구성하였다.

css
600 pages, March 2009
ISBN: 9788992939225

출판사리뷰 출판사 리뷰

『CSS 완벽 가이드』는 CSS 2.1의 모든 내용들을 실무에 완벽하게 적용할 수 있도록 포괄적인 내용을 다루고 있다. 이전 버전보다 크게 개선된 마이크로소프트 인터넷 익스플로러 7에 맞추어 콘텐츠의 위치지정, 리스트와 생성된 콘텐츠, 테이블 레이아웃, 유저 인터페이스, 페이지의 미디어 타입 등 많은 내용을 다루고 있다. 저자 에릭 마이어는 각각의 CSS 속성들을 꼼꼼히 살피고, 다른 속성들과 어떻게 작용하는지 잘 설명하고 있다. 실제 업무에서 빈번하게 발생하는 실수들을 피하는 방법뿐 아니라, 깔끔하고 직관적인 스타일을 사용하는 그의 다양한 경험을 통하여 많은 것을 배울 수 있을 것이다. 이 책은 CSS의 모든 것을 담았다.

웹 개발의 표준, CSS

이제 웹표준을 지키는 회사들이 많아지고 법률이 생겨나면서 CSS의 중요성은 더 늘어날 것이다. 또, CSS를 얼마나 잘 사용하느냐에 따라서 웹의 가치에 대한 평가도 달라질 것이다. CSS는 CSS1과 CSS2를 지나서 CSS2.1이 나오고 이제 CSS3을 만들어가면서 지속적으로 발전하고 개선될 것이다

이렇게 끊임없이 발전하는 CSS는 우리가 모르는 수많은 기능들이 사용되어지기를 기다리고 있지만, 우리가 그 문서들을 제대로 열어보고 이해하기는 현실적으로 쉽지 않다. 『CSS 완벽 가이드』는 앞으로 CSS를 사용하면서 만들어야 하는 전체적인 그림을 그리는 데 많은 도움을 줄 것이다. 우리가 원해왔던 기능이 어떻게 구현이 되었는지, 앞으로 어떤 기능이 좀 더 생겨나게 될지, 그리고 우리가 지금까지 사용해왔던 기능들이 어떻게 만들어지고 왜 불편한 기능들이 개선되지 못하고 있는지를 이 책에서 알게 될 것이다.

『CSS 완벽 가이드』는 최신 사양의 CSS2와 CSS2.1을 이용하여 CSS의 모든 것들을 실무에 적용하는 방법을 알려줄 것이다. 다양한 예제를 통해 한 번의 수정으로 전체 웹 사이트의 스타일을 새롭게 만들거나 변경하는 방법을 배우고, HTML로만 하는 것보다 더 다양하고 수준 높은 스타일을 만들 수 있을 것이다.

여러분은 이 책을 통해 다음의 내용들을 배울 것이다.

  • 정교한 방식으로 텍스트 스타일 지정하기
  • 사용자 인터페이스, 테이블 레이아웃, 리스트, 생성된 콘텐츠(generated contents)
  • 플로팅과 위치지정하기에 대한 상세 내용
  • 폰트 패밀리와 그에 따른 대체 시스템
  • 박스 모델 동작 방식
  • 인터넷 익스플로러 7, 파이어폭스, 그 외 브라우저에서 지원하는 새로운 CSS3 셀렉터

지은이 옮긴이 지은이 & 옮긴이

에릭 마이어 (Eric A. Meyer)
에릭 마이어는 1993년부터 웹을 주제로 일해왔으며, HTML, CSS, 웹표준 분야에서 세계적으로 잘 알려져 있다. 또, 아메리카 온라인(AOL), 애플 컴퓨터, 웰스 파고 뱅크(Wells Fargo Bank), 매크로미디어 등의 회사를 클라이언트로 가지고 있는 Complex Spiral Consulting의 설립자이기도 하다.

남현덕
SK 커뮤니케이션즈 UI개발팀 표준화 파트에서 근무하고 있다. 싸이월드 통합에디터 UI개발과 IPTV 검색영역 UI개발 업무를 진행했으며, 최근에는 신규 네이트 메인 페이지와 씨름 중이다.

이준
2000년 웹 세상에 입문하였고, 2004년부터 다음커뮤니케이션에서 UI개발을 담당하고 있다. 『제프리 젤드만의 웹표준 가이드』(위키북스, 2007)를 번역했다.

연홍석
웹의 가능성을 믿고 늦게 UI개발자의 길을 걷게 되었다. http://blog.wystan.net 블로그를 통해서 CSS 관련 정보를 공유하고 있으며, 현재 NHN에서 근무하고 있다.

정태영
웹표준 커뮤니티 standardmag.org의 운영진으로 활동 중이며, 현재 한양대학교 대학원에서 영상 처리 분야를 연구하고 있다.

책속으로 책속으로

사용자 에이전트가 변형 폰트의 텍스트 두께를 결정하는 방법이나 두께가 상속되는 방법을 이해하려면 100에서 900까지 있는 키워드부터 알아야 한다. 이 숫자 키워드는 폰트 디자인에서 일반적으로 사용되는 두께의 9개 단계를 보여주기 위해서 정의되었다. 예를 들어서 OpenType은 숫자로 표현되는 9개 단계를 사용한다. 폰트에 이런 단계들이 내장되어 있으면 각각의 숫자 값은 미리 정의된 단계와 비례적으로 대응되는데 100이 가장 얇고 900이 가장 두꺼운 폰트 변형을 가리킨다.

실제로는 이 숫자가 고유한 두께 값을 가지고 있지는 않다. CSS 명세서에는 각 숫자는 그 전 단계의 숫자보다 두껍거나 같게 대응되기만 하면 된다고 되어 있다. 따라서 100, 200, 300, 400 전부가 약간 얇은 하나의 폰트 변형에 대응될 수 있고, 500과 600 모두 약간 두꺼운 하나의 폰트 변형에 대응될 수도 있으며, 700, 800, 900이 아주 두꺼운 하나의 폰트 변형을 나타낼 수도 있다. 자신보다 작은 숫자의 폰트보다 두께가 더 두껍다면 전혀 문제가 없다.

공교롭게도 이 숫자들은 특정 폰트 변형의 이름이나 폰트 웨이트의 값에 맞추어져 정의가 되어 있다. 400은 normal과 동일하도록 정의되고, 700은 bold와 대응되도록 정의되어 있다. 다른 숫자들은 font-weight에 맞게 정의되어 있지 않지만, 일반적으로 사용되는 폰트 변형 이름에 대응될 수 있다. 폰트 변형 중에서 'Normal' 또는 'Regular', 'Roman', 'Book'과 같은 이름이 있는 경우는 400이 지정되고 'Medium'은 500이 지정된다. 그러나 'Medium'이라는 이름의 폰트 변형만 유일하게 사용 가능하다면 500이 아니고 400으로 지정된다.

주어진 폰트 패밀리의 수가 9개 미만의 두께 단계를 갖고 있다면 사용자 에이전트는 좀 더 작업을 해야 한다. 이런 경우에 미리 정의된 방법으로 그 사이를 채워 주어야 한다.500이 지정되어 있지 않다면 400에 지정된 폰트 웨이트를 같이 사용한다.300이 지정되어 있지 않다면 400보다 얇은 다음 단계의 폰트 변형을 사용한다. 더 얇은 값이 없을 경우 300에는 400과 같은 폰트 변형이 지정된다. 이런 경우에 보통 'Normal'이나 'Medium'이 된다. 이 방법은 200과 100의 경우에도 같이 사용된다.

600이 지정되어 있지 않은 경우에는 500보다 두꺼운 다음 단계의 폰트 변형으로 지정된다. 더 두꺼운 폰트 변형이 없을 경우에 600에는 500과 같은 폰트 변형이 지정된다. 이 방법은 700과 800, 900에도 같이 적용된다

-- 5장 '폰트웨이트의 원리' 중에서

목차 목차

  1. 01장 CSS와 문서
  2. 02장 선택자
  3. 03장 문서구조와 캐스케이드
  4. 04장 값과 단위
  5. 05장 폰트
  6. 06장 텍스트 속성
  7. 07장 기본적인 비주얼 서식
  8. 08장 패딩, 보더, 마진
  9. 09장 색상과 배경
  10. 10장 플로트와 위치지정하기
  11. 11장 테이블 레이아웃
  12. 12장 리스트와 생성된 콘텐츠
  13. 13장 사용자 인터페이스 스타일
  14. 14장 비화면 매체
  15. 부록 A 속성 참조
  16. 부록 B 선택자, 가상 클래스, 가상 요소 참조
  17. 부록 C HTML 4 스타일시트 예제

관련자료 관련자료

도서 정리 소스

도서 소개자료