국내최초! 웹 표준 도서 출간 소식

단풍의 이미지

Quote:

만박닷컴에서 여러 차례 소개한 바 있는 댄 씨더홈의 Web Standards Solutions http://www.amazon.com/exec/obidos/tg/detail/-/1590593812/ 의 한국어판이 국내에서 최초로 발간되는 웹 표준 단행본이 될 것같습니다. (원서가 얼마나 멋진지는 아마존에서 독자들 평가를 한번 보세요.)

이 글에 트랙백을 남겨주신 분들 중에서 공정한 추첨을 통해 10분에게 한국어판 Web Standards Solutions 책을 보내드리겠습니다. (상황에 따라 10명이 넘을 수도 있습니다.) 당연히 판매되기 전에 받으실 수 있을 겁니다. 8월 중에 출간 예정입니다.

이 책의 한국어판에 대한 질문이나 의견은 sumanpark@gmail.com 으로 해주세요. 출판되기 전에 원고 리뷰를 하고 싶으시다거나 책 제목에 대한 의견을 주신다거나 한국어판 특별부록으로 이런 걸 넣어보자는 제안 등등.

현재 국내 웹 표준이라고 하면 이런 말들이 머릿속에 떠오릅니다. "프로들이 아직 관심을 갖고 있지 않다. 한글 자료가 거의 전무하다. 기초가 될만한 자료보다는 팁 위주의 기사를 많이 본다."

웹 표준에 대한 관심이 높아지고 있지만, 한글 관련 자료는 정말 찾아보기 힘든 상황에서 작은 도움이 되는 자료가 되었으면 좋겠습니다.

댄 씨더홈(Dan Cederholm)은 여러 차례 수상 경력이 있는 웹 디자이너이자 컨설턴트이며 웹 표준 기반의 웹 사이트 디자인 및 구축 분야 전문 저술가입니다.

2003년도에 패스트 컴퍼니(Fast Company)와 인크닷컴(Inc.)의 웹 사이트를 CSS 장점을 최대한 살린 웹 표준 기반으로 리뉴얼 하면서 알려지기 시작했습니다.

또한 댄은 아주 유명한 블로그인 심플비츠(SimpleBits)를 운영하고 있습니다. 이 블로그에서는 웹 관련 기술과 일상적인 이야기들을 전하고 있습니다. 이 블로그와 같은 이름의 컨설팅 회사를 운영하고 있기도 한데, 이 회사에서는 이 책에서 설명한 방법들을 적용하여 단순하고도 매력적인 인터페이스 제작분야에 초점을 맞추고 있습니다.

텍사스 오스틴에서 열린 SXSW 같은 컨퍼런스에서의 강의를 통해 그가 정리한 표준 기반의 마크업과 스타일 테크닉을 전하며 웹 디자인과 개발에 대한 그만의 명쾌한 접근방법을 참가자들과 함께 나누었습니다.

그는 현재 메사추세츠의 살렘에서 아내 케리와 두 고양이와 게코(도마뱀붙이) 한마리와 함께 살고 있습니다.

이 책은 크게 두 부분으로 나누어집니다. 첫번째는 마크업 기본부터 다시 정확하게 이해하고 시작하자는 것이고 두번째는 그런 제대로 된 마크업을 기반으로 CSS로 다양한 스타일을 입힐 수 있는 방법에 대한 설명입니다. 다음 목차를 보시면 아시겠지만 어디선가 한번씩 봤을 법한 내용들이지만 이렇게 잘 정리해 놓은 것을 본 적이 없으실 겁니다.

1장 리스트
- 장보러 가기
- 퀴즈 시간
- 방법 A: <br /> 사용하기
- 방법 B: 불릿 활용하기
- 방법 C: 좀 더 정확하게
- 방법 D : 잘 감싸기
- 불릿 감추기
- 불릿 이미지를 넣어 더 예쁘게
- 내비게이션 메뉴바로 활용해보기
- 다양한 미니탭 모양 바꿔보기

