HTML5 & CSS3 실전에서는 이렇게 쓴다!

01장 HTML5와 CSS3 소개 HTML5란? HTML5가 걸어온 길 - 진정한 HTML5 규격이 정해질 수 있을까? 왜 HTML5에 관심을 가져야 할까? CSS3란? 왜 CSS3에 관심을 가져야 할까? ‘실전’이란 무엇을 의미하는가? - 다양한 브라우저 시장 - 성장하는 모바일 시장 실전 내용으로 들어가면서 02장 마크업, HTML5 스타일 HTML5 헤럴드 소개 기본 HTML5 템플릿 - 독타입 - html 요소 - head 요소 - 대등한 상황으로 만들기 - 나머지는 알고 있는 그대로다 HTML5 FAQ - 왜 이러한 변경사항이 이전 브라우저에서도 여전히 작동하는 걸까? - 모든 태그를 닫지 말아야 할까? - 다른 XHTML 기반 문법 규칙은 어떨까? 페이지의 구조 정의 - header 요소 - section 요소 - article 요소 - nav 요소 - aside 요소 - footer 요소 HTML5 헤럴드 구조화 정리 03장 HTML5의 의미적 표현 더 알아보기 콘텐츠 타입의 새로운 측면 문서의 개요 뉴스 속보 - hgroup 요소 새로운 요소 더 알아보기 - figure와 figcaption 요소 - mark 요소 - progress와 meter 요소 - time 요소 기존 기능의 변화 - ‘폐기된‘이라는 용어는 폐기됐다 - Link 내의 블록 요소 - 굵은 글씨체 - 이탤릭체 - 큰 글씨와 작은 글씨 - 기다려왔던 cite 요소 - (정의가 아닌) 설명 목록 다른 새로운 요소와 기능 - details 요소 - 맞춤형 순서 있는 목록 - 범위가 지정된 스타일 - 스크립트를 위한 async 속성 HTML5 문서의 유효성 검사 요약 04장 HTML5 폼 툴박스의 믿을 만한 도구들 HTML5 폼 속성 - required 속성 - placeholder 속성 - pattern 속성 - disabled 속성 - readonly 속성 - multiple 속성 - form 속성 - autocomplete 속성 - datalist 요소와 list 속성 - autofocus 속성 HTML5의 새로운 폼 입력 타입 - Search - 이메일 주소 - URL - 전화번호 - 숫자 - 범위 - 색상 날짜와 시간 HTML5에서의 다른 새로운 폼 컨트롤 - output 요소 - keygen 요소 기존 폼 컨트롤과 속성의 변화 - form 요소 - optgroup 요소 - textarea 요소 결론 05장 HTML5 오디오와 비디오 탄생 배경 기능 지원의 현재 상태 - 비디오 컨테이너 포맷 - 비디오 코덱 - 오디오 코덱 - 현재 브라우저에서는 어떤 조합이 작동할까? 마크업 - 내장 컨트롤 사용 - autoplay 속성 - loop 속성 - preload 속성 - poster 속성 - audio 속성 - 다중 비디오 포맷 지원 - source 순서 - 인터넷 익스플로러 6~8은 어떻게 될까? - MIME 타입 웹용 비디오 파일 인코딩 맞춤 컨트롤 생성 - 첫 시작을 위한 몇 가지 마크업과 스타일 - 미디어 요소 API 소개 - 비디오의 재생과 중지 - 비디오의 오디오 트랙에 대한 음소거 및 음소거 해제 - 비디오 재생이 끝났을 때의 반응 - 비디오 재생에 따른 시간 업데이트 - 미디어 요소 API의 추가적인 기능 오디오는 어떤가? 접근 가능한 미디어 쇼타임 06장 CSS3 소개 이전 브라우저 지원하기 CSS3 선택자 - 관계형 선택자 - 속성 선택자 - 가상 클래스(Pseudo-classes) - 구조적 가상 클래스 - 가상 요소와 생성된 콘텐츠 CSS3 색 - RGBA - HSL과 HSLA - 불투명도 실전 적용 둥근 모서리: border-radius 그림자 효과 - Inset과 여러 개의 그림자 효과 텍스트 그림자 효과 더 많은 그림자 효과 다음으로 07장 CSS3 그라디언트와 다중 배경 선형 그라디언트 - W3C 문법 - 이전의 웹킷 문법 - 종합 예제 - SVG를 이용한 선형 그라디언트 - IE 필터를 이용한 선형 그라디언트 - 이용 가능한 도구 방사형 그라디언트 - W3C 문법 - 이전의 웹킷 문법 - 모든 내용을 통합하면 반복 그라디언트 다중 배경 이미지 배경 크기 배경으로 08장 CSS3 변형과 전환 변형(Transform) - 이동(Translation) - 크기변환 - 회전 - 비틀기 - 변형의 원점 변경 - 인터넷 익스플로러 8과 그 이전 버전을 위한 지원 전환(Transition) - transition-property - transition-duration - transition-timing-function - transition-delay - transition 약칭표기 속성 - 다중 전환 애니메이션 - 키 프레임 - 애니메이션 속성 넘어가면서 09장 웹 폰트와 다단 레이아웃 @font-face를 이용한 웹 폰트 - @font-face 구현 - 폰트 소스 선언 - 폰트 속성 기술자 - 유니코드 범위 - 폰트 적용 - 법적 고려 사항 - 다양한 폰트 파일 생성: 폰트 스쿼럴 - 다른 고려 사항 CSS3 다단 레이아웃 - column-count 속성 - column-gap 속성 - column-width 속성 - columns 약칭표기 속성 - 단과 height 속성 - 그 밖의 단 기능 - 다른 고려 사항 - 점진적 향상 미디어 쿼리 - 미디어 쿼리란? - 문법 - 미디어 쿼리의 유연성 - 브라우저 지원 - 추가 참고 자료 스타일리시하게 살기 10장 위치 정보, 오프라인 웹 앱, 그리고 웹 스토리지 위치 정보 - 프라이버시에 대한 배려 - 위치 정보 메서드 - Modernizr를 이용한 지원 여부 확인 - 현재 위치 조회 - 위치 정보의 Position Object - 위도와 경도 얻기 - 지도 불러오기 - 이전의 모바일 기기에 대한 마지막 한마디 오프라인 웹 애플리케이션 - 작동 방법: HTML5 애플리케이션 캐시 - 오프라인에서 작동하도록 사이트 설정하기 - 사이트를 오프라인으로 저장하기 위한 허가 얻기 - 오프라인 테스트 - 오프라인에서도 이용 가능한 HTML5 헤럴드 만들기 - 오프라인 웹 애플리케이션 저장 공간의 제약 - Fallback 섹션 - 캐시 리프레싱 - 지금 온라인 상태일까? - 추가 참고 자료 웹 스토리지 - 두 종류의 웹 스토리지 - 웹 스토리지 데이터의 모습 - 데이터 저장하기와 읽기 - 저장 데이터 변환 - 좀 더 간단한 사용법 - 특정 항목 제거와 전체 데이터 지우기 - 스토리지 제한 - 보안 고려사항 - HTML5 헤럴드에 웹 스토리지 추가 - 웹 인스펙터를 이용한 웹 스토리지 값 열람 추가적인 HTML5 API - 웹 워커 - 웹 소켓 - Web SQL과 IndexedDB 그림 그리기로 되돌아가 보자 11장 캔버스, SVG와 드래그 앤 드롭 캔버스 - 캔버스의 역사 - canvas 요소 생성 - 캔버스에 그리기 - 컨텍스트 얻기 - 브러시에 색 입히기 - 캔버스에 사각형 그리기 - 캔버스 좌표 시스템 - fillStyle의 변형 - Path를 이용해 다른 모양 그리기 - 캔버스 그림 저장하기 - 이미지를 캔버스에 그리기 - 이미지 조작하기 - 컬러에서 흑백으로 이미지 변환하기 - getImageData에서의 보안 오류 - 캔버스로 비디오 조작하기 - 캔버스에 텍스트 표시하기 - 접근성에 대한 우려 - 추가 참고 자료 목록 SVG - SVG에서 그리기 - SVG 이미지 생성을 위한 잉크스케이프 활용 - SVG 필터 - 라파엘 라이브러리 활용 - 캔버스 vs. SVG 드래그 앤 드롭 - WAI-ARIA 고양이에게 먹이주기 - 드래그 가능한 요소 만들기 - DataTransfer 객체 - 드롭된 요소 받기 - 참고 자료 여기까지입니다! 부록A Modernizr CSS에서 Modernizr 이용하기 자바스크립트에서 Modernizr 이용하기 인터넷 익스플로러 8과 그 이전 버전에서의 HTML5 요소에 대한 스타일 적용 지원 추가 참고 자료 부록B WAI-ARIA WAI-ARIA가 어떻게 의미적 표현을 보완하는가 WAI-ARIA의 현재 상태 추가 참고 자료 목록 부록C 마이크로데이터 HTML5의 의미적 표현은 충분하지 않은가? 마이크로데이터 문법…

출처: 국립중앙도서관 서지정보