책 소개
먼저 고백해야겠습니다. 완전무결한 방탄웹이란 세상에 존재하지 않습니다. 이 말을 듣고 바로 책을 던져버리기 전에 잠시만 제 설명을 더 들어주시기 바랍니다. 경찰관이 방탄조끼를 입고 몸을 보호하는 것처럼, 웹디자인을 보호할 수 있는 조치를 취할 수 있을 것입니다. 이 책은 웹사이트에 방탄장치를 붙여 다양한 상황에 유연하게 대처할 수 있는 전략을 제시합니다. 방탄웹이란 완벽하게 방탄이 되는 방탄조끼를 만들기 위해서 지속적으로 노력하지만, 방탄조끼가 100퍼센트 완벽하게 신변보호를 보장해 주지는 않습니다. 그렇다고해서 방탄조끼를 입는 것과 입지않는 것을 비교할 수는 없을 겁니다. 웹사이트 구축 관련 기법에서도 이 규칙은 그대로 적용됩니다. 최대한 다양한 조건에서도 잘 보이는 유연한 웹페이지를 만들기 위해 필요한 단계를 제대로 밟아나갈 때 정말 다른 결과물을 만들 수 있습니다. 즉 지속적인 과정이라는 것입니다. 이를 통해 의미를 살린 XHTML과 CSS 같은 웹 표준을 활용한 멋진 디자인을 좀 더 쉽게 할 수 있습니다. 최근 몇 년간 CSS로 레이아웃을 만든 사이트가 많아지면서 CSS를 제대로 활용하는 방법에 대한 관심도 높아지고 있습니다. 이렇게 CSS 기반의 디자인을 하는 목적은 적은 코드량, 높은 접근성과 유지보수성 등 디자인 관점에서 취할 수 있는 기술적인 장점을 얻고자 하는 데 있습니다. 하지만 단지 CSS와 XHTML을 사용한다고 해서 저절로 모든 것이 좋아지지는 않습니다. 핵심 내용과 디자인을 분리하여 높은 유연성을 추구할 때, 웹을 이용하는 모든 사람들에게 좀 더 나은 디자인을 제공할 수 있습니다. 자, 그럼 여기서 말하는 유연성이란 무엇을 의미할까요? 왜 중요한가 이 책을 처음 구상할 즈음 훌륭한 웹디자인은 두 가지 요소를 갖춰야 한다는 생각이 들었습니다. 한 가지 요소는 완성된 페이지를 통해서 방문자들이 보게 될 비주얼한 구성요소입니다. 이는 디자이너가 조화롭게 만든 그래픽 이미지, 색상, 타이포그래피로 구성됩니다. CSS 젠 가든(http://www.csszengarden.com)에 방문해보시면 XHTML과 CSS를 이용해서 얼마나 멋진 비주얼 디자인을 갖출 수 있는지 쉽게 알 수 있을 것입니다. 훌륭한 웹디자인을 구성하는 두 번째 요소는 방탄웹 특성을 갖도록 구축하는 것입니다. 바로 이 점이 이 책에서 중점적으로 다루고자 하는 요소이기도 합니다. XHTML과 CSS를 쓰면 이런 장점을 쉽게 얻을 수 있습니다. 또한 유연하면서도 쉽게 주변환경에 적응 가능하고 접근성이 높으면서도 멋진 모양을 갖춘 웹디자인을 하기 위해 웹 표준의 장점을 이용할 수 있습니다. XHTML과 CSS 같은 웹 표준 도입이 빠르게 확산되면서 표준의 올바른 활용법과, 가장 적합한 구현 방법에 대해서 설명하는 자료의 필요성도 점점 더 높아지고 있습니다. 이 책의 구성 이 책은 각 장마다 방탄웹을 만드는 방법에 대해 소개합니다. 현재 존재하고 있는 웹사이트의 디자인을 살펴보고, 기존 방식의 문제점을 먼저 살펴봅니다. 그러고 나서 XHTML과 CSS를 활용해 유연성이 높으면서도 적은 양의 코드를 작성합니다. 대부분 예제는 페이지에 들어가는 디자인 구성요소를 다룹니다. 각 구성요소들이 어떻게 방탄웹을 구성해가는지 쉽게 볼 수 있을 것입니다. 마지막 장에서는 앞서 살펴본 개별 예제들을 이용해서 완벽한 페이지를 하나 구성해볼 것입니다. 각 예제의 기법들을 다시 한번 복습하면서 각각을 한데 모은 페이지를 만들어 보겠습니다. 각 예제들은 단계별로 구성되어 있어서 XHTML과 CSS 초보자라도 쉽게 따라할 수 있습니다. 이런 과정을 통해서 웹 표준이 가져다주는 이점과 각 지침들을 준수할 때 좀 더 견고한 방탄웹이 되는 이유를 설명하겠습니다. ★ 이 책에서 다루는 내용 ★ ■ 키워드, 퍼센트값, em을 이용해 사용자가 직접 글씨 크기를 조절할 수 있는 방법 ■ 글씨 크기와 텍스트 분량에 따라 크기가 늘어나는 내비게이션 메뉴바 만드는 방법 ■ 가로형 디자인 요소를 세로 방향으로 확장하는 방법 ■ 표 모양 디자인에 쓰이는 플로트 활용 방법 ■ 예기치 못한 상황에 대비할 수 있는 박스 모양 디자인 방법 ■ 이미지나 CSS 없이도 무리 없이 내용을 읽을 수 있는 페이지 만드는 방법 ■ 데이터 테이블에서 모양 꾸미기용 코드를 제거하고 CSS로 다시 만드는 방법 ■ 창 크기나 글씨 크기에 관계없이 자유자재로 늘어나는 페이지 레이아웃 만드는 방법 ★ 이 책에 쏟아진 블로그 글과 서평 ★ 웹에 종사하는 모든 사람이 반드시 갖춰야 할 책! 마란츠닷컴 (http://www.maratz.com/) 이 책에서는 웹 표준 기반의 CSS 레이아웃을 만들 때 접할 수 있는 실질적인 문제들을 하나씩 풀어가고 있다. CSS 입문자 모두의 필독서다! 그래픽푸시 (http://www.graphicpush.com/) 가장 아름답고 훌륭한 웹디자인 서적! 트리하우스 매거진 (http://treehousemagazine.com/) 이 책에는 흔한 기술 서적에서는 담아낼 수 없는 특별한 무언가가 있다. 강력함이 느껴지는 책! 데이브 셰어 (http://mezzoblue.com/) 저자 댄 씨더홈은 웹디자이너가 무엇을 필요로 하는지를 정확히 파악하고 글을 써내려갔다. 명확한 그림을 덧붙여 이해하기 쉽게 설명함으로써 디자이너를 위한 필독서로 탄생시켰다. 비주얼GUI (http://www.visualgui.com/) 이 책이 어떠냐고 내게 묻는다면, 좋은 점들만 꼽을 수밖에 없을 것 같다. 이 책은 CSS로 작업하는 실무자에게 꼭 필요한 아주 중요한 책이다. 다니엘 버카 (http://www.deltatangobravo.com/) 언뜻 보기만 해도 이 책은 정말 멋지다. 웹사이트를 제작/재디자인/관리하는 일을 하고 있는 사람들이라면 꼭 알아야 할 내용으로 가득 차 있다. 브래드 바이스 (http://www.bradbice.com/) 저자 댄 씨더홈은 초보자도 쉽게 이해할 수 있도록 어떤 복잡한 문제도 간단하게 요리해내는 요령을 알고 있다. 한편 자세하게 설명함으로써 수준 높은 독자들도 충분히 이해할 수 있게 이끌어내는 비결도 간파하고 있다. 결국 이 책을 읽은 모든 사람을 사로잡고 만다. 로고블로그 (http://www.logohere.co.uk/) 댄의 웹사이트를 연상시키는 아이콘과 화려한 색상을 사용해, 디자인도 멋지고 내용도 참 충실한 책이다. 10점 만점에 9점은 너끈히 줄 만한 책이다. 줄리안 리차드 (http://pen-and-ink.ca/) 의심할 여지 없이 최고의 웹디자인 책이다! AVERNUS (http://avern.us/) ★ 예제 코드 ★ 에이콘출판사 도서정보 페이지(http://www.acornpub.co.kr/book/bulletproof-web2)에서 개정판의 예제 코드를 다운로드 받을 수 있습니다. 원서 파일의 영문 예제와 번역서의 한글 예제 파일을 다운 받아서 zip 파일을 열면 각 장별로 폴더가 정리되어 있습니다. 각 폴더 안에는 완성된 예제와 관련된 html 파일과 이미지 폴더들이 들어 있습니다. 모든 CSS는 간결하게 내용을 볼 수 있게 하기 위해 모든 문서의 태그 안에 넣어 두었습니다. ★ 저자 소개 ★ 댄 씨더홈 댄 씨더홈은 메사추세츠주에 거주하는 웹디자이너이자 작가이며, 작은 디자인 스튜디오인 심플비츠(SimpleBits)의 창업자이기도 합니다. 웹 표준 기반의 웹 디자인 분야에서 널리 알려진 전문가인 저자는 구글, MTV, ESPN, 패스트 컴퍼니(Fast Company), 블로거(Blogger), 오데오(Odeo) 같은 작업을 했습니다. 웹 표준을 기반으로 유연하고 다양한 상황에 적응할 수 있는 디자인을 하는 방법을 자신의 디자인 작업에 적용하고, 이런 기법들에 대해 글을 쓰고 강의를 합니다. 『실용예제로 배우는 웹 표준』과 이 책의 1판, 이렇게 두 권의 베스트셀러 저자입니다. 그가 쓰는 매우 유명한 블로그인 심플비츠(SimpleBits.com)에서는 웹 관련 기술과 일상에 대한 글을 볼 수 있습니다. 또한 우클렐레를 연주하고 야구모자를 즐겨 쓰고 다닙니다. ★ 옮긴이의 말 ★ 개념이 있다/없다 수…
목차펼치기접기
1장 글씨 크기를 내 마음대로 27 흔해 빠진 구축방식 30 방탄웹이 아닌 이유 31 최적의 방법 선택하기 33 길이 단위 34 상대크기 키워드 34 퍼센트값 35 절대크기 키워드 35 방탄웹으로 만들려면? 36 키워드 설명 36 픽셀 고정은 이제 그만 37 두 가지 장애물 38 단순화된 박스모델 핵 41 방탄웹이 좋은 이유 42 다음 단계 43 기본 글씨 크기 지정 43 퍼센트값을 이용해서 기본 크기와 다른 크기 지정하기 44 키워드값과 퍼센트값 사용 48 글씨 크기값을 정확하게 잡아가기 48 퍼센트값을 겹쳐 쓸 때 유의할 점 50 퍼센트값을 이용해 일관성 유지하기 52 em 단위를 이용한 글씨 크기 조정방법 53 요약 56 2장 자유롭게 크기가 조절되는 내비게이션 메뉴바 59 흔해 빠진 구축 방식 62 탭 구현방식 62 롤오버 효과 63 방탄웹이 아닌 이유 64 용량 크기 문제 64 접근성 문제 65 크기 조절 문제 65 유지보수 문제 65 방탄웹으로 만들려면? 66 스타일 미적용 시 모습 67 작은 이미지 두 개면 오케이 67 스타일 적용 68 플로트를 추가로 지정해 문제 해결하기 69 탭 모양 꾸미기 71 배경 이미지 지정 72 바닥 테두리선 추가 74 마우스오버 효과 주기 75 선택된 상태 표현하기 76 방탄웹이 좋은 이유 77 em을 적용해서 개선하기 78 그 밖의 사례 소개 80 모질라 80 슬랜츠 81 ESPN 검색 82 요약 84 3장 자유자재로 높낮이가 조절되는 행 만들기 87 흔해 빠진 구축 방식 90 방탄웹이 아닌 이유 91 불필요한 이미지 사용 91 고정된 높이값 92 복잡한 코드 93 방탄웹으로 만들려면? 93 마크업 구조 94 각 요소에 id 부여하기 95 스타일 미적용 시 모습 96 배경색 지정 97 위치 지정 97 사라진 배경색 99 디테일한 디자인 요소 추가 101 사방을 둥근 모서리로 만들기 104 텍스트와 링크 모양 106 마지막 단계 108 인터넷 익스플로러 7에 맞추기 110 방탄웹이 좋은 이유 111 구조와 디자인의 분리 112 고정되지 않은 높이 112 세로 확장 사례 하나 더 113 마크업 115 이미지 두 개 준비하기 116 CSS 적용 117 자동 확장기능 118 요약 119 4장 나만의 플로트 활용 비법 121 흔해 빠진 구축 방식 124 방탄웹이 아닌 이유 126 방탄웹으로 만들려면? 127 최적의 구조를 결정해 보자 128 정의 리스트 사용 129 마크업 구조 130 스타일 미적용 시 모습 132 외곽 영역 꾸미기 133 사진 이미지를 마크업하자 134 기본 스타일 적용하기 135 이미지 자리 잡기 140 양쪽 끝에 띄우기 141 설명문의 길이가 짧아도 모양 유지하기 144 플로트 자체 해제 방식 146 멋지게 꾸미는 마무리 152 이미지 정렬 방식 155 표 모양 만들기 157 배경 이미지 만들기 161 그 밖의 플로트 해제 방법 164 생성된 컨텐트를 이용한 쉬운 해제 방법 166 방탄웹이 좋은 이유 171 요약 172 5장 깨지지 않는 상자 만들기 175 흔해 빠진 구축 방식 178 방탄웹이 아닌 이유 181 방탄웹으로 만들려면? 182 마크업 구조 183 이미지 준비 전략 184 스타일 입히기 186 방탄웹이 좋은 이유 190 그 밖의 둥근 모서리 기법 소개 191 브라우즈 해피 사례 192 박스 힌팅 201 둥근 모서리가 한 개 있는 상자 201 모서리 힌팅 206 늘어나는 화살표 207 제약이 많은 환경에서 새로운 아이디어가 나온다 209 요약 209 6장 이미지나 CSS 없이도 볼 수 있게 하기 211 흔해 빠진 구축 방식 214 방탄웹이 아닌 이유 217 방탄웹으로 만들려면? 219 방탄웹이 좋은 이유 220 스타일 유무 여부에 관계없는 디자인 224 10초 만에 하는 사용성 검사 224 흔해 빠진 구축 방식 225 방탄웹으로 만들려면? 227 디그더그 테스트 230 방탄웹을 만들기 위한 도구 소개 231 패블릿 231 웹 개발 확장기능 툴바 234 웹 접근성 툴바 236 파이어버그 236 유효성 검사도 하나의 도구 237 요약 242 7장 쉽게 변환할 수 있는 테이블 만들기 243 흔해 빠진 구축 방식 246 방탄웹이 아닌 이유 248 방탄웹으로 만들려면? 249 마크업 구조 250 스타일 적용하기 257 방탄웹이 좋은 이유 273 요약 275 8장 유동적인 글자비례형 레이아웃 만들기 277 흔해 빠진 구축 방식 280 방탄웹이 아닌 이유 282 남용되는 코드 282 끔찍한 유지보수 283 컨텐트 표시 순서 문제 283 방탄웹으로 만들려면? 285 마크업 구조 285 다단 레이아웃 만들기 286 스타일 적용하기 289 단 간격 지정 296 단 여백 지정 299 최소/최대 너비값 지정 305 이동하는 가짜 단 만들기 310 3단 레이아웃 만들기 315 방탄웹이 좋은 이유 325 em 단위 기반의 레이아웃 326 글자비례형 레이아웃 사례 326 마크업 구조 329 CSS 331 일관성을 유지하는 것이 이상적 334 유의할 점 - 스크롤바 334 요약 335 9장 방탄웹 구축 종합완결편 337 목표 설정 340 방탄웹이 좋은 이유 341 유동적인 레이아웃 341 글씨 크기를 마음대로 343 이미지나 CSS 없이도 볼 수 있는 페이지 344 다국어 버전 웹사이트 제작 346 기초 공사 348 마크업 구조화 348 기본 스타일 지정 350 레이아웃 구조 지정 351 사이드바 메뉴 배경 만들기 352 헤더 영역 355 이벤트 공지사항 영역 꾸미기 358 단 간격 조정 360 컨텐트 영역 꾸미기 362 사이드바 메뉴 영역 꾸미기 372 푸터 영역 꾸미기 379 인터넷 익스플로러를 위한 CSS 문제 해결 381 핵 관리 방법 382 푸터 문제 해결 방법 383 자체 플로트 해제 문제 해결 방법 384 마치면서 385
출처: 국립중앙도서관 서지정보
리뷰 남기기
로그인하면 리뷰를 남길 수 있어요.
리뷰 0개
아직 리뷰가 없어요.