웹 표준 핵심가이드북 XHTML+CSS (웹 접근성에서 크로스 브라우징까지)

김데레사

저자 김데레사는 현) 삼성 SDS 멀티캠퍼스 전임교수. 현) 한국생산성본부 전임교수. 현) 행정안전부 웹 접근성 과정 출강. 현) 한국인터넷진흥원 웹 접근성 자문. 전) 계원디자인예술대학 멀티미디어 디자인학과 출강.

Part 01 웹 접근성과 웹 표준

Section 01 웹 접근성(web accessibility)
웹 접근성의 개요
웹 접근성 준수 시 기대 효과
웹 콘텐츠 접근성 지침(WCAG)
인지성(Perceivable)
운용성(Operable)
이해성(Understandable)
내구성(Robust)
장애인 차별 금지 및 권리 구제 등에 관한 법률의 이해

Section 02 웹 표준(web standards)
웹 표준이란?
웹 표준 관련 기술의 소개
웹 표준의 장점
웹 브라우저와 웹 표준

Part 02 견고한 웹을 위한 구조 설계(XHTML)

Section 01 시작하기 전에
저작도구 설치 및 환경설정
파이어폭스 및 부가 기능 설치

Section 02 웹(World Wide Web)
웹(WWW) 서비스
웹 프로그래밍의 이해
시맨틱 웹

Section 03 구조를 위한 XHTML
마크업 언어의 분류
XHTML 서식
XHTML 구성 요소
XHTML 문서의 기본 구조
블록 요소와 인라인 요소
문서형 정의 및 선언, 네임 스페이스, 휴먼 랭귀지
문서형 정의 및 선언(DTD)
네임 스페이스
휴먼 랭귀지

Section 04 XHTML 요소
문서 정보 및 문서 제목
문서 정보와 문자 코드 세트(meta)
문서 제목(title)
문단 관련 요소
제목
단락(p)
줄바꿈(br)
주소(address)
구분선(hr)
링크와 이미지
하이퍼링크(a)
이미지(img)
이미지 맵(map, area)
목록 관련 요소
비순서형 목록(ul)
순서형 목록(ol)
정의형 목록(dl)
텍스트 관련 요소
강조(strong & em)
인용문(blockquote & q)
축약어 및 두문자어(abbr & acronym)
추가글 및 삭제글(ins & del)
첨자(sup & sub)
테이블 관련 요소
테이블 요소(table, tr, th, td)
셀 병합(colspan 속성, rowspan 속성)
테이블 제목 및 요약문(caption & summary)
열 그룹화 요소(colgroup, col)
행 그룹화 요소(thead, tfoot, tbody)
제목 셀과 내용 셀의 연관성(scope, id, headers 속성)
폼 관련 요소
폼이란?
폼 요소(form)
폼 요소 그룹화 및 제목(fieldset, legend)
레이블(label)
다양한 폼 컨트롤(input)
목록 상자(select, option, optgroup)
여러 줄 글상자(textarea)
버튼 요소(button)
인라인 프레임과 개체 삽입
인라인 프레임(iframe)
개체 삽입(object)
스타일과 스크립트
내부 스타일 적용(style)
스크립트 삽입(script)
그룹화 요소
블록 그룹화 요소(div)
인라인 그룹화 요소(span)

Part 03 자유롭고 창의적인 디자인 기법(CSS)

Section 01 CSS 디자인
CSS란?
Acid Test

Section 02 CSS 서식
Rule set
CSS 적용하기
External Style Sheet(외부 스타일시트)
Internal Style Sheet(내부 스타일시트)
Inline Style Sheet(인라인 스타일시트)

Section 03 CSS 선택자
Type 선택자
전체 선택자
class 선택자와 id 선택자
속성(attribute) 선택자
가상 요소와 가상 클래스
first-line, first-letter 가상 요소
before, after 가상 요소
first-child 클래스
링크 가상 클래스
선택자 조합
하위 선택자(descendant selector)
자식 선택자(child selector)
인접 형제 선택자(adjacent sibling selector)
선택자 그룹화

Section 04 CSS 개념 및 단위
상속(inherit)
겹침(cascading)과 개별성(specificity)
주석 및 단위와 색상
주석(comment)
단위(units)
색상(color & background)

Section 05 CSS 속성(property)
박스 모델(Box Model)
박스 너비(width)와 높이(height)
테두리(border)
마진(margin)
패딩(padding)
플로트(float)
float
clear
포지션(position)
relative position
absolute position
fixed position
타이포그래피
font-family
font-size
line-height
font-weight
font-style
font-variant
font
text-indent
text-align
vertical-align
text-decoration
text-transform
letter-spacing
white-space
색상과 배경
color
background-color
background-image
background-repeat
background-position
background-attachment
background
목록
list-style-type
list-style-position
list-style-image
기타 속성
border-collapse
overflow
display
visibility
z-index
CSS hack

Part 04 실전 예제

