웹 표준 핵심 가이드북 2 XHTML5 + CSS3

Part 01 HTML5 Markup

》 Section 01 새로운 표준, HTML5

》》 HTML5의 탄생

》》 HTML4.01, XHTML1.0과 HTML5의 차이점
1. 콘텐츠 모델(Content Models)
2. 아웃라인 알고리즘(Outline Algorithm)
3. 다양한 API의 추가

》》 HTML5 Markup의 기초
1. 요소(element)와 태그(tag)
2. HTML5 서식
3. DOCTYPE
4. 문자 인코딩
5. 유효성 검사(Markup Validatiion)

》 Section 02 HTML5 요소

》》 문서를 구성하는 기본 요소
1. 루트 요소 《html》
2. 문서 메타데이터의 집합 《head》
3. 문서의 본문 《body》

》》 문서의 메타데이터
1. 문서 제목 《title》
2. 문서 정보 《meta》
3. 스타일 시트 삽입 《style》
4. 외부 문서의 연결 《link》
5. 문서의 기준 URL 지정 《base》

》》 스크립팅
1. 스크립트 삽입 《script》
2. 스크립트 미지원 웹 브라우저를 위한 대체 콘텐츠 《noscript》

》》 구조를 나타내는 요소
1. 콘텐츠 섹션 《section》
2. 내비게이션 《nav》
3. 독립된 콘텐츠 《article》
4. 본문 콘텐츠와 연관성이 적은 콘텐츠 《aside》
5. 헤더 《header》
6. 푸터 《footer》
7. 사이트 연락처 정보 《address》
8. 콘텐츠 제목 《h1》~《h6》

》》 그룹
1. 콘텐츠 그룹화 《div》
2. 주요 콘텐츠 《main》
3. 단락 《p》
4. 비순서형 목록 《ul》
5. 순서형 목록 《ol》
6. 정의형 목록 《dl》, 《dt》, 《dd》
7. 콘텐츠 포함을 위한 그룹과 캡션 《figure》(new), 《figcaption》
8. 인용문 《blockquote》
9. 형식화된 텍스트 그룹 《pre》
10. 단락의 주제별 구분 《hr》

》》 텍스트 레벨의 시맨틱 요소
1. 하이퍼링크 《a》
2. 강조 《em》
3. 중요성 《strong》
4. 관례상 이탤랙체를 사용하는 콘텐츠 《i》
5. 보편적으로 굵은 글씨를 사용하는 콘텐츠 《b》
6. 하이라이팅 콘텐츠 《mark》
7. 작은 글씨로 표현하는 콘텐츠 《small》
8. 축약어 《abbr》
9. 인용문의 출처 《cite》
10. 인라인 인용문 《q》
11. 시간 및 날짜 《time》
12. 소스 코드 《code》
13. 변수 값 《var》
14. 프로그램 출력 《samp》
15. 키보드 입력 《kbd》
16. 첨자 《sup》, 《sub》
17. 용어 정의 《dfn》
18. 루비 콘텐츠 《ruby》(new), 《rp》(new), 《rt》
19. 텍스트 방향 《bdo》, 《bdi》
20. 줄바꿈 《br》, 《wbr》
21. 인라인 콘텐츠 그룹화 《span》

》》 수정 및 편집
1. 추가 《ins》
2. 삭제 《del》

》》 포함 요소
1. 이미지 《img》
2. 인라인 프레임 《iframe》
3. 객체 삽입 《embed》
4. 객체 삽입 《object》, 《param》
5. 동영상 및 오디오 《video》, 《audio》, 《source》, 《track》
6. 비트맵 이미지 《canvas》
7. 이미지 맵 《map》, 《area》

》》 표 관련 요소
1. 표 《table》, 《tr》, 《th》, 《td》
2. 표의 캡션 《caption》
3. 열 그룹 《colgroup》, 《col》
4. 행 그룹 《thead》, 《tbody》, 《tfoot》

》》 폼 관련 요소
1. 폼 《form》
2. 폼 서식 그룹 《fieldset》, 《legend》
3. 서식 레이블 《label》
4. 다양한 폼 서식 《input》
5. 버튼 《button》
6. 목록 서식 《select》, 《optgroup》,《option》
7. 입력 값 후보 《datalist》
8. 여러 줄 글상자 《textarea》
9. 키(쌍) 생성 《keygen》
10. 출력 값 《output》
11. 진행 상황 《progress》
12. 한정된 범위 값 《meter》

》》 인터랙션 요소와 전역 속성
1. 상세 설명 《details》, 《summary》
2. 대화상자 《dialog》
3. 전역 속성

Part 02 CSS Design

》 Section 01 CSS에 대하여

》》 CSS의 이해
1. CSS란
2. CSS의 과거와 현재
3. CSS 사용의 의의

》 Section 02 CSS 기초

》》 CSS 규칙
1. CSS 기본 문법
2. CSS 주석 및 단위
3. CSS 적용하기

Section 03 CSS 선택자

》》 선택자의 종류
1. 전체 선택자(Universal Selector)
2. 요소 선택자(Type Selector)
3. 클래스 선택자(Class Selector)
4. 아이디 선택자(ID Selector)
5. 속성 선택자(Attribute Selector)
6. 가상 클래스 선택자(Pseudo classes Selector)
7. 가상 요소 선택자(Pseudo element Selector)

