Monday, July 11, 2005
국내최초! 웹 표준 도서 출간 소식
이 글에 트랙백을 남겨주신 분들 중에서 공정한 추첨을 통해 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장 다음 단계로 나가기
- 이제 어디로 가야 할까요?
- 관련 기관 및 발행지
- 영향력있는 블로그
- 관련 도서
- 맺는 말