2장 머릿글 (Heading)
- 문서 제목을 마크업하는 가장 좋은 방법은?
- 방법A: 의미를 살린 방법?
- 방법B : p와 b 조합하기
- 스타일 입히기 어려움
- 방법C : 스타일과 내용 모두 살리기
- 스타일 입히기 쉬움
- 기본 스타일 혐오증
- 검색엔진이 좋아하는 방식
- 머릿글 순서에 대해서
- 부록
- 스타일링 기초
- 배경 지정하기
- 배경과 테두리선
- 배경 이미지를 바둑판식으로 깔기
- 아이콘 지정하기
- 손쉬운 업데이트
- 카멜레온 효과
- <img> 태그 정렬하기

3장 테이블을 쓰면 안된다고?
- 테이블이 적합한 경우
- 테이블 기초
- 요약 덧붙이기
- 테이블 헤드
- 헤더와 데이터의 관계
- abbr 속성 사용하기
- <thead>, <tfoot>, <tbody>
- 테이블 사용은 나쁘다?
- 부록
- 격자 만들기
- 간격 붙이기
- 좀 더 간결한 방법
- 여백 지정하기
- 헤더 모양 수정하기
- 헤더에 배경 이미지 지정하기
- 조각 이미지 사용하기
- ID에 아이콘 지정하기
- 규칙을 합쳐 용량 줄이기

4장 인용문 (Quotation)
- 방법 A : 의미를 살리지 못한 표현
- 방법 B : 불필요한 클래스 지정
- 방법 C: 최선의 선택, <blockquote>
- 스크류 드라이버로 망치질하는 꼴
- 부록
- 더 많은 정보를 제공하는 cite 속성
- 인라인 인용문 (inline quotation)
- 따옴표를 붙일 필요없음
- 인라인 인용문 겹쳐쓰기
- <blockquote> 스타일 입히기
- 배경이미지로 따옴표 처리
- 이미지 3개
- HTML 코딩하기
- 3개의 엘리먼트와 3개의 배경 이미지

5장 폼 (Form)
- 폼을 마크업하는 방법에는 어떤 것이 있나요?
- 방법 A : 테이블 이용하기
- 방법 B : 테이블 쓰지 않기. 하지만 뭔가 답답한 방법.
- 방법 C : 단순하고 접근성이 높은 방법
- <label> 태그
- <label>을 사용하는 이유
- 방법 D : 폼 정의하기
- 스타일 정의하기
- 부록
- 탭인덱스
- 탭인덱스를 쓰는 이유
- 자주 사용하는 폼을 위한 액세스 키
- 검색창에 사용하기
- 폼 꾸미기
- 텍스트 입력창의 너비 지정하기
- <label>을 사용하여 글꼴 모양 바꾸기
- 중복요소 생략하기
- <fieldset>로 폼 요소를 묶기
- <fieldset>과 <legend> 꾸미기
- <legend> 입체 효과 표시

6장 <strong>, <em> 등 구문표현용 엘리먼트
- 문서모양 vs. 문서구조
- <strong>과 <em>이 <b>와 <i>보다 나은 이유
- W3C의 의견
- 방법 A
- 방법 B
- 올바른 사용예
- <em>의 사용법
- 방법 A
- 방법 B
- 특정 단어나 문구의 강조
- 굵은 체 혹은 이탤릭체로 지정하는 경우
- 글꼴 굵기 지정
- 이탤릭 체 지정
- 굵은 이탤릭 체로 지정하는 경우
- <span> 태그 사용
- 클래스를 이용하여 강조
- 요약
- 부록
- 문구 엘리먼트
- <cite> 태그
- 활용방법
- <cite> 태그 스타일 입히기
- 구조화의 장점 살리기
- <abbr>과 <acronym>
- 정의는 한번만
- 모양 꾸미기
- 호환성 여부
- <code>
- <samp>
- <var>
- <kbd>

7장 앵커 (Anchor)
- 웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은?
- 방법 A : name 속성은 있고 내용은 없는 태그 사용하기
- 방법 B: name 속성과 내용을 모두 사용하기
- 문서 내의 다른 <a> 태그 스타일에 영향
- name 속성에 다양한 문자 사용하기
- 방법 C: name 속성을 사용하지 않기
- 일석이조
- 구버전의 웹 브라우저 지원하지 않음
- 방법 D: 가장 안전한 방법
- 같은 이름 쓰기
- 부록
- title 속성 이용하기
- 활용 예제
- 툴팁 사용하기
- 스크린 리더 지원
- 링크 꾸미기
- 배경 지정하기
- 링크 밑줄을 선으로 표시하기
- 방문한 링크 꾸미기
- Hover 효과주기
- 활성 상태 지정하기
- LoVe/HAte 법칙
- 닻을 들어올리며