》》 선택자 결합
1. 하위 선택자(Descendant Combinator)
2. 자식 선택자(Child Combinator)
3. 형제 선택자(Sibling Combinators)
4. 선택자 그룹화

》》 선택자 우선순위

Section 04 CSS 속성

》》 폰트(Font)
1. font family
2. font weight
3. font stretch
4. font style
5. font size
6. font size adjust
7. font
8. font synthesis
9. @font face
10. font variant
11. font feature settings
12. font kerning
13. font-language override

》》 텍스트(Text)
1. text transform
2. white space
3. tab size
4. line break
5. word break
6. hyphens
7. overflow wrap/word wrap
8. text align
9. text align last
10. letter spacing
11. word spacing
12. text indent
13. text decoration
14. text shadow

》》 박스 모델(Box Model)
1. display
2. padding
3. border
4. margin
5. width, height
6. min width, min height, max width, max height
7. visibility
8. overflow
9. overflow style
10. marquee style, marquee loop, marquee direction, marquee speed
11. rotation, rotation point

》》 색상 및 배경(Color & Background)
1. color
2. opacity
3. background color
4. background image
5. background repeat
6. background attachment
7. background position
8. background clip
9. background orgin
10. background size
11. background

》》 테두리(Border)
1. border color
2. border style
3. border width
4. border radius
5. border image source
6. border image slice
7. border image repeat
8. border image width
9. border image outset
10. border image
11. box decoration break
12. box shadow

》》 배치(Float & Position)
1. float
2. clear
3. position
4. top, right, bottom, left
5. z index
6. clip

》》 다단(Multi Column)
1. column width
2. column count
3. columns
4. column gap
5. column rule
6. column span
7. column fill
8. break before, break after, break inside

》》 변형(Transform)
1. transform
2. transform origin
3. transform style
4. perspective
5. perspective origin
6. backface visibility

》》 변환(Transition)
1. transition property
2. transition duration
3. transition timing function
4. transition delay
5. transition

》》 애니메이션(Animation)
1. @keyframes
2. animation-name
3. animation duration
4. animation timing function
5. animation iteration count
6. animation direction
7. animation play state
8. animation delay
9. animation fill mode
10. animation

》》 유연한 박스 레이아웃(Flexible Box Layout)
1. display : flex, display : inline flex
2. flex direction
3. flex wrap
4. flex flow
5. order
6. flex grow
7. flex shrink
8. flex basis
9. flex
10. justify content
11. align content
12. align items, align self

》》 사용자 인터페이스(User Interface)
1. content
2. box sizing
3. outline
4. outline offset
5. resize
6. text overflow
7. cursor

》》 미디어 쿼리(Media Query)
1. Media Query의 사용
2. Media Query의 변화와 특징
3. Media Query의 조건식

Part 03 프로젝트

》 Section 01 웹 카페 제작을 위한 준비

》》 웹 카페 제작 방향
1. 웹 카페 사이트 구성
2. 기술적 요소

》》 웹 카페 제작 가이드(WSG)
1. 마크업 가이드
2. CSS 가이드

》 Section 02 HTML5를 활용한 웹 카페 Markup

》》 레이아웃 설계
1. 공통 레이아웃
2. 메인 및 서브 콘텐츠 레이아웃

》》 공통 콘텐츠 영역 Markup
1. 헤더 영역
2. 비주얼 콘텐츠
3. 슬로건 콘텐츠
4. 푸터 영역

》》 메인 콘텐츠 Markup
1. 로그인
2. 유효성 검사 링크
3. 웹 관련 용어 설명
4. 웹 카페 검색
5. 공지사항 및 자료실
6. 새소식
7. 신규 이벤트
8. 관련 사이트
9. 인기 사이트

》》 서브 페이지 콘텐츠 Markup
1. 트위터
2. HTML5 소개365
3. 이미지 자료실371
4. 묻고 답하기377
5. 회원가입381

》》 Markup 문법 준수
1. Markup 유효성 검증

》 Section 03 CSS3를 활용한 웹 카페 UI 디자인

》》 기초 공사
1. 스타일 재설정 및 초기화
2. 숨김 콘텐츠
3. 기본 스타일

》》 레이아웃
1. 레이아웃 설계

》》 공유 콘텐츠 Style
1. 헤더 콘텐츠
2. 비주얼
3. 슬로건
4. 푸터 콘텐츠

》》 메인 콘텐츠 Style
1. 로그인
2. 유효성 검사 링크
3. 웹 관련 용어
4. 웹 카페 검색
5. 공지사항 및 자료실40
6. 새소식
7. 신규 이벤트와 관련 사이트
8. 인기 사이트

》》 서브 페이지 콘텐츠 Style
1. 트위터
2. HTML5에 대해
3. 이미지 자료실
4. 회원가입

Part 04 웹 접근성

》 Section 01 웹 접근성 개선 프로젝트

》》 웹 접근성 향상을 위한 전략
1. 장차법과 웹 접근성
2. 웹 접근성 향상을 위한 방법론
3. 웹 콘텐츠 접근성 지침

》》 웹 접근성 점검을 위한 준비
1. 웹 접근성 검사 도구
2. 체크리스트
웹 접근성 평가
1. 웹 카페 사이트 점검