HTML5 가이드

개요

새로운 마크업

  • 문서 구조 : header, footer, nav, section
  • 의미 기반 : progress, time, mark, meter
  • http://html5doctor.com/designing-a-blog-with-html5/
  • 삭제된 놈들
  • CSS로 대체 가능한 것들 : big, center, font, s, strike
  • 부정적인 것들 : frame, applet, acronym

편리한 Form 속성

  • datetime (달력)
  • range (스크롤바)
  • url(웹사이트 목록)
  • email(메일 주소 유효확인)
  • color (색상표)

API 제공

  • canvas
  • video
  • audio
  • AppCache
  • Key/Value 기반 데이터 저장소 (DOM Storage, IndexedDB)
  • SQL 기반 데이터베이스 (Web Database)
  • Web Stocket
  • 문서간 알림 기능 (Server-sent Event)
  • contenteditable (사용자 경험 증대????)
  • draggable (드래그 앤 드롭)
  • Geolocation
  • ...

마크업

구조와 문법

문자 인코딩

  • HTTP 헤더에서 선언
  • 유니코드 BOM에서 선언
  • meta 태그 사용

MathML와 SVG

문법 검사

구조

  • id에서 header 요소 사용하기 (HTML5 Enabling Script) : http://code.google.com/p/html5shim/
  • section : 문서나 App의 섹션을 정의, h1~h6와 같이 사용가능
  • nav : 네비게이션을 위한 섹션
  • article : 독립적인 글 (블로그 글, 뉴스 본문), article 중첩시 안쪽것(블로그 글)은 바깥것(댓글)과 관련 있다.
  • aside : 본문과 관계없는 내용 (광고, 링크)
  • hgroup : 섹션의 제목이 여러단계일때 사용 (Heading Group)
  • header : 소개(목차, 검색창, 로고 등이 배치), 문서구조상 섹션으로 간주안함.
  • footer : 가까운 섹션의 푸터 (저자, 저작권 등 배치), 문서구조상 섹션으로 간주안함.
  • figure : 그래픽/비디오의 캡션을 표시

헤딩과 섹션

  • 헤딩 : h1, h2, h3, h4, h5, h6, hgroup
  • 섹셔닝 루트 (상위/다른 아웃라인과 무관) : blockquote, body, details, fieldset, figure, td

그 밖의 요소

  • video, audio : 비디오/오디오 콘텐츠, 스크립트로 제어, source요소에 여러개 미디어 사용가능
  • embed : 플러그인 콘텐츠 사용
  • mark : 중요하다고 생각되는 텍스트에 표기
  • progress : 진행상황
  • meter : 분량,수량을 나타냄
  • time : 날짜,시간
  • ruby, rt, rp : 루비 주석 (일본어에서 한문에 음을 달때), < ruby >기준 텍스트 < rt > 또는 < rp >에 루비주석
  • canvas : 동적인 비트맵 이미지 구현시
  • command : 사용자가 수행할 수 있는 명령
  • details : 추가정보, summary를 통해 요약,제목,캡션등을 표시
  • datalist : option의 묶음을 나타낸다. input의 list, datalist의 id로 서로 연결된다.
  • keygen : 서버로 공개키 보내고, 로컬에 개인키 저장
  • output : 생성된 결과물
  • style, script : "text/css"와 "text/javascript" 같은 type 속성이 생략 가능해짐
  • input : type속성에 따라 다양한 형식으로 사용됨
  • hidden(감춰짐), text(텍스트), search(검색), tel(전화번호), url(URL), email(이메일), password(비밀번호)
  • datetime(날짜와 시각), date(날짜), month(달), week(주), time(시각), datetimelocal(로컬 날짜와 시각)
  • number(숫자), range(범위), color(색), checkbox(체크박스), radio(라디오 버튼), file(파일), submit(전송)
  • image(이미지), reset(리셋 버튼), button(버튼),

