CSS 마스터 전략

▶▷ 최신 CSS기법을 다루는 CSS 마스터가 되기 위한 필독서
▶▷ 2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러!!

가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자.

■ 최신 CSS 기법 및 활용팁 총정리
■ 놓치고 있었던 CSS 기본 개념 다시 다지기
■ 브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법
■ 유명 CSS 전문가가 직접 만든 실전사례 및 예제

이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다. 기본 사항을 살펴본 후, 각 장에서는 CSS 기반 디자인에서 사용되는 특징을 다룹니다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 독자들이 수행하고 있는 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것입니다.

여러 브라우저 간에 다르게 동작하는 현상 때문에 CSS 작업을 하는 사람들이 많은 고생을 합니다. 이 책에서는 이런 문제를 해결할 수 있는 CSS 핵, 필터, 버그 해결방법을 설명합니다. 또한 이미지 대치 기법, 링크 스타일 만들기, 폼과 리스트 모양 꾸미기, 순수하게 CSS만으로 만드는 레이아웃을 비롯한 많은 정보를 제공하고 있습니다. 이렇게 다룬 모든 기법을 종합해서 CSS 디자이너로 유명한 사이먼 콜리슨과 캐머론 몰이 직접 작성한 2개의 실전사례 예제를 부록에 포함했습니다.


[ 이 책의 구성 ]

먼저 기본적인 (X)HTML과 CSS 개념, 코드 작성방법을 쉽게 설명하는 것에서 시작합니다. 코드 구성 방법과 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배우게 될 것입니다.

1장과 2장은 CSS 기본에 대한 핵심 정리이며, 이미 알고 있었던 내용을 다시 한번 상기시켜줄 것입니다.
3장에서 7장까지에서는 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다룹니다. 각 장은 간단한 설명으로 시작해서 점점 더 복잡한 예제로 발전시켜 나갑니다. 이 부분에서는 모서리가 둥근 상자 만드는 방법, 투명 그림자 효과 사용방법, 탭형 내비게이션 바 만드는 방법, 플리커 스타일의 이미지 맵 만드는 방법 등을 예제로 설명합니다. 브라우저 버그 때문에 CSS 개발자들이 많은 고생을 하기 때문에 각 예제를 만들 때는 여러 브라우저에서 잘 동작할 수 있도록 하는 기법에도 신경을 썼습니다.

8장과 9장에서는 핵, 필터, 브라우저 버그 해결 방법을 설명합니다. 가장 많이 사용되는 필터의 종류와 적절하게 사용하는 방법, 즉 언제 사용해야 하고 언제 사용하면 안되는지를 설명해뒀습니다. 그리고 마이크로소프트 인터넷 익스플로러에서 CSS 버그가 나타나는 이유에 대해서도 배우게 될 것입니다.
마지막 2개 부록에서는 유명한 CSS 디자이너인 사이먼 콜리슨과 캐머론 몰이 이 책에 나온 기법을 종합해 직접 만든 환상적인 적용 사례를 설명합니다. 따라서 각 기법의 동작 방식뿐만 아니라 실제 웹 프로젝트에서 활용하는 방법에 대해 배우게 될 것입니다.


[ 이 책의 대상 ]

이 책은 최신 기법과 다양한 활용사례를 편리하게 참조할 수 있도록 한 권에 정리해놓고 있어서, CSS의 감춰졌던 부분을 기본 개념부터 하나씩 쉽게 이해할 수 있습니다. 지금까지 대부분 책들이 기본적인 기법과 활용을 다루고 있었다면, 이 책은 기본적인 내용은 이미 숙지하고 있고, CSS를 사용해야 하는 이유를 이미 알고 있는 독자를 대상으로 하여 고급 기법에 중점을 두고 설명을 합니다.
기본적인 (X)HTML과 CSS을 알고 있다면 누구에게나 도움이 될 수 있습니다. 하지만 아직 독자가 아직 전문가는 아니라고 가정하고 진행하므로, CSS 디자인에 이제 막 발을 들여놓았든지 CSS 사이트 개발 경력이 몇 년인지에 관계 없이 이 책이 도움이 될 것입니다. CSS 개발 경험이 있다면 대부분 내용을 이해할 수 있을 것입니다. 이 책은 실용적이고 실제 경험에서 비롯된 조언과 예제를 정리하고 있어서 최신 CSS 디자인을 마스터하도록 도울 것입니다.

