추가 적립 안내

[CSS 마스터 전략 CSS Mastery]는 웹을 만들기 위해 필요한 마크업과 CSS를 익힐 수 있도록 구성한 책이다. 기본적인 CSS 개념, 실전 사례를 쉽게 설명하고, 코드 구성 방법, 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배운다. 기본적인 내용을 익힌 뒤에 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 배울 수 있도록 안내한다. 또한, 버그와 버그를 수정하는 방법을 소개하고, 이 책에 나온 기법을 종합해 직접 만든 적용 사례를 설명한다.

★ 요약 ★

웹을 만들기 위해서는 뼈대가 되는 마크업과 표현을 하는 CSS를 이해하고 제대로 사용할 줄 알아야 한다. 모바일 시대로 넘어가면서 웹을 점점 덜 사용한다고 생각할 수도 있지만, 모바일 시대에서 웹킷(webkit) 기반의 브라우저 환경은 CSS를 사용한 다양한 표현을 하기 더 좋은 환경이 되었다. 모바일 웹이든 PC웹이든 웹을 제대로 만들기 위해 필요한 마크업과 CSS은 이 책을 통해 제대로 익힐 수 있다.

★ 이 책에서 다루는 내용 ★
이 책은 기본적인 HTML과 CSS를 알고 있다면 누구에게나 도움이 될 수 있습니다. CSS 디자인에 이제 막 발을 들여놓았는지, CSS 사이트 개발 경력이 몇 년인지에 관계 없이 이 책이 도움이 될 것입니다. CSS 개발 경험이 있다면 대부분 내용을 이해할 수 있을 것입니다. 하지만 독자가 아직 전문가는 아니라고 가정하고 진행합니다. 이 책은 실용적이고 실제 경험에서 비롯된 조언과 예제를 정리하고 있어서 최신 CSS 디자인을 마스터할 수 있게 도울 것입니다.

★ 이 책의 구성 ★
먼저 기본적인 CSS 개념, 실전 사례를 쉽게 설명하는 것에서 시작합니다. 코드 구성 방법과 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배울 것입니다. 이런 내용을 이미 알고 있을지 모르겠습니다. 하지만 이 내용을 통해 새롭게 알게 되거나 그동안 잘못 알고 있었던 내용을 발견할 것입니다. 따라서 첫 3개의 장은 CSS 기본에 대한 핵심 정리이기도 하면서, 이미 알고 있었던 내용을 다시 한 번 상기하는 역할도 해줄 것입니다.
이렇게 기본기를 갖춘 후에 나오는 5개의 장은, 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다룹니다. 각 장은 간단한 설명으로 시작해서 점점 더 복잡한 예제를 발전시켜 나갑니다. 이 부분에서는 모서리가 둥근 상자를 만드는 방법, 투명 그림자 효과 사용 방법, 탭형 내비게이션바를 만드는 방법, 플리커 스타일의 이미지맵 만드는 방법 등을 예제로 설명합니다. 예제 코드는 웹 사이트(www.cssmastery.com나 www.acornpub.co.kr/book/css-mastery-2e)에서 다운로드할 수 있습니다.
브라우저 버그 때문에 CSS 개발자들이 많은 고생을 합니다. 그렇기 때문에 이 책의 예제들에서는 여러 브라우저에서 잘 동작할 수 있게 하는 기법에도 신경을 썼습니다. 뿐만 아니라 하나의 장을 할애해서 버그와 버그를 수정하는 방법에 대해서도 다룹니다. 그 장에서는 버그를 발견할 수 있는 기술과 고칠 수 있는 방법을 알아봅니다. 또 마이크로소프트 인터넷 익스플로러에서 CSS 버그가 나타나는 이유에 대해서도 배울 것입니다.
마지막 두 개의 장에서는 유명한 CSS 디자이너인 사이먼 콜리슨과 캐머론 몰이 이 책에 나온 기법을 종합해 직접 만든 환상적인 적용 사례를 설명합니다. 따라서 각 기법의 동작 방식뿐만 아니라 실제 웹 프로젝트에서 활용하는 방법에 대해 배우게 될 것입니다.

이 책은 처음부터 시작해서 차례대로 읽어도 되고, 컴퓨터 옆에 놔두고 필요할 때마다 팁이나 기법을 찾아보는 방식으로 활용하셔도 됩니다. 원하는 대로 활용하세요.

★ 추천의 글 ★

