이번에 배우고자 하는 욕심만 많아 서점에서 둘러보지 않고 막 고른 측면이 없잖아 있어 내용이 좀 미흡한 책을 고른 것도 같지만
이 책의 경우는 고민하지 않고 바로 질러도 괜찮을 것 같습니다. 추천을 받아 저도 포스팅합니다. ^^
출처 http://cafe.naver.com/dgeeks/4369
모바일 웹 퍼블리싱" 괜찮아서...소개해 드립니다.
모바일 웹 퍼블리싱은 XHTML + CSS2 기반의 웹 표준부터 시작하여 HTML5 + CSS3까지 이어지는 웹 페이지 제작 기술을 소개하고 모바일 웹 페이지 제작에 필요한 활용 기법을 넘기면서 쉽게 배우고 익힐 수 있게 편집하였으며, 드림 위버나 기타 다른 저작 도구를 사용하여 한번쯤 웹 페이지를 제작해 본 경험은 있으나 웹 표준과 HTML5 및 CSS3에 대하여 체계적인 정리가 필요한 분들이나, 웹 표준과 크로스 브라우징 기법에 대해서 습득하고자 하는 웹 퍼블리셔, PC용 웹 페이지 제작경험을 모바일용 웹 페이지 제작에 활용하는 능력을 습득하기 위한 분들에게는 모바일 웹 퍼블리셔 실무자로 전문가로 거듭날 수 있는 좋은 기회를 제공할 것입니다.
*모바일 웹 페이지 제작에 필요한 모든 과정에 대한 총정리 입문서
*한권으로 끝나는 모바일 웹 페이지 제작의 실전 입문서
*모바일 웹 페이지 제작! 이 한권이면 어렵지 않습니다.
*실무에 사용되는 웹표준과 html5의 핵심기법들만 모아놓은 모바일 웹 퍼블리싱 바이블
목 차
PART 1
Section1. 웹 접근성과 웹 표준
1. 웹 접근성
1) 웹 접근성 개요
2) 웹 접근성의 법제화
2. “à시멘틱 웹”à과 “à웹 표준”à
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 및 xxJavaScript 기본 사양
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.
~^^
