실용예제로 배우는 웹 표준 : 기획자, 개발자, 디자이너가 함께 보는 XHTML + CSS 활용가이드

실용예제로 배우는 웹 표준 : 기획자, 개발자, 디자이너가 함께 보는 XHTML + CSS 활용가이드

http://www.amazon.com/exec/obidos/tg/detail/-/1590593812/
http://kangcom.com/common/bookinfo/bookinfo.asp?sku=200507280001

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

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

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

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

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

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

[CODE] 1장 리스트 - 장보러 가기 - 퀴즈 시간 - 방법 A:
사용하기 - 방법 B: 불릿 활용하기 - 방법 C: 좀 더 정확하게 - 방법 D : 잘 감싸기 - 불릿 감추기 - 불릿 이미지를 넣어 더 예쁘게 - 내비게이션 메뉴바로 활용해보기 - 다양한 미니탭 모양 바꿔보기 2장 머릿글 (Heading) - 문서 제목을 마크업하는 가장 좋은 방법은? - 방법A: 의미를 살린 방법? - 방법B : p와 b 조합하기 - 스타일 입히기 어려움 - 방법C : 스타일과 내용 모두 살리기 - 스타일 입히기 쉬움 - 기본 스타일 혐오증 - 검색엔진이 좋아하는 방식 - 머릿글 순서에 대해서 - 부록 - 스타일링 기초 - 배경 지정하기 - 배경과 테두리선 - 배경 이미지를 바둑판식으로 깔기 - 아이콘 지정하기 - 손쉬운 업데이트 - 카멜레온 효과 - 태그 정렬하기 3장 테이블을 쓰면 안된다고? - 테이블이 적합한 경우 - 테이블 기초 - 요약 덧붙이기 - 테이블 헤드 - 헤더와 데이터의 관계 - abbr 속성 사용하기 - , , - 테이블 사용은 나쁘다? - 부록 - 격자 만들기 - 간격 붙이기 - 좀 더 간결한 방법 - 여백 지정하기 - 헤더 모양 수정하기 - 헤더에 배경 이미지 지정하기 - 조각 이미지 사용하기 - ID에 아이콘 지정하기 - 규칙을 합쳐 용량 줄이기 4장 인용문 (Quotation) - 방법 A : 의미를 살리지 못한 표현 - 방법 B : 불필요한 클래스 지정 - 방법 C: 최선의 선택,

- 스크류 드라이버로 망치질하는 꼴 - 부록 - 더 많은 정보를 제공하는 cite 속성 - 인라인 인용문 (inline quotation) - 따옴표를 붙일 필요없음 - 인라인 인용문 겹쳐쓰기 -

스타일 입히기 - 배경이미지로 따옴표 처리 - 이미지 3개 - HTML 코딩하기 - 3개의 엘리먼트와 3개의 배경 이미지 5장 폼 (Form) - 폼을 마크업하는 방법에는 어떤 것이 있나요? - 방법 A : 테이블 이용하기 - 방법 B : 테이블 쓰지 않기. 하지만 뭔가 답답한 방법. - 방법 C : 단순하고 접근성이 높은 방법 - 태그 - 을 사용하는 이유 - 방법 D : 폼 정의하기 - 스타일 정의하기 - 부록 - 탭인덱스 - 탭인덱스를 쓰는 이유 - 자주 사용하는 폼을 위한 액세스 키 - 검색창에 사용하기 - 폼 꾸미기 - 텍스트 입력창의 너비 지정하기 - 을 사용하여 글꼴 모양 바꾸기 - 중복요소 생략하기 -

로 폼 요소를 묶기 -

과

꾸미기 -

입체 효과 표시 6장 , 등 구문표현용 엘리먼트 - 문서모양 vs. 문서구조 - 과 이 와 보다 나은 이유 - W3C의 의견 - 방법 A - 방법 B - 올바른 사용예 - 의 사용법 - 방법 A - 방법 B - 특정 단어나 문구의 강조 - 굵은 체 혹은 이탤릭체로 지정하는 경우 - 글꼴 굵기 지정 - 이탤릭 체 지정 - 굵은 이탤릭 체로 지정하는 경우 - 태그 사용 - 클래스를 이용하여 강조 - 요약 - 부록 - 문구 엘리먼트 - 태그 - 활용방법 - 태그 스타일 입히기 - 구조화의 장점 살리기 - 과 - 정의는 한번만 - 모양 꾸미기 - 호환성 여부 - - - - 7장 앵커 (Anchor) - 웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은? - 방법 A : name 속성은 있고 내용은 없는 태그 사용하기 - 방법 B: name 속성과 내용을 모두 사용하기 - 문서 내의 다른 태그 스타일에 영향 - name 속성에 다양한 문자 사용하기 - 방법 C: name 속성을 사용하지 않기 - 일석이조 - 구버전의 웹 브라우저 지원하지 않음 - 방법 D: 가장 안전한 방법 - 같은 이름 쓰기 - 부록 - title 속성 이용하기 - 활용 예제 - 툴팁 사용하기 - 스크린 리더 지원 - 링크 꾸미기 - 배경 지정하기 - 링크 밑줄을 선으로 표시하기 - 방문한 링크 꾸미기 - Hover 효과주기 - 활성 상태 지정하기 - LoVe/HAte 법칙 - 닻을 들어올리며 8장 리스트 고급기능 - 번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은? - 방법 A:

사용하기 - 숫자 놀이 - 불릿 기호 - 방법 B:
사용하기 - 자동 번호 매기기 - 줄 바뀜 문제 II - 리스트 유형 - 용어와 설명 묶음을 마크업하는 가장 좋은 방법은? - 방법 A - 방법 B - 구조화를 통해 쉽게 스타일 입히기 - 아이콘 추가하기 - 그 밖의 응용 - 부록 - 각 파트에 id 부여하기 - 숫자 모양 만들기 - CSS에 숫자 추가하기 9장 마크업 용량 줄이기 - 웹 표준으로 구축하면 마크업 용량을 줄일 수 있을까? - 하위 선택자 (Descendant selectors) - 방법 A: 클래스 정의 - 방법 B : 좀더 자연스럽게 - 문맥을 고려한 CSS 사용 - 확장해보기 - 적은 클래스, 쉬운 관리 - 불필요한
제거하기 - 방법 A :
사용사례 - 방법 B :
제거하기 - 기타 예제 10장 CSS 적용하기 - CSS를 문서에 어떻게 적용하나요? - 방법 A :