웹 디자인의 세계는 놀랍습니다. 똑같은 모양을 만들기 위한 방법이 어림잡아 3,647가지나 됩니다. 그나마도 새로운 방법이 계속 나오고 있어서 이 숫자도 정확하지는 않습니다. 특정 문제를 바로잡는 방법은 한 가지가 아니라 여러 웹 디자이너들이 발견한 수많은 방법들을 이용할 수 있습니다. 이런 방법들을 선택할 수 있기에 웹 디자인은 재미있고 흥미로운 동시에, 너무나 많은 정보 때문에 정신이 없기도 하죠. 이 책은 지나치게 많은 정보에 파묻힌 사람들에게 확실한 안내를 해줄 것입니다.
앤디 버드는 지난 몇 년간 웹 표준 디자인을 위한 많은 글과 디자인을 발표했습니다. 명확하고도 쉽게 따라 해볼 수 있는 핵심적인 CSS 기법의 설명이 녹아 있는 이런 책을 접할 수 있다는 건 정말 행운입니다. 우리 같은 웹 전문가에게는 없어서는 안될 모든 해법과 팁을 한눈에 볼 수 있게 이 책에 정리해 놓았습니다.

저는 항상 목표를 달성하기 위해 한 가지 방법만을 추천하는 식의 책들을 그리 좋게 보지 않았습니다. 앤디 버드는 그런 방식과 완전히 반대의 접근 방법으로 다양한 방식을 설명합니다. 예를 들어 링크 스타일을 꾸민다든지, 탭 내비게이션을 만든다든지 할 때 여러 가지 방법이 있다고 설명하고 CSS3 방식으로 빠르게 해결할 수 있는 방법을 사용하거나 레이아웃을 만들 때도 고정형(fixed), 화면 비례형(fluid), 글자 비례형(elastic)의 여러 가지 방법을 사용합니다. 또 CSS를 사용해서 디자인할 때 부딪힐 수 있는 각종 브라우저 버그를 해결하는 방법에 대한 도움도 설명합니다. 동일한 일반적인 엘리먼트라도 다양한 방법과 기법들을 사용할 수 있게 되면 필요한 곳에 가장 적당하다고 생각하는 방식을 도입할 수 있을 것입니다.

이뿐만 아니라, 디자이너 두 명의 도움을 받아 이 책에서 설명한 기법을 종합해서 사이트를 만드는 방법까지 다루었습니다. 저는 오래 전부터 캐머론과 사이먼 작업의 팬이었습니다. 이 두 사람이 만든 적용 사례를 통해 유동적이고 방탄웹적인 유연한 스타일 해법을 볼 수 있다는 건 정말 대단한 혜택이 아닐 수 없습니다.
자, 그럼 여러분 스스로 3,647가지 방법을 직접 실행해보면서 CSS를 마스터하시기 바랍니다.
- 댄 씨더홈(Dan Cederholm) / 『(개정판) 웹 2.0을 이끄는 방탄웹』, 『Web Standards Solution Special Edition 한국어판』 저자

★ 저자 서문 ★
CSS 관련 자료가 수없이 많이 나오고 있습니다. 그럼에도 불구하고 CSS 관련 게시판에는 이런 질문이 계속 반복됩니다. “가운데 정렬하는 레이아웃은 어떻게 만드나요?”, “모서리가 둥근 상자를 만드는 가장 좋은 방법이 뭔가요?”, “3단 레이아웃 만드는 방법을 알려주세요.”
CSS 디자인 관련 커뮤니티 활동을 하고 있다면 특정 기사나 기법이 소개된 웹 사이트들을 기억하고 있을 것입니다. 하지만 CSS를 처음 접했거나 모든 웹 사이트를 다 읽을 만한 시간이 없다면 이런 정보를 다 따라 잡기란 쉽지 않습니다.
CSS 관련 기술을 익힌 사람의 경우에도 위치 지정 모델이나 지정 순위 같은 문제를 확실하게 이해하지 못해서 문제에 봉착할 수 있습니다. 대부분의 CSS 작업자들이 전체 스펙을 완전히 소화하지 못한 상태에서 독학으로 다른 사람이 쓴 글이나 코드를 보고 하나씩 기술을 익혔기 때문입니다. 또한 CSS 명세서는 너무 복잡해서 웹 개발자가 아니라 웹 브라우저 개발자를 위해 작성된 것 같습니다.

그리고 브라우저마다의 특성을 고려해야 한다는 점이 있습니다. 브라우저 버그와 비일관성은 CSS 작업자에게 가장 큰 골칫거리입니다. 불행하게도 대부분의 이런 버그들은 문서화가 잘 되어 있지 않고 해결 방법도 몇몇 사람만 알고 있습니다. 특정 방법을 사용하지 않으면 브라우저에 따라 다른 결과가 나올 수 있습니다. 해결했다 하더라도 어떤 브라우저에서 어떤 문제가 발생했는지 일일이 기억할 수도 없습니다.