8장 리스트 고급기능
- 번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은?
- 방법 A: <ul> 사용하기
- 숫자 놀이
- 불릿 기호
- 방법 B: <ol> 사용하기
- 자동 번호 매기기
- 줄 바뀜 문제 II
- 리스트 유형
- 용어와 설명 묶음을 마크업하는 가장 좋은 방법은?
- 방법 A
- 방법 B
- 구조화를 통해 쉽게 스타일 입히기
- 아이콘 추가하기
- 그 밖의 응용
- 부록
- 각 파트에 id 부여하기
- 숫자 모양 만들기
- CSS에 숫자 추가하기

9장 마크업 용량 줄이기
- 웹 표준으로 구축하면 마크업 용량을 줄일 수 있을까?
- 하위 선택자 (Descendant selectors)
- 방법 A: 클래스 정의
- 방법 B : 좀더 자연스럽게
- 문맥을 고려한 CSS 사용
- 확장해보기
- 적은 클래스, 쉬운 관리
- 불필요한 <div> 제거하기
- 방법 A : <div> 사용사례
- 방법 B : <div> 제거하기
- 기타 예제

10장 CSS 적용하기
- CSS를 문서에 어떻게 적용하나요?
- 방법 A : <style> 엘리먼트 사용하기
- 방법 B : 외부 스타일 시트 사용하기
- 방법C : @import 사용하기
- 방법B와 방법C를 조합한 다중 스타일시트 활용법
- 카멜레온 효과
- 과연 어떻게?
- 일반(lo-fi) 스타일과 고급(hi-fi) 스타일 사용하기
- 중요한 순서 지정
- 캐스케이드 효과 활용하기
- 방법 D : 인라인 스타일
- 마크업에 묶여버리는 스타일
- 지속적인 캐스케이딩 효과
- 대체 스타일 시트 활용하기
- 스타일시트 전환 응용하기
- DOM이 주는 혜택

11장 인쇄를 위한 스타일
- 인쇄를 위한 스타일은 어떻게 지정하나요?
- 미디어 타입
- 대상을 지정하는 두 가지 방법
- 방법A : media 속성
- 방법B : @media 혹은 @import
- head에 포함하거나 외부 파일로 저장하기
- 여러 값 지정하기
- 화면 스타일과 인쇄 스타일을 분리하기
- 인쇄용 스타일 시트 만들기
- 포인트 단위 사용하기
- 불필요한 항목을 숨겨 잉크 아끼기
- 링크 표시하기
- 텍스트 링크하기
- 인쇄 미리보기로 잉크 아끼기
- 인쇄용 스타일시트가 적용된 결과 모양

12장 CSS로 레이아웃 잡기
- CSS로 2단 레이아웃을 만드는 방법
- 방법 A : 사이드바를 띄우기
- 방법 B : float을 두번 사용하기
- 방법 C : 컨텐트 띄우기 (floating the content)
- 방법 D : 포지셔닝
- 3단 레이아웃 디자인
- 부록
- 박스모델 문제
- 박스모델 문제 해결
- 오페라 브라우저를 위한 방법
- 가짜 컬럼
- 세로로 늘이기
- CSS 작성 방법
- 컬럼 위치 지정하기

13장 텍스트를 위한 스타일
- 텍스트를 어떻게 쿨하게 꾸밀 수 있나요?
- 사용자마다 다른 웹 브라우저 기본 글꼴
- 줄 간격(line height) 조정하기
- font-family에 글꼴을 모아놓기
- 글꼴명에 공백문자가 있을 때
- 커닝 Kerning (글자 간격 letter-spacing)
- 드랍캡
- 텍스트 정렬
- 텍스트 변형하기
- 소형 대문자 (sall caps)
- 문단 들여쓰기
- 요약