새로운 속성

  • media : a, area의 미디어 속성
  • ping : a, area의 ping 속성(클릭정보 수집 등)
  • hreflang, rel : area의 속성 ???????????????????????
  • target : base에 target 속성 (a에서와 비슷)
  • charset : meta의 charater set속성
  • autofocus : input(hidden일때 빼고) / textarea / button에 문서 로드시 자동 포커스되는 속성
  • placeholder : input/textarea 에 힌트(예:아이디 입력) 속성. 긴 힌트는 title 속성을 사용해야함.
  • form : input/output/select/textarea/button/fieldset 요소에 사용되는 속성. form 밖에 위치할 수 있게함.
  • required : input(hidden/image 제외) / button(submit 제외)의 유효성 검사 속성. 반드시 사용자가 입력해야함.
  • disable : fieldset을 비활성화
  • autocomplete, min, max, multiple, pattern, step : input의 속성
  • type, label : menu요소에 지정하여 컨텍스트 메뉴 제작
  • scoped : style 요소에 지정하여 특정부분만 스타일 적용
  • async : style요소에 지정하여 스크립트 로딩/실행 타이밍 조절
  • manifest : html요소에 지정. API에서 캐시정보 사용가능.
  • sizes : link에 아이콘 기본 크기정보 표시
  • reversed : ol에 지정하여 번호순서 변경
  • sandbox, seamless, srcdoc : iframe를 샌드박스로 사용.

글로벌 속성

  • 글로벌 속성(class, dir, id, lang, style, tabindex, title)을 모든 요소에 지정할 수 있음.
  • contenteditable : content를 edit할 수 있다.
  • contextmenu : context menu를 지정할 수 있음.
  • data-* : 저작자가 새로운 속성을 지정
  • draggable : drag & drop API를 사용할 수 있음
  • hidden : 문서상에 존재하지 않도록 함. CSS로 화면에 안보이는것과 다름.
  • role, aria-* : 보조기기에서 접근성 향상
  • spellcheck : 맞춤법 검사.
  • onclick, onfocus.. : HTML4의 on{이벤트이름} 사용가능

변경된 요소

  • a : 버튼처럼 상호작용 요소 없으면 문단/리스트/표/섹션등 포함 가능
  • address : 문서구조에서 특정범위에 적용
  • b : 다르게 나타내야 하는 텍스트 (상품이름, 키워드..)
  • hr : 문단 수준의 나눔을 의미함
  • i : 다른 텍스트와 구분할 텍스트를 표시 (기술용어, 다른표현, 생각..)
  • label : 포커스를 이동하지 않음
  • menu : 툴바/컨텍스트메뉴를 위해 개선됨
  • small : 작게 출력 (추가적 코멘트, 법적 표현 등..)
  • string : 중요함 (강한강조 X)

변경된 속성

  • border : border는 0을 지정해야 함. 대신 CSS를 권장.
  • language : 왠만하면 생략
  • name : a요소의 name속성보다 id속성을 권장
  • summary : table요소의 summary속성은 HTML5의 다른걸로 권장

빠진 요소

  • basefont, big, center, font, s, strike, tt, u : 표현과 관련하여 빠짐
  • frame, frameset, noframes : 컨텐츠 네비게이션할때 영향 미치는 것
  • acronym : 많이 안씀. abbr 사용할것
  • applet : object로 대체
  • isindex : 다른 콘트롤 요소로 대체
  • dir : ul로 대체

빠진 속성

  • HTML5 에서 빠진 놈들
    • version : html 요소
    • name(id 사용 권장) : img 요소
  • 표현과 관련된 놈들 (CSS로 대체해라)
    • align : caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • alink, link, text, vlink : body 요소
    • background : body요소
    • bgcolor : body요소
    • border : table, object 요소
    • cellpadding, cellspacing : table 요소
    • frame : table 요소
    • frameborder : iframe 요소
    • height : td, th 요소
    • scrolling : iframe 요소
    • valign : col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • width : hr, table, td, th, col, colgroup, pre 요소

예제

CSS3