[ 저자 서문 ]

CSS 관련 자료가 수없이 많이 나오고 있습니다. 그럼에도 불구하고 CSS 관련 게시판에는 이런 질문이 계속 반복됩니다. “가운데 정렬하는 레이아웃은 어떻게 만드나요?” “모서리가 둥근 상자를 만드는 가장 좋은 방법이 뭔가요?” “3단 레이아웃 만드는 방법을 알려주세요.”CSS 디자인 관련 커뮤니티 활동을 하고 있다면 특정 기사나 기법이 소개된 웹 사이트들을 기억하고 있을 것입니다. 하지만 CSS를 처음 접했거나 모든 웹 사이트를 다 읽을만한 시간이 없다면 이런 정보를 다 따라잡기란 쉽지 않습니다.
CSS 관련 기술을 익힌 사람인 경우에도 위치 지정 모델이나 지정 순위 같은 문제를 확실하게 이해하지 못해서 문제에 봉착할 수 있습니다. 왜냐하면 대부분의 CSS 작업자들이 전체 스펙을 완전히 소화하지 못한 상태에서 독학으로 다른 사람이 쓴 글이나 코드를 보고 하나씩 기술을 익혔기 때문입니다. 또한 CSS 명세서는 너무 복잡해서 웹 개발자가 아니라 웹 브라우저 개발자를 위해 작성된 것 같습니다.
그리고 브라우저마다의 특성을 고려해야 한다는 점이 있습니다. 브라우저 버그와 비일관성은 CSS 작업자에게 가장 큰 골칫거리입니다. 불행하게도 대부분의 이런 버그들은 문서화가 잘 되어있지 않고 해결방법도 몇몇 사람만 알고 있습니다. 특정 방법을 사용하지 않으면 브라우저에 따라 다른 결과가 나올 수 있습니다. 해결했다 하더라도 어떤 브라우저에서 어떤 문제가 발생했는지 일일이 기억할 수도 없습니다. 바로 이런 이유 때문에 이 책을 쓰게 됐습니다. 이 책은 처음부터 시작해서 차례대로 읽어도 되고, 컴퓨터 옆에 놔두고 필요할 때마다 팁이나 기법을 찾아보는 방식으로 활용하셔도 됩니다. 원하는 대로 활용하세요.


▶▷ 한국어판 출간에 붙여
『CSS Mastery』 한국어판을 읽고 계시는 여러분께 먼저 “Gomapsupnida”라는 인사를 전합니다. 2005년도에 이 책을 쓸 당시에는 이 책이 한국까지 날아갈 거라는 생각을 하지 못했는데, 여러분께 선보일 수 있다니 너무나 기쁘군요.
웹 표준은 국제적인 개념임에도 불구하고 지금까지는 대부분 영어권 개발자들의 관심사였습니다. 최근까지 이런 주제를 다루는 정보가 대부분 영어로 된 블로그나 출판물 위주였다는 게 주된 이유라고 생각합니다. 이 책이 번역되어 독자층을 더 넓힐 수 있고, CSS의 장점을 알게 될 개발자들이 더 많아질 거라는 사실에 흥분된 감정을 감추기 힘드네요. 앞으로도 웹 표준과 관련된 좋은 책들이 모두 한국에 소개되기를 바라며, 이 책이 그 과정에 작은 역할을 하게 되길 희망합니다.
부디 이 책을 재미있게 읽으시기 바라며, 여러분들의 많은 의견을 부탁합니다.

