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 디자인
크로스 브라우징 점검
찾아보기
