모바일 웹 퍼블리싱

PART 1

Section1. 웹 접근성과 웹 표준
1. 웹 접근성
1) 웹 접근성 개요
2) 웹 접근성의 법제화
2. “a시멘틱 웹”a과 “a웹 표준”a
1) 시멘틱 웹
2) 웹 표준
3. 어떤 브라우저를 쓸까
1) 웹 브라우저의 종류
2) CSS 렌더링 지수

Section2. 작업환경 구성하기
1. Google Chrome Browser의 설치
2. Aptana Studio 3의 설치
1) Aptana Studio 다운로드
2) Aptana Studio Workspace 설정
3) Aptana Studio 테마 설정
4) Aptana Studio 프로젝트 생성하기
5) 프로젝트에 새 항목 추가하기
6) 예제소스 불러오기 (다른 프로젝트 불러오기)
7) 기본 글꼴 변경하기
8) 소스 자동 완성 기능 사용 및 설정하기
9) 소스 자동 줄 맞춤 기능 사용하기
10) 실행환경을 Google Chrome 브라우저로 변경하기
11) 인터넷 공유기를 통한 핸드폰 접속환경 설정하기

XHTML with CSS2
3. Site To Phone의 설치
1) 계정 생성하기
2) Google Chrome 브라우저의 플러그인 설정하기
3) iPhone용 App 설치하기
4) Android용 웹 페이지 등록하기
4. IETester 사용하기

PART 2

Section1. 웹 표준으로 작업하기
1. HTML 페이지의 기본 구조
1) DTD 선언문
2) 캐릭터 셋을 지정하기 위한 meta태그
3) 모바일 장치의 해상도 설정을 위한 Viewport 지정하기
2. HTML 태그의 분류
1) 블록 레벨 요소 (Block Level Element)
2) 인라인 레벨 요소 (Inline Level Element)
3) 치환요소 요소
3. CSS 시작하기
1) HTML 문서에 CSS를 적용하는 방법
2) CSS의 기본 형식
3) CSS 기본 셀렉터
4) 셀렉터를 조합하여 사용하기
5) 기본적인 가상 셀렉터
6) 잘 알려지지 않은 가상 클래스
7) HTML 태그의 속성에 따른 셀렉터
4. CSS 구체성 단위

Section2. 글자/문단 관련 속성
1. 글자 관련 속성
1) 기본 적인 글자 관련 속성.
2) 글자 관련 속성 일괄 지정 하기
2. 문단 관련 속성

Section3. CSS2 박스모델
1. 박스의 크기
1) 박스의 기본 크기
2) 박스의 크기를 구성하는 속성 90 2) 박스 계층에서의 크기
3) height 100%의 비밀
2. 박스를 벗어나는 내용에 대한 처리
1) overflow 속성
2) text-overflow 속성
3) 최대/최소 크기 지정하기
3. 위치 관련 속성
1) margin 속성에 대한 이해
2) padding VS margin
3) 박스 계층에서의 margin 속성
4. auto값의 사용
1) width, height에서의 auto값
2) margin에서의 auto값
5. display 속성
1) display 속성의 기본 이해
2) inline-block
3) 목록 정의 요소 사용하기

Section4. Float 처리
1. Float 속성의 기본 특성
1) Float 속성의 기본 특성
2) 새로운 문단의 시작 처리
3) 중첩된 박스에서의 Float 속성
4) 박스 나열하기
5) 갤러리 레이아웃 예제
6) Float 속성을 사용한 레이아웃 구성하기

Section5. 포지션 관련 속성
1. 포지션 속성의 기본 특성
1) position: relatvie
2) position: absolute
3) position: fixed
4) 절대좌표 기준점의 이동
2. 포지션 속성의 응용 (리스트 뷰)
1) HTML 코드의 작성
2) CSS 코드의 작성

Section6. 배경 관련 속성
1. 배경 관련 속성 살펴보기
1) 배경 이미지 지정하기
2) 배경 속성 일괄 지정
2. 배경 관련 속성 응용하기
1) 웹 접근성을 고려한 서브타이틀
2) 이미지를 사용한 리스트 메뉴
3. 이미지 클립핑 기법
1) 이미지 클립핑의 개요
2) 이미지 클립핑의 활용
3) 이미지 클립핑의 이점

Section7. IE를 위한 처리
1. CSS Hack
1) IE6을 위한 분기 처리
2) IE7을 위한 분기 처리
3) IE6과 IE7을 위한 분기 처리
2. IE 조건부 주석
1) 조건부 주석의 사용 방법
2) 조건부 주석의 종류
3. IE6 PNG 버그 해결
1) DD_belatedPNG 스크립트 소개
2) DD_belatedPNG 스크립트 사용방법
4. 그 이외의 필수적인 크로스 브라우징 팁
1) IE 7/8 호환성 보기 모드 금지
2) IE9.js 파일의 적용
3) reset.css 파일의 적용