Section 01 제작하기 전에 알아야 할 것들
다양한 환경의 이해
프로젝트 제작 단계
저작도구
제작 가이드
WSG(Web Standardization Guide)
콘텐츠 그룹화
콘텐츠의 논리적인 구성
제목 레벨 정하기
이미지 콘텐츠
의미에 맞는 마크업

Section 02 메인 및 템플릿 마크업
레이아웃 설계
메인 콘텐츠 마크업
헤더 영역
비주얼 영역
로그인 영역
배너 영역
용어 설명 영역
자료검색 영역
공지사항 및 자료실 영역
새소식 영역
신규 이벤트 영역
관련 사이트 영역
인기 사이트 영역
슬로건 영역
푸터 영역
메인 마크업 완성
서브 템플릿 마크업
사이드 영역
콘텐츠 영역
퀵 메뉴 영역
서브 템플릿 완성
HTML 유효성 검사

Section 03 메인 및 서브 템플릿 디자인
스타일시트의 계획 및 구성
스타일 초기화
레이아웃 스타일
공용 스타일
헤더 영역
사이드 영역
콘텐츠 영역
퀵 메뉴 영역
슬로건 영역
푸터 영역
CSS 유효성 검사
크로스 브라우징 점검
메인 레이아웃 디자인
메인 콘텐츠 디자인
로그인 영역
배너 영역
용어 설명 영역
자료검색 영역
공지사항 및 자료실 영역
새소식 영역
신규 이벤트 영역
관련 사이트 영역
인기 사이트 영역
CSS 유효성 검사
크로스 브라우징 점검

Section 04 서브 콘텐츠 디자인
텍스트 콘텐츠(XHTHML이란?)
구조 설계
마크업
CSS 디자인
이미지 게시물 목록(이미지 갤러리)
구조 설계
마크업
CSS 디자인
게시판 목록(묻고 답하기)
구조 설계
마크업
CSS 디자인
회원가입 양식
구조 설계
마크업
CSS 디자인
크로스 브라우징 점검
찾아보기

웹 접근성을 고려한 웹 표준 기본+활용
- 저자의 풍부한 실무 노하우와 오랜 강의 경험을 토대로 웹 표준을 학습하는 가장 쉬운 방법 제시

<이 책의 특징>
올바른 웹 표준 개념을 제시하는 학습서
웹 접근성 및 웹 표준 관점에서의 다양한 웹 사이트 사례 분석
실무 프로젝트를 통한 저자 노하우 전수
크로스 브라우징 환경을 지원하기 위한 해법 제시

<이 책은 누가 봐야 할까요?>
웹 분야에 입문하려는 사람
웹 접근성을 고려하여 웹 사이트를 만들고 싶은 사람
웹 표준을 바탕으로 실무 경험을 쌓고 싶은 사람
크로스 브라우징 이슈 해법 이 궁금한 사람

<부록 CD>

· 예제 파일: 본문에 있는 예제를 따라하는데 필요한 예제 파일이 담겨 있습니다.

· 동영상 강의(동영상 강의-17개)
: 동영상 강좌를 먼저 수강한 후에 책을 보면, 책의 내용을 이해하는 데에 많은 도움이 될 것입니다.
북마크 추가하기
부가 기능 사용법
문서형 정의 및 선언
XHTML 서식
블록 요소와 인라인 요소
Acid 테스트
CSS 기본 서식
CSS 선택자
CSS 개념
CSS 적용 방법
박스 모델 ⑫ 플로트
포지션
CSS 핵
크로스 브라우징
Reset CSS
실전 예제 제작 가이드

· 강의 교안 : 핵심 강의 교안 PPT 파일이 담겨 있습니다.

· 북마크(즐겨찾기) : 웹 접근성과 웹 표준에 관련된 북마크 모음입니다.

· 묻고 답하기: 본문의 예제와 이 책에 대한 궁금증은 네이버 카페(http://cafe.naver.com/webcafe2010)로 문의바랍니다.

현재 그리고 당분간 국내 웹 시장에서의 가장 큰 화두는 웹 표준과 웹 접근성입니다. 특히 웹 접근성은 "장애인 차별 금지 및 권리 구제 등에 관한 법률"과 같은 법적 장치를 바탕으로 이미 큰 시장을 형성하고 있습니다. 이런 면에서 웹 표준과 웹 접근성을 심도 있게 다루고 있는 이 책은 환영할만합니다. 특히 국내 웹 표준과 웹 접근성을 체계화, 보편화시킨다는 점에서 큰 의미를 지닌 책이라 생각합니다
-장성민(잡코리아, 웹 접근성 연구소 자문위원)

웹 표준은 나를 위한 길이며, 우리 모두를 위한 길입니다. 처음 시작하는 사람으로부터 저와 같이 다시 시작하려는 사람 모두에게 이 한 권의 책은 충분한 도움이 될 것 같습니다. 웹이 무엇이고, 결국 우리는 어떻게 해야 하는지 이 책에서 그 해답을 찾아보시기 바랍니다.
-정찬명(NHN 오픈UI기술팀 선임UI개발자)