추가 적립 안내

CSS에 도전하라!

'위키북스 오픈소스 & 웹' 시리즈, 제13권 『CSS 완벽 가이드』. Complex Spiral Consulting 설립자 에릭 마이어가, CSS2와 CSS2.1을 이용하여 CSS의 모든 것을 실무에 적용하는 비결을 가르쳐주고 있다. HTML로만 작업하는 것보다 수준 높은 웹사이트 스타일을 구축하게 된다.

이 책은 웹표준을 위해 꼭 알아야 할 CSS에 대한 안내서다. CSS를 처음 배우는 학습자는 물론, 실무에서 효율적으로 활용하는 방안을 고민하는 UI 개발자를 대상으로 삼고 있다. CSS의 속성을 꼼꼼히 살펴봄으로써 작업할 시간을 단축하면서 복잡한 웹페이지에 스타일을 입히는 방법을 소개한다.

특히 풍부한 예제를 통해 한 번의 수정으로 웹사이트의 전체적 스타일을 새롭게 만들거나 변경하는 방법을 공개하고 있다. 실무에서의 오류를 줄이는 방법 등도 배우게 된다. 또한 프로퍼티, 태그, 어트리뷰트, 그리고 적용 등에 대한 경험을 바탕으로, 브라우저 지원과 디자인 가이드라인 등과 같은 실질적인 쟁점을 설명해줌으로써 CSS에 대한 이해를 업그레이드시켜주고 있다.

〈소개〉

작업시간을 단축하고 많은 노력을 들이지 않으면서
복잡한 웹페이지에 스타일을 입힐 수는 없을까?

『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 셀렉터


〈독자 서평〉

“이 책을 구입하기 전에 같은 저자가 쓴 6권 정도의 CSS 책을 구입했었다. 다른 책에서는 배울 수 없는 CSS의 새로운 사용법에 깜짝 놀랐다. 각각의 주제들이 상세하게 다루어져 있었다. CSS 레퍼런스로 이 책은 내가 본 책 중 단연 최고다!”
- 마이클 하스, 아마존 독자

“이 책은 CSS의 개념과 동작원리에 대해 체계적으로 설명하고 있다. 이 책은 웹페이지의 CSS를 이전에 있던 것보다 더 좋은 방식으로 수정할 수 있도록 많은 도움을 주었다. 만약 레이아웃을 위해 CSS를 이용하고자 한다면 이 책을 읽을 필요가 있다.”
- 나단 롱, 아마존 독자

01장 CSS와 문서
기품을 잃고 타락한 웹
구원을 위해 등장한 CSS
요소
CSS와 XHTML 연결하기

02장 선택자
기본 규칙들
그룹화
class 선택자와 id 선택자
속성 선택자
문서구조 이용하기
가상 class와 가상 요소

03장 문서구조와 캐스케이드
구체성
상속
캐스케이드

04장 값과 단위
숫자
퍼센트
색상
길이 단위
URL
CSS2 단위

05장 폰트
폰트 패밀리
폰트 웨이트
폰트 사이즈
스타일과 변형들
늘이기와 맞추기
폰트 속성
폰트 매칭

06장 텍스트 속성
들여쓰기와 수평 정렬
수직 정렬
어간과 자간
텍스트 변환하기
텍스트 꾸미기
텍스트 그림자 설정

07장 기본적인 비주얼 서식
기본 박스
블록 레벨 요소
인라인 요소
기본 용어와 개념
요소의 display 전환하기

08장 패딩, 보더, 마진
기본 요소 박스
마진
보더
패딩

09장 색상과 배경
색상
전경색
배경

10장 플로트와 위치지정하기
플로트
위치지정하기

11장 테이블 레이아웃
테이블의 구성
테이블 셀의 보더
테이블에 크기 지정하기

12장 리스트와 생성된 콘텐츠
리스트
생성된 콘텐츠

13장 사용자 인터페이스 스타일
시스템 폰트와 색상
커서
외곽선

14장 비화면 매체
다중 미디어를 위한 스타일시트 디자인하기
페이지로 나뉜 미디어
청각을 위한 스타일

부록 A 속성 참조
부록 B 선택자, 가상 클래스, 가상 요소 참조
부록 C HTML 4 스타일시트 예제

사용자 에이전트가 변형 폰트의 텍스트 두께를 결정하는 방법이나 두께가 상속되는 방법을 이해하려면 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장 ‘폰트’ 중 폰트 웨이트의 원리에서