Section8. 모바일 웹을 위한 기본 사양
1. CSS 및 JavaScript 기본 사양
1) 폰트 크기 변경 방지
2) 브라우저 주소 표시줄 숨기기
2. 모바일 웹을 위한 추가사항
1) 배경화면 즐겨찾기 아이콘 지정하기
2) iOS를 위한 추가적인 처리
3. 단말기의 기능을 활용할 수 있는 DataLink

Section9. Demo(1) - 아카데미 모바일 웹
1. 작업 내용 살펴보기
1) 파일 구성
2) 이미지 파일
2. 메인페이지 작업 (index.html)1
1) HTML 태그 구성
2) 공통 CSS - /css/common.css
3) 메인페이지 CSS - /css/index.css
3. 센터소개 페이지 작업 (info.html)
1) HTML 태그 구조
2) 타이틀 바 공통 CSS - /css/top_bar.css
3) 센터소개 페이지 CSS - /css/info.css
4. 과목 소개 페이지 작업 (a.html)
1) HTML 태그 구조
2) content 영역의 CSS 표현 - /css/a.css

Section10. Demo(2) - 아파트 분양 안내 모바일 웹
1. 작업 내용 살펴보기
1) 파일 구성
2) 이미지 파일
2. 메인페이지 작업 (index.html)
1) HTML 태그 구성
2) 공통 CSS의 구성 - /css/common.css
3) 메인페이지의 CSS의 구성 - /css/index.css
3. 분양안내 페이지 작업 (a.html)
1) HTML 태그 구성
2) 상단 tab 영역 스타일 구성 - /css/tab.css
3) 본문영역 스타일 구성 - /css/a.css
4. 단지소개 페이지 작업 (b.html)
1) HTML 태그 구성
2) 본문영역 스타일 구성 - /css/b.css

XHTML5 with CSS3

PART 3

Section1. HTML5의 개요
1. HTML5의 등장
1) 웹 페이지와 웹 어플리케이션
2) HTML5의 탄생
2. HTML5의 소개
1) 퍼블리셔의 HTML5와 프로그래머의 HTML5
2) 플러그인이 필요 없는 웹 436
3) HTML5의 현재와 미래

Section2. HTML5 태그
1. HTML5의 기본 문서 구조
2. 새롭게 추가된 시멘틱 태그들
1) 문서의 구조를 표현하기 위한 태그
2) 내용을 강조하기 위한 태그
3) 추가된 공통 속성
4) HTML5를 지원하지 않는 브라우저에 대한 처리

Section3. 멀티미디어 지원 태그
1. 음악 재생을 위한 <audio>태그
2. 동영상 재생을 위한 <video>태그

Section4. HTML5 Form
1. 기존의 Form 요소
1) <form> 태그의 기본 사용법
2) <form> 태그의 기본 입력 컨트롤
3) 그 밖의 입력 컨트롤들
2. 새롭게 추가된 HTML5의 Form 요소
1) 새로운 input 요소들
2) <input> 태그의 새로운 속성
3) 새롭게 추가된 <button> 태그

Section5. CSS3 시작하기
1. CSS3의 새로운 가상 클래스
1) 반복되는 요소의 특정 위치를 선택할 수 있는 :nth-child
2) 동일 페이지 내에서 링크를 통해 지정되는 :target
3) 반응형 웹 페이지 제작을 가능하게 해 주는 미디어쿼리

Section6. CSS3의 새로워진 효과들
1. 브라우저마다 다르게 구현되는 프로퍼티
2. CSS3 텍스트/문단 관련 효과
1) 줄바꿈을 제어하는 word-wrap 속성
2) 단 나누기를 지원하는 multi_columns 속성
3) 웹 폰트 지원
4) 글자에 대한 그림자 처리
3. 새로워진 색상처리 방법들
1) 색상에 추가된 투명도 효과
2) 배경 색상에 적용가능한 그라데이션 효과
3) CSS3로 제작한 타이틀 바 예제
4. 박스 관련 효과.
1) 투명처리
2) 둥근 모서리 효과
3) 박스에 대한 그림자 처리
4) 이미지 태두리
5. 더욱 강력해진 배경 이미지 관련 속성
1) 배경이미지 중첩 적용
2) 배경이미지 적용 범위 지정
3) 배경이미지 크기 조절
6. 요소의 형태 변환 - transform.
7. CSS 애니메이션 효과
1) CSS3 Transition 소개
2) 애니메이션 효과가 가미된 submenu 구현
3) 애니메이션 효과를 적용한 아코디언 메뉴 예제
8. CSS3 애니메이션 무비

Section7. Demo - 관광정보 모바일 웹
1. 작업 내용 살펴보기
1) 파일 구성
2) 이미지 파일
2. 메인페이지 작업 (index.html)
1) HTML 태그 구성
2) 공통 CSS의 구성 - /css/common.css
3) 메인페이지 스타일 시트 구성 - /css/index.css.
3. 서브페이지 작업 (a.html)
1) HTML 태그 구성
2) 서브페이지 스타일 시트 구성 - /css/a.css.