바로 이런 이유 때문에 이 책을 쓰게 됐습니다. 가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있게 하기 위해서 말입니다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 알려드리고자 합니다.

★ 옮긴이의 말 ★

이 책의 번역본 초판이 나왔을 때는 웹표준을 새롭게 개척해야 하는 분야라고 인식하는 시기였습니다. 새로운 개념에 대해서 이해하고 연구하면서 표준에 맞는 웹, 접근성 좋은 웹을 만드는 방법에 대해서 서로 공부를 하던 시기였습니다. 또 브라우저별로 다른 환경안에서 웹표준에 맞춘 마크업 및 CSS를 적용하는 데 있어 많은 사람들이 고생을 했습니다.

하지만 시간이 많이 흘러 이제 브라우저의 처리 방식도 서로 비슷해지면서 그리고 모두가 점점 표준에 맞는 마크업 및 CSS를 적용했고, 이제는 당연히 표준에 맞는 마크업과 CSS가 업계 표준이 되었습니다. 그리고 사람들이 날마다 사용하는 브라우저도 시간이 지나면서 점점 최신 브라우저로 업그레이드 되면서 환경도 더 좋아졌습니다. 또 모바일의 사용이 많아지면서 모바일 환경에서는 거의 대부분의 기기가 웹킷(webkit) 기반의 유사한 수준의 브라우저를 사용하기 때문에 앞으로도 웹을 제대로 표현하기 위한 마크업과 CSS 활용에 있어서 더 좋은 환경이 되고 있습니다.

이 책의 번역 작업을 마치고 실제 개정판이 나오기까지 시간 차이가 있고 그간 환경 변화도 있었지만, 이 책의 내용은 유효하고 앞으로도 계속 그럴 것입니다. 웹이라는 기반을 통해서 서비스를 제공하고 콘텐트를 공유하는 한 말이죠. 그뿐 아니라 정보 단위를 제대로 구성하기 위한 마크업의 구조, 계층적인 표현을 잘 하기 위한 CSS의 개념은 기술의 변화와 상관없이 정보를 표현하는 본질이 바뀌지 않는 한 환경과 상관없이 기본으로 익혀야 하는 중요한 개념입니다.

1장 기초 다지기

__구조가 탄탄한 코드 만들기
____마크업의 역사
______의미의 중요성
______ID와 클래스 이름 짓기
______엘리먼트 이름
______ID 또는 클래스 사용
______div와 span
______마이크로포맷
______HTML과 CSS 버전
____문서 유형, DOCTYPE 전환, 브라우저 모드
____유효성 검사
______브라우저 모드
______DOCTYPE 전환
__요약

2장 스타일을 꾸밀 대상 선택하기

__선택자 활용 기초
______유사 클래스 선택자
__전체 선택자
__고급 선택자
______자식 선택자, 인접 형제 선택자
______속성 선택자
__캐스케이드 효과와 적용 순서
______지정 순위
______스타일시트에서 지정 순위 활용하기
______body 태그에 클래스나 ID 지정하기
______스타일시트를 계획 구성 관리하는 방법
__문서에 스타일 적용하기
______구조 표시를 위한 주석
______작업 기록을 위한 주석
______주석을 제거하고 스타일시트 최적화하기
__스타일 가이드
__요약

3장 화면 표시를 위한 모델 완벽 정리

__박스 모델 완벽 정리
______인터넷 익스플로러의 박스 모델
______마진 겹침 현상
__포지셔닝 완벽 정리
______화면 표시 모델
______상대 위치
______절대 위치
______고정 위치
______플로팅
__라인 박스와 플로트 해제 방법
__요약

4장 배경 이미지와 이미지 대치 기법

__배경 이미지 기초 다지기
______고정폭 둥근 모서리 상자
__둥근 모서리 상자 모양 만들기
______유동폭 둥근 모서리 상자
______마운틴탑 코너
______복수 배경 이미지
______border-radius
______border-image
__그림자 효과
______간단한 그림자 효과 내기
______Clagnut 스타일 그림자 효과
______Box-shadow
______CSS 투명도
__투명도
______RGBa
______PNG 투명도
______시점차를 활용한 움직이는 배경 기법
__이미지 대치 기법
______FIR 방법
______파크 방법
______sIFR 방법
__요약

5장 링크 모양 꾸미기

__링크 스타일 기초
__밑줄 치며 놀기
______기본 링크 꾸미기
______예쁜 링크 밑줄 만들기
__방문했던 링크 스타일
__링크 대상에 스타일 입히기
__링크 유형별로 스타일 지정하기
______문서나 뉴스 피드 다운로드용 링크 꾸미기
__버튼처럼 보이는 링크
______롤오버 기초
______이미지를 사용한 롤오버 효과
______픽시 방법을 이용한 롤오버 효과
______CSS 스프라이트
______CSS3를 사용한 롤오버
__CSS로만 만드는 툴팁
__요약

