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. 웹 카페 사이트 점검