text-shadow

  • 그림자 효과
  • blur 생략시 0

text-overflow

  • 글이 넘칠때 말줄임표(...)

word-wrap

  • 워드랩 (강제 개행)

@font-face

  • ttf (비 IE지원)
  • eot (IE 지원)

opacity

  • 투명도

box-shadow

  • 박스형 테두리 그림자
  • 순서 : X좌표, Y좌표, blur값, 그림자색

border-radius

  • 둥근 테두리

background(s)

gradient

transform

  • 회전, 이동, 크기, 비틀기

transition

  • 메뉴에 마우스 올리면 부드럽게 움직이는 효과

animation

  • 'webkitFire'라는 사용자 정의 에니메이션 실행

HTML5 API

미디어 요소 - Audio와 Video 요소

미디어 요소 - Canvas 요소

미디어 요소 - SVG(Scalable Vector Graphics) 요소

Offline Application Cache

  • 리소스를 로컬에 저장하면 ==> 오프라인 브라우징, 속도 향상, 서버 부하 감소(브라우저는 변경된 리소스만 다운로드)
  • 캐시파일 목록 지정
  • manifest 예제
  • window.applicationCache 개체
  • status 프로퍼티 : 캐시 상태 확인 - appCache.UNCACHED, appCache.IDLE, appCache.CHECKING, appCache.DOWNLOADING, appCache.UPDATEREADY, appCache.OBSOLETE
  • upate() : 캐시를 갱신하도록 시도
  • swapCache() : 오래된 캐시를 새로운 파일로 교체
  • addEventListener() : 이벤트 리스너 등록
  • window.applicationCache 개체 예제
  • 데모 : http://html5.firejune.com/demo/manifest.html

Web Storage

  • Client-Side Database
  • Key-value 형식, 보관/갱신/호출
  • 브라우저에서 제공하는 저장공간 사용 (다른 브라우저간 호환 안됨)
  • 종류 : localStorage / sessionStorage (브라우저 종료 후 데이터 유지 여부에 따라)
  • 쿠키는 HTTP 요청헤더에 포함됨 --> 응답시간에 나쁜 영향 --> Web Storage로 대체하라

Web SQL Database

  • client 저장소에 영구 보존 가능, 덩치큰 데이터 체계적 관리 가능
  • 비동기 API : non-blocking 이므로 리턴값 사용X, 정의된 콜백함수에 데이터 전달됨
  • HTML을 통한 트랜젝션 : transaction(읽고 쓰기), readTransaction(읽기전용)
  • 데모 : http://html5.firejune.com/demo/webdb.html

Web Sockets

  • Server & Client 사이의 full-duplex 통신채널. Comet의 대안으로 고안됨
  • 서버에서 Web Sockets 프로토콜을 지원해야 함.
  • XHR1보다 적은 대역폭, 빠른 송/수신
  • 클라이언트 예제

Web Workers

Server-Sent Event

Rich Web API

Selector API

  • querySelector() : 노드를 발견하지 못하면 null
  • querySelectorAll() : 노드를 발견하지 못하면 빈 목록
  • 예제

Drag and Drop

Geolocation

IndexedDB

  • on/offline 저장 가능, Client-side Database
  • Web Database 와 비교시..
  • 스크립트로 다루기에 최적화된 인터페이스
  • 알고리즘 방식의 입/출력
  • 동기/비동기 지원
  • 커서 지원하여 RDB 형식으로 설계가능
  • 예제

Notifications

File API

WebGL

  • 플러그인 없이 3D 웹 그래픽
  • OepnGL ES 2.0의 자바스크립트 바인딩 (실시간 HW가속 가능)

아이폰 기반 HTML5 앱 개발

개요

개발 & 테스트

Related posts

HTML5 Canvas 그리기 HTML5 - 관련 사이트 HTML5 Device API HTML5 & Hybrid App Ajax Study #1 - XMLHttpRequest 워드프레스 - 애드센스 추가

광고

댓글 남기기