앤디 버드

[ 저자 소개 ]

앤디 버드 Andy Budd
앤디는 영국 브리튼에 거주하는 사용자 경험 디자이너이자 웹 표준 개발자입니다. 웹 디자인 컨설팅 회사인 클리어레프트(http://www.clearleft.com) 사의 크리에이티브 디렉터로서, 매력적이고 접근성 높은 웹 표준 호환 웹 사이트 구축 작업을 즐기고 있습니다. 그의 홈페이지는 www.andybudd.com이며 최근 웹 디자인 관련 이슈에 대해서 지속적으로 글을 올리고 있습니다. 앤디는 국제 디자인 컨퍼런스, 워크샵, 교육 강사로 활동하고 있으며 영국의 첫 번째 웹 2.0 컨퍼런스를 진행하기도 했습니다(http://www.dconstruct.org). 업계에 필요한 수준 높은 교육에 대한 열의 때문에 스킬스왑(http://www.skillswap.org)이라는 교육/네트워킹 커뮤니티를 운영하고 있기도 합니다. 또한 웹 표준에 대한 인식을 넓히고 장려하기 위한 웹 표준 어워드(http://www.webstandardsawards.com) 준비를 돕고 있습니다.

캐머론 몰 Cameron Moll
캐머론은 업계에 가장 많이 알려진 뉴 미디어 디자이너 중 한 명으로 다양한 웹 디자인, 우아한 인터페이스, 깔끔한 마크업 작성에 뛰어난 실력을 지니고 있습니다. 수많은 웹 사이트의 디자인과 리뉴얼에 참여하면서 보여준 다양한 기법은 많은 사이트에 영향을 줬습니다. 캐머론이 지닌 마케팅 경험 배경과 디자인 감각은 새로운 비주얼 경험을 제시할 수 있는 역량이기도 합니다. NPRNational Public Radio, 커뮤니케이션 아트, 비어 등 유명한 웹 사이트 작업을 통해 인정을 받았습니다. 그의 개인 사이트인 CameronMoll.com은 관계 깊은 대화를 통해 디자인 방법을 제공하고 있으며 그의 작업 소스 파일을 다운로드 받을 수 있습니다.

사이먼 콜리슨 Simon Collison
사이먼은 Agenzia(http://www.agenzia.co.uk)의 리드 웹 개발자입니다. 그는 레코드 회사, 유명 음악 아티스트, 비주얼 아티스트, 일러스트레이터를 위한 수많은 웹 프로젝트를 수행했습니다. 사이먼은 이런 작업을 하면서 모든 웹 사이트에서 웹 표준에 기반한 접근성과 사용성을 중시한 제작방법이 중요해 질 것을 예견했습니다. 사이먼은 CSS 기반의 웹 사이트인 스타일갈라에 주기적으로 리뷰를 올리고, 그의 개인 블로그인 www.collylogic.com에 웹 표준, 음악, 영화, 여행과 같은 다양한 이야기를 올리고 있습니다.


[ 기술 감수자 소개 ]

몰리 홀즈쉬랙 Molly E. Holzschlag 몰리는 매우 유명한 웹 표준 전도사입니다. 웹 표준 관련 교육과 저술활동을 하고 있습니다. 그녀는 현재 웹 표준 프로젝트WaSP의 그룹 리드를 맡고 있으며 W3C의 GEO 워킹 그룹에서 활동하는 전문가입니다. 30여권의 책을 저술했으며 가장 최근작은 데이브 셰어와 공저한 『The Zen of CSS Design』입니다. 이 책은 csszengarden.com의 디자인 중에서 가장 진보 적인 디자인을 멋지게 소개하고 있습니다. 개인 웹 사이트인 http://molly.com을 통해서 몰리의 일상을 엿볼 수 있습니다.


[ 역자 서문 ]

첫 번째 웹 표준 책인 『실용예제로 배우는 웹 표준』이 나온 지 1년이 넘었고, 벌써 세 번째 웹 표준 책을 낸다.
그간 어떤 변화가 있었을까? 다음 커뮤니케이션과 야후 코리아의 첫 페이지가 웹 표준으로 새 옷을 입었다. 『실용예제로 배우는 웹 표준』 부록에 실린 태터툴즈는 관리자용 대시보드도 웹 표준으로 입힌 1.1을 선보였다. 웹 표준 테마를 베스트셀러로 올린 에이콘출판사도 웹 표준 기반의 사이트가 됐다. 『웹 2.0을 이끄는 방탄웹』을 리뷰해 준 김승욱 군은 드림위버와 단짝친구였던 과거를 버리고 UI 개발자라는 새로운 잡 타이틀을 얻게 됐다.
2003년에 순수 CSS 기반 웹 디자인을 하겠다고 했던 때를 돌아볼 필요가 있다. 영어로 된 A List Apart를 비롯한 흩어진 수많은 사이트와 에릭 마이어의 CSS 레퍼런스만으로 실제 페이지를 만들어야 하는 웹 디자이너들에게 너무나 벅찬 일이었기에, 이 책에 나오는 다음과 같은 말에 이렇게 공감이 갈 수가 없다.
CSS는 쉽게 입문할 수 있지만 완벽하게 이해하기는 어려운 기술입니다. 처음 CSS 기반의 웹사이트를 만들면 원인을 알 수 없는 브라우저 버그와 비호환성때문에 어려움을 겪게 됩니다. 이런 문제를 해결하기 위해 수많은 웹사이트에서 제공하는 엄청난 기법과 정보를 다 봐야만 할 것 같은 느낌을 받기도 합니다. 문제 원인을 찾는 건 끝이 없어 보이고, 하나씩 배워가자니 공부할 게 너무나 많습니다.
웹 표준의 장점만 얘기하고, 이런 사이트를 만들기가 얼마나 힘든 과정을 거쳐야 하는지는 남의 일이 되어버렸다. “웹 표준을 지키면 될 것을! 쯔쯔쯔…”라고 한 줄 악플을 남기고 떠나는 고객에게 하다 하다 그렇게 오픈했어야 하는 제작자의 마음을 하소연할 데가 없다. 그 동안 해오던 방식을 바꾸고 웹 표준으로 가자니 너무나 힘들어 강요하지 말라는 얘기가 나오는 판이다. 비용과 시간이 절감되고 작업 프로세스가 바뀐다는 웹 표준의 장점만 보고 온 팀장님의 지시가 야속하다. 아니, 그렇게 떠든 강사를 원망해야 할까.
올해 웹 표준 관련해서 가장 기억에 남고 자랑할만한 일이라면 한국소프트웨어 진흥원과 더블트랙이 진행한 웹 표준 교육이다. 150여명의 웹 표준을 처음 접하는 실무자들 한 명 한 명이 떠오른다. 웹 표준이 단지 기술규격 준수나 웹 브라우저 호환성 차원이 아니라 올바른 웹을 위한 의미임을 알게 된 후에 더 이상 예전 방식을 답습할 수가 없다는 얘기를 듣고 감동을 받았다. 앞서 출간된 책이 없었다면 무엇으로 교육을 진행할 수 있었을까? 첫 걸음부터 이렇게 배우고 시작할 수 있는 방법이 없었다는 걸 생각하면 위에 적은 상황이 그리 놀랍지 않다.
주황색 책, 파란 책에 이어 나온 초록색 책인 『고급 웹 표준 사이트 제작을 위한 CSS 마스터 전략』은 앞서 입문한 두 책의 실용 팁에서 익힌 기술에 확고한 개념을 심어줄 것이다. 오랜만에 스터디 그룹을 짜서 처음부터 끝까지 모든 이론과 예제 완전정복에 도전해 보시라. 부록에 나온 사이트를 한글화해보시라. 어느덧 바뀐 나를 발견할 수 있을 것이다.
이제 앞으로 어떻게 바뀔까? CSS 디자인 코리아 커뮤니티는 1,000여명이 모이게 됐고, 70여명이 오프라인 모임을 두 번이나 가졌다. 이제 더 이상 웹 표준 기반의 웹 제작자들도 외롭지 않다. 웹 표준 가능자 구인 광고만큼이나 몸값을 올려 회사를 옮긴다는 웹 디자이너들을 심심치 않게 보게 된다. 이제 더 이상 혼자 전위 아트를 하는 게 아니다. 열심히 준비한 웹 제작자들이 하나씩 제 자리를 찾아가며 IE-Web으로 뻥 뚫린 우리나라 웹사이트 지도를 한땀 한땀 메꿔나갈 것이다.
책을 보고 ‘오호, 이거야!’를 외치며 만만하게 봤지만, 브라우저에 표시되는 난감한 화면을 보고, 속태우며 밤을 지새우는 웹 사이트 제작자들에게 이 책을 바친다.

[ 역자 소개 ]

박수만
새롭고 쉬운 인터넷 서비스를 만드는 ㈜더블트랙대표이사로 일하고 있다. 한국 웹표준화 프로젝트(www.webstandard.or.kr) 멤버이며, 웹 표준 관련 대표도서인 『실용예제로 배우는 웹 표준』, 『웹 2.0을 이끄는 방탄웹』을 국내에 소개했다. 개인 블로그인 Suman’s shallow thoughts를 통해서 웹 표준 동향 등 새로운 소식을 접할 수 있다. 명지대학교 컴퓨터공학과 학부와 대학원(소프트웨어 공학 전공)을 졸업했다.

[ 추천의 글 ]

웹 디자인의 세계는 놀랍습니다. 똑같은 모양을 만들기 위한 방법이 어림잡아 3,647가지나 됩니다. 그나마도 새로운 방법이 계속 나오고 있어서 이 숫자도 정확하지는 않습니다. 특정 문제를 바로잡는 방법은 한 가지가 아니라 여러 웹 디자이너들이 발견한 수많은 방법들을 이용할 수 있습니다. 이런 방법들을 선택할 수 있기에 웹 디자인은 재미있고 흥미로운 동시에, 너무나 많은 정보 때문에 정신이 없기도 하죠. 이 책은 지나치게 많은 정보에 파묻힌 사람들에게 확실한 안내를 해줄 것입니다.
앤디 버드는 지난 몇 년간 웹 표준 디자인을 위한 많은 글과 디자인을 발표했습니다. 명확하고도 쉽게 따라 해 볼 수 있는 핵심적인 CSS 기법의 설명이 녹아있는 이런 책을 접할 수 있다는 건 정말 행운입니다. 우리 같은 웹 전문가에게는 없어서는 안될 모든 해법과 팁을 한눈에 볼 수 있도록 이 책에 정리해놓았습니다.
제가 어떤 목표를 달성하기 위한 한 가지 방법을 소개하기 위한 저술활동을 해온 반면, 앤디 버드는 저와는 완전히 반대의 접근 방법으로 다양한 방식을 설명하고 있습니다. 예를 들어 링크 스타일을 꾸민다든지, 탭 내비게이션을 만든다든지, 다단 레이아웃을 만드는 다양한 방법 말이죠. 이렇게 일반적인 디자인 요소를 다양한 스타일로 만들 수 있는 기법을 갖춤으로써, 정보에 기반해 올바른 결정을 내릴 수 있도록 준비해둘 수 있을 것입니다.
이뿐만 아니라, 디자이너 두 명의 도움을 받아 이 책에서 설명한 기법을 종합해서 사이트를 만드는 방법까지 다루었습니다. 저는 오래 전부터 캐머론과 사이먼 작업의 팬이었습니다. 이 두 사람이 만든 적용사례를 통해 유동적이고 방탄웹적인 유연한 스타일 해법을 볼 수 있다는 건 정말 대단한 혜택이 아닐 수 없습니다.
자, 그럼 여러분 스스로 3,647가지 방법을 직접 실행해 보면서 CSS를 마스터하시기 바랍니다.

댄 씨더홈 『실용예제로 배우는 웹 표준』, 『웹 2.0을 이끄는 방탄웹』의 저자

 1쇄 오류/오탈자 

[ p8, p12 ]
한국어판 출간에 붙여 → 한국어판 출간에 부쳐

[ p34 마지막 행 ]
HTML 문서에 Strict DTD를 지정한 경우에는 ~ 비표준 확장 모드로 동작합니다.
→ HTML4.01 문서의 경우, strict DTD를 사용하는 DOCTYPE인 경우에는 표준 호환 모드로 동작합니다. transitional DTD와 URI가 지정된 DOCTYPE을 사용하는 경우에는 표준 호환 모드로 동작하지만, URI가 지정되지 않은 transitional DTD일 경우에는 비표준 확장 모드로 동작합니다.

[ p36 첫 번째, 두 번째 코드 ]
text-decaration → text-decoration

[ p37 두 번째 코드 1-2행 ]
text-size → font-size

[ p50 두 번째 코드 1행 ]
'인터넷 익스플로러에서만 ~ 선택자 활용했음' 삭제

[ p65 세 번째 문단 1행 ]
상대 위치를 지정하는 것과 마찬가지고 → 상대 위치를 지정하는 것과 마찬가지로

[ p82 '유동폭 둥근 모서리 상자' 절 2행 ]
세로 방향으로는 늘어날 수 없습니다. → 가로 방향으로는 늘어날 수 없습니다.

[ p86 그림 3-11 수정 ]



[ p89 그림 3-13 상단 소스 ]
margin: -5px 5px 1px -5px;
→ margin: -5px 5px 5px -5px;

[ p101 '길더/레빈 방법' 절 2행 ]
이미지를 끌고 → 이미지를 끄고

[ p132 두 번째 예제코드 5행 ]
background: url(images/divider.gif)
→ background: url(images/mainNavBorder.gif)

[ p192 두 번째 문단 1행 ]
가능한 공간을 최대한 활용하려고할때 글자비례형(elastic) 레이아웃이
→ 가능한 공간을 최대한 활용하려고할때 화면비례형(liquid) 레이아웃이

[ p218 끝에서 2행 ]
position: static;
→ _position: static;

[ p219 두 번째 문단 마지막 행 ]
윈도우용 ID와 오페라 6이하 버전
→ 윈도우용 IE와 오페라 6이하 버전

[ p219 마지막 예제코드 2행 ]
dispaly: static; → dispaly: block;

[ p225 그림 9-2 수정 ]



[ p225 그림 9-3 수정 ]



[ p269 ]
그림 Ⅰ-9
→ 그림 Ⅰ-19


 2쇄 오류/오탈자 

[ p161 본문 1행 ]
"트랙번호" → "연주목록 번호"

[ p191 첫 번째 예제코드 아래로 5~6행 ]
이 값은 본문 영역의 너비인 75를 내비게이션 영역의 너비인 23으로 나누고
→ 이 값은 내비게이션 영역의 너비인 23을 본문 영역의 너비인 75로 나누고

[ p236 본문 3행 ]
200픽셀만큼 패딩을 추가하면 → 200픽셀만큼 마진을 추가하면

[ 찾아보기 수정본 ]
1, 2쇄의 '찾아보기' 절에 오류가 있습니다.
1, 2쇄 도서를 구입하신 분은 아래의 링크에서 수정본 PDF 파일을 다운로드 해주세요.
도서이용에 불편을 드려 대단히 죄송합니다.
PDF 다운로드>>