책을 공부하면서 요약한 것!
HTML5 관련 아주 깔끔한 책이다. 그래서 추천!!!
Do it! 새로운 웹 시대의 표준, HTML5를 빨리 만나는 길 HTML5 + CSS3
2010.09.20 발행
고경희 지음
이지스퍼블리싱 출판사
P.316, 16,800원
차례 :
01. HTML5란
02. HTML5로 기본적인 문서 만들기
03. 동영상 플러그인이 필요 없는 HTML5 비디오 요소
04. 화면에 그림을 그려보자 - 캔버스Canvas
05. 웹 폼 만들기
06. 표현이 자유로운 CSS3
07. CSS3 활용하기
08. 웹 애플리케이션 제작을 위한 다양한 API
책에서 소개하는 추천 사이트 소개 모음
http://www.html5test.com/ 내 브라우저는 HTML5를 지원정도, 300점 만점
http://www.html5rocks.com/ HTML5의 전반적인 예제 정리
http://html5gallery.com/ HTML5로 만든 사이트 모음
http://101besthtml5sites.com/ HTML5로 만든 베스트 사이트 소개
http://media.chikuyonok.ru/ambilight/ 동영상 콘트롤러를 지원하는 HTML5를 체험할 수 있는 사이트
http://craftymind.com/factory/html5video/canvasvideo.html HTML5를 이용해 사용자 움직임에 반응하는 동영상 적용 사이트
http://mrdoob.com/projects/harmony/ 캔버스 요소를 직접 경험하고 소스 코드도 볼수 있는 하모니 사이트
http://spielzeugz.de/html5/ 재미있는 마우스 효과를 볼 수 있는 사이트
http://www.w3schools.com/html5/html5_reference.asp HTML5 태크를 일목요연하게 정리한 사이트
http://developer.apple.com/safaridemos/ 사파리에서 지원하는 HTML5 데모 사이트
http://border-image.com/ 테두리 이미지 코드를 만들어주는
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/ CSS의 다양한 기능을 활용한 애니메이션
http://jsdo.it/ 다양한 자바스크립트, HTML5, CSS 소스 공유
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html CSS를 이용한 탭형식 네비게인션 바 소개
http://www.robertnyman.com/html5/ HTML5와 관련된 API 예제 소개
http://html5demos.com/ HTML5의 API 중심의 데모와 예제들을 모아놓은 페이지
HTML5 태그, CSS3 속성
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
http://dev.w3.org/html5/markup/ 마크업 언어 HTML5 규약
http://dev.w3.org/html5/html-author/ 웹 개발자를 위한 HTML5 가이드
http://mrdoob.com/projects/harmony/ 크롬으로 접속해서 그림을 그리는 화면
HTML5 : 태그 자체에 의미를 부여하는 시맨틱 마크업 Semantic Markup
새로운 태그
section, article, aside, hgroup, header, footer, nav, figure, figcaption, audio, video, embed, mark, progress, meter, time, ruby, rt, rp, canvas, command, details, datalist, keygen, output
변경된 태그
a, address, b, hr, i, menu, small, strong
새로 추가된 속성
media, hreflang, rel, target, value, charset, autofocus, placeholder, required, autocomplete, min, max, multiple, pattern, step, novalidate, type, label, scoped, async, menifest, reversed, start, seamless, sandbox
API
웹스토리지 Web Storage
드래그앤드롭 Drag & Drop
지오로케이션 Geolocation
캔버스 Canvas 2D
웹 워커 Web Workers
웹 SQL 데이터베이스 Web SQL Database
<html>
<head> .... </head>
<body>
<div id="header"> <h1> .... </h1> </div>
<div id="nav"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
<div id="sidebar"> .... </div>
<div id="content"> <img src=" ...png"> </div>
<div id="footer"> </div>
</body>
</html>
HTML5 문서 유형 지정 : <!DOCTYPE html>
HTML5의 시맨틱 태그
<header> 머리말 부분 지정 태그
<header id="mainHeader"> <nav> menu </nav> </header>
비디오 파일 형식
MPEG4 (*.mp4, *.m4v)
플래시 비디오 (*.flv)
Ogg (*.ogv)
AVI (*.avi)
WebM (*.webm)
비디오 코덱
H.264 (MPEG4 형식)
오그 테오라 (Ogg 형식)
VP8 (WebM 형식)
오디오 코덱
MP3 (MPEG-1 AUDIO Layer3)
AAC (Advanced Audio Coding)
Vorbis
브라우저 지원 코덱
[브라우저] [비디오 코덱] [오디오 코덱]
크롬 OGG, MP4 테오라, Vorbis, H.264, AAC OGG, MP3
파이어폭스 OGG 테오라, Vorbis OGG, WAV
오페라 OGG 테오라, Vorbis WAV
사파리 MP4 H.264, AAC MP3, WAV
익스플로러9 MP4 H.264, AAC
익스플로러8 지원않함 지원않함 지원않함
<canvas> 태그
<canvas id="can1" width="300" height="200"> </canvas>
도형 그리기
fillRect (x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)
...
arc(x, y, r, startAngle, endAngle, anticlockwise)
radians = (Math.PI/180)*degrees
...
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
...
createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
...
createPattern(image, type)
...
drawImage(image, x, y, width, height)
<input>
email, url, number, range, search, color, autocomplete, autofocus, list, min, max, maxLength, step, placeholder, required, formaction, formenctype, formmethod, formnovalidate, formtarget
CSS : Cascading Style Sheet
http://www.w3.org/style/css/current-work CSS3의 모듈 정보
//브라우저마다 다르게 표현된다
div.rounded {
background-color: #666;
color: #fff;
line-height: 20px;
width: 400px;
padding: 10px;
-webkit-border-radius:10px; //웹킷 엔진 브라우저(사파리, 크롬)를 위한 소스 코드
-moz-border-radius:10px; //게코 엔진 브라우저(파이어폭스)를 위한 소스 코드
}
// 텍스트에 그림자 효과주기
<style>
.text1{
color:#06f;
text-shadow:3px 3px 5px #000;
}
</style>
// 아쿠아틱한 느낌의 단추
.button .blaze{
position:absolute ;
top:0 ;
left:5px ;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 122px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, form(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
//3단 나누기
.mcol{
-moz-column-count:3 ;
-moz-column-gap:20px;
-moz-column-rule:1px solid #ddccb5;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:1px solid #ddccb5;
}
서브 메뉴 네비게이션
- 가로버전
- 세로버전
그라데이션 메뉴
사진 갤러리
아코디언메뉴
드래그앤드롭 Drag & Drop
애플리케이션 캐시 Application Cache
웹스토리지 Web Storage
웹 SQL 데이터베이스 Web SQL Database
웹 워커 Web Workers
지오로케이션 Geolocation
SVG
'▷일상' 카테고리의 다른 글
| L 제19대 국회의원 선거 - 투표소 확인 (2) | 2012.04.09 |
|---|---|
| B 만들면서 배우는 HTML5 + CSS3 + jQuery (0) | 2012.04.07 |
| B 혁신적인 RIA 개발을 위한 차세대 표준 API, Pro HTML5 Programming (0) | 2012.03.27 |
| B 웹혁명을 꿈꾸다 HTML5 & API 입문 (0) | 2012.03.23 |
| B 퇴계에게 공부법을 배우다 (0) | 2012.03.11 |
| PC조립해볼까! (0) | 2011.10.04 |
| 플랙스 & 플래시 책 구입 (0) | 2011.06.15 |
| 안드로이드 프로그래밍 책 구입 (0) | 2011.06.15 |
| 열혈강의 자바 프로그래밍, 프리렉出, 김승현著 (0) | 2011.03.24 |
| 비주얼 C++6 무조껀 따라하기, 길벗出, 임영택著 (0) | 2011.03.24 |