14장 이미지 바꿔치기
- CSS로 텍스트 대신 이미지를 표시하려면 어떻게 해야 하나요?
- 완벽한 방법은 아직
- 사용에 유의
- 방법 A : FIR (Fahrner Image Replacement)
- 방법 B : LIR(Leahy/Langrdige Image Replacement)
- 방법 C : 파크 방법(Phark Method)
- 로고 모양 바꾸기
- 저해상도/고해상도
- 예제
- 로고 이미지 세트
- 하이퍼 링크 스타일 지정
- 접근성이 뛰어난 이미지 탭 롤오버
- 문제
- 해결책
- 마크업 : 하나의 리스트로 해결
- 3개의 상태를 가진 이미지
- 이것을 가능케 해주는 CSS
- 호환성
- 정리하기

15장 <BODY>를 위한 스타일
- 2단 또는 3단으로 자유롭게 변경하기
- 마크업과 스타일 구조
- 기사 페이지
- 초기 인덱스 페이지
- <body>에 클래스 지정
- 그 밖의 다양한 활용 방안
- 사용자가 머물고 있는 위치 알리기
- 내비게이션바 구현을 위한 리스트
- 각 파트 지정
- CSS의 마법

16장 다음 단계로 나가기
- 이제 어디로 가야 할까요?
- 관련 기관 및 발행지
- 영향력있는 블로그
- 관련 도서
- 맺는 말

광고인가? 암튼 반가운 소식인거 같아서 올려 봅니다.

lacovnk의 이미지

목차만 봐도, 그간 웹사이트 만들면서 어떡해야 잘만들었다고 소문나지?-_- 하는 물음에 대한 답이 많군요 ㅎㅎ

... 학교 도서관에 구입신청이나 할까 -_-;

정신차리고 보니 집에 웹 관련책이 많다는 생각이 들어서 말이죠.. orz (그래봤자 몇권 안되지만; )

oldbell의 이미지

정말 가려운 곳을 긁어주는 책이 될 듯 합니다.
HTML 코딩하는 사람들에게 꼭 필요한 책이 되겠네요.

디자이너에게도 HTML 코더에게도, 개발자에게도 유용하게 쓰일겝니다.

개인적인 구매 외에도 도서관에 사달라고 해야겠네요.

인생의 무게를 느껴라. 아는 만큼 보이는게다.

jbkdd의 이미지

C코딩만 죽어라 하다보니 웹에 대한 지식이 전무하군요.
기회있으면 한번 구해서 읽어봐야 겠습니다.

coro328의 이미지

khris의 이미지

아아 지르고싶다...

───────────────────────
yaourt -S gothick elegant
khris'log

songgun의 이미지

이미 질러버렸습죠. :wink:

그나저나 에이콘에서 좋은 책들을 많이 번역하는군요.
제게는 정말 신선하게 느껴집니다.

1day1의 이미지

보면 관심도가 상당한 것 같습니다.
그만큼 이런류의 책이 소개가 덜 된 것도 원인이겠죠.

바로 예약 주문 하러 갑니다. ^^

F/OSS 가 함께하길..

creativeidler의 이미지

오, 정말 HTML 개발자에게 필수 도서가 되겠군요. 영어 문서의 바다에서 헤매던 사람들에겐 정말 희소식일 듯.

exilan의 이미지

언제 그런걸 원서로 공부하냐고 투덜대는 개발자에게 딱히 해결책을 제시해줄 수 없어 고민하던 차에, 반갑기 그지 없습니다.
그렇잖아도 얘기하기만 하면 ActiveX 책은 널렸는데, 웹 표준은 볼만한 번역서 한 권 없다고 얘기하면 뭐라 반론하기가 그랬거든요. 사실 저로서도 이러저러하지 않냐 수준의 반론만 펴고 요대로 하면 표준이다 라고 권할 만한 지식도 없었구요.

나오기만 하면 얼른 사다가 저도 열심히 들여다 보고, 디자이너랑 웹마스터 맡으신 분께도 꼭 보라고 권하렵니다.
아, 회사 자료실에도 사놓으라고 권해야겠네요.

8) 8)

동지여, 우리가 있다!