6장 리스트 스타일과 내비게이션

__리스트 스타일 기초
__세로형 내비게이션바 만들기
__내비게이션바에서 현재 페이지 표시하기
__단순한 가로형 내비게이션바
__이미지를 사용한 내비게이션바
__슬라이딩 도어 효과의 탭 내비게이션바 만들기
__CSS 드롭다운
__CSS 이미지맵 만들기
______플리커 스타일의 이미지맵 만들기
__리모트 롤오버 만들기
__정의 리스트
__요약

7장 접근성 높은 폼과 테이블 만들기

__데이터 테이블 스타일 꾸미기
______테이블 관련 엘리먼트 소개
________써머리와 캡션
________thead, tbody, tfoot
________col, colgroup
______데이터 테이블 마크업 만들기
______테이블 스타일 꾸미기
______화면 모양 만들기
__간단한 폼 레이아웃 만들기
______유용한 폼 엘리먼트
______폼 레이블
______기본 레이아웃
______기타 엘리먼트 처리 방법
______장식 마무리
______필수 입력 항목
__복잡한 폼 레이아웃 만들기
______접근성을 고려한 데이터 입력 방식
______다단 레이아웃의 체크 박스
______서브밋 버튼
______폼 에러 메시지 만들기
__요약

8장 레이아웃

__레이아웃 계획 수립
__기반 구조 정의
______가운데 레이아웃 만들기
__플로트 기반의 레이아웃
______플로트를 이용한 2단 레이아웃
______플로트를 이용한 3단 레이아웃
__고정 레이아웃, 유동 레이아웃
______화면 비례형 레이아웃
______글자 비례형 레이아웃
______글자와 화면 크기에 따라 늘어나는 이미지
__가짜 단 모양 만들기
__동일 높이 다단 구조
__CSS3 컬럼
__CSS 프레임워크 vs CSS 시스템
__요약

9장 브라우저 버그 해결하기

__흔히 발생하는 CSS 문제
______버그 잡기
______지정 순위와 정렬 방법 오류
______마진 겹침 현상
______버그 잡기 기초
______처음부터 버그 만들지 않기
______문제 분리하기
______테스트 범위 최소화하기
______증상이 아닌 문제 원인 바로 잡기
______도움 요청
__레이아웃
______레이아웃이란
______레이아웃 때문에 생기는 효과
__문제 해결
______인터넷 익스플로러 조건 주석문
______핵과 필터 사용에 대한 경고
______핵 사용 시 유의점
______밴드 패스 필터
______별표 HTML 필터
______자식 선택자 핵
______더블 마진 플로트 버그
__흔히 발생하는 버그 해결 방법
______텍스트 주변에 3픽셀 공간 표시 버그
______IE 6의 문자 중복 표시 버그
______IE 6의 피커부 버그
______상대 좌표 컨테이너에서 절대 좌표 지정
______인터넷 익스플로러 관련 이야기
__단계적 브라우저 지원
__요약

10장 케이스 스터디: 로마 이탈리아

__케이스 스터디 개요
__기반 구조
______HTML5 미리 보기
______reset.css
__1080 레이아웃과 그리드
______웹 디자인과 그리드
__고급 CSS2와 CSS3 기능들
______Dowebsitesneedtolookexactlythesameineverybrowser.com
______속성 선택자
______Box-shadow, RGBa, text-overflow
______1999년식 font-size 지정
__폰트 연결과 더 나은 웹 타이포그래피
______꾸밈 구두점
______다단 구조 텍스트 레이아웃
______@font-face
______Cufon, @font-face로의 중간 과정
__AJAX와 jQuery를 사용한 인터랙션
______AJAX
______jQuery
______AJAX와 jQuery 검색 사용
__요약

11장 케이스 스터디: 클라임 더 마운틴스

__케이스 스터디 개요
__스타일시트 구성 및 규칙
______제일 많이 사용하는 screen.css
______설명 붙이기
______초기화
______조건 주석을 사용한 인터넷 익스플로러용 스타일시트
__자유로운 그리드 사용
______예제 사이트의 레이아웃
__클래스를 사용한 내비게이션
______현재 페이지 하이라이트
______인용구 표시
__엘리먼트 타깃팅
______하위 선택자
______:first-child 의사 선택자
______인접 형제 선택자
__투명도, 그림자, 둥근 모서리
______목표
______설명 이미지 겹침 표현 및 RGBa 투명도
______클래스 결합
______border-radius
______box-shadow
__목록 위치/구성 및 콘텐트 표현
______동근 모서리
______등고선 차트 표현
__요약