U E D R , A S I H C RSS

html5/overview

Difference between r1.1 and the current

@@ -1,29 +1,58 @@
[[pagelist(^html5)]]
[[tableofcontents]]
= HTML5 개요 =
* 어플리케이션의 구조를 논리적으로 기술하기 위한 기본 요소
* 문서 특정 내용을 의미론적으로 구분 짓는 새로운 element들
* section, article
* outline
* 섹션의 중첩관계
== 참고 사항 ==
* 섹션 요소를 사용할 때는 항상 아웃라인을 염두해
* 아웃라인과 상관 없는 범위를 지정하 ㄹ때는 div를 사용할
* article 요소를 사용할 것인가 것인가는 콘텐츠를 해당 페이지에서 분리해서 사용 가능한가에 따라 결정
* aside는 없어도 문제 없을 섹션에 사용
== HTML5와 이전 문서의 차이 ==
=== before HTML5 ===
* http://www.webguru.pe.kr/zbxe/files/attach/images/2848/655/824/structure-div.gif
=== HTML5 ===
* http://www.webguru.pe.kr/zbxe/files/attach/images/2848/655/824/structure-html5.gif
= 요소 =
== section ==
* 범용적 섹션
=== section 제목 ===
* 하나만 지정 가능
* 여러 제목을 묶어 하나로 만들기 위한 {{{<hgroup>}}} 태그 사용가능
* 섹션에 두개 이상의 제목을 지정하면 암묵적으로 섹션이 생성된다. 그런데 어떤 규칙으로 생성될지 모른다.
=== section root ===
* 하나의 독립된 요소로 인정되는 태그들
* body, fieldset(입력 필드 그룹), td, figure, blockquote
* body가 section root임. HTML5의 컨텐츠는 모두 section에 포함된다는 것을 유추 가능
* 밖의 아웃라인에는 영향을 주지 않는다.
* 자바스크립트 + CSS + HTML의 통합개념
* 기존의 HTML : 문서를 위한 플랫폼, HTML5 : 웹 어플리케이션을 위한 플랫폼
 
== HTML5 범위 ==
* HTML + XHTML + 요소 + 요건 + 관련 API
* HTML+CSS+JavaScript
 
== 달라진점 ==
* 풍부한 어플리케이션 기능 : 어플리케이션의 표현력 증가
* 동영상/음성
* 2D 그래픽 처리
* 오프라인에서 구동가능
* 도메인간의 통신기능
* 클라이언트축 데이터 저장
* 백그라운드 처리 수행
* 서버로부터의 데이터 푸시
* 서버와의 쌍방향 통신수행
* 로컬파일 읽기
* etc. MathML, SVG등 외부 마크업언어 HTML에 직접 삽입가능 (책 범위 밖)
* 기존 HTML4.- : HTML과 XHTML은 별개의 사양
* HTML5 : HTML과 XHTML은 표현되는 문법의 차이, HTML5는 DOM에 따라 표시됨
 
 
* 시맨틱한 마크업
* 기존 HTML문의 애매모호한 문법 개선
* <head> <footer> <section> 추가
* 프로그램이 문서의 구조를 파악하기 쉬워짐(HTML 파싱 수월), 가독성 증가
* selection : 범용적인 셀렉션
* aticle : 섹션의 한종류, 페이지에서 독립되어있는 부분 (ex. 블로그웹의 블로그 본문)
* nav : 사이트 전체 or 내비게이션 메뉴
* aside : 섹션 내용과 관련되어있지만 없어도 상관없는 부분(ex. 문서 내용 요약)
* header : 섹션 헤더
* footer : 섹션의 푸터
* address : 섹션에 관한 문의처 정보(ex. 회사 전화번호등)
* time : 날짜, 시작을 나타냄
* 마이크로 데이터 : 문서에 삽입된 데이터의 속성 데이터(데이터의 데이터, 데이터의 의미가 명확해짐)
 
* 더 높은 접근성
* 휴먼 인터페이스에 가까워질수있음
 
* 더 높은 호환성
* 버전간 호환성  
* 전방호환성 - HTML5을 적용하기 이전의 브라우저에서도 HTML5사용가능(웹브라우저의 fall back 적용)
* fall back : 모르는 부분은 무시하는 웹 브라우저의 특성
* 후방호환성 - HTML5을 적용한 브라우저에서 HTML5 이전 버전 문서 표시가능
* 브라우저간 호환성
* 표준만 따른다면 어떤 브라우저에서도 똑같이 작동한다
* 이미 사용되고 있는 내용에서 사양을 추출한다
 
= 역사 =
* HTML의 목적 : 1998년 W3C는 html이 아닌 XHTML의 표준 사용을 권고한다. 그러나 XHTML은 HTML과의 비호환성으로 널리 퍼지지 못한다.
* 결과적으로 10년이상 사용되는 HTML의 저사양이 오히려 웹 어플리케이션의 발전을 저해했다. 그러나 W3C는 XHTML을 위해 새로운 HTML의 개발을 거절한다.
* 그러자 apple, mozillar, opera 세 기업이 모여 WHATWG를 발족하고 HTML의 진화를 지향한다.(apple은 플래시를 제공하는 어도비와 관계가 좋지않아 HTML5를 적극적으로 추진한다는 소문이다)
* 현재 HTML5는 W3C에 LAST CALL(최종 심사 초안)이 제출된 상태이다. 또한 W3C가 진행하던 XHTML2의 사양 제정이 중지로 HTML5의 표준화는 기정 사실로 보인다.



1. HTML5 개요

  • 자바스크립트 + CSS + HTML의 통합개념
  • 기존의 HTML : 문서를 위한 플랫폼, HTML5 : 웹 어플리케이션을 위한 플랫폼

1.1. HTML5 범위

* HTML + XHTML + 요소 + 요건 + 관련 API
* HTML+CSS+JavaScript

1.2. 달라진점

* 풍부한 웹 어플리케이션 기능 : 웹 어플리케이션의 표현력 증가
  • 동영상/음성
  • 2D 그래픽 처리
  • 오프라인에서 구동가능
  • 도메인간의 통신기능
  • 클라이언트축 데이터 저장
  • 백그라운드 처리 수행
  • 서버로부터의 데이터 푸시
  • 서버와의 쌍방향 통신수행
  • 로컬파일 읽기
  • etc. MathML, SVG등 외부 마크업언어 HTML에 직접 삽입가능 (책 범위 밖)
  • 기존 HTML4.- : HTML과 XHTML은 별개의 사양
  • HTML5 : HTML과 XHTML은 표현되는 문법의 차이, HTML5는 DOM에 따라 표시됨


* 시맨틱한 마크업
  • 기존 HTML문의 애매모호한 문법 개선
    • <head> <footer> <section> 추가
  • 프로그램이 문서의 구조를 파악하기 쉬워짐(HTML 파싱 수월), 가독성 증가
    • selection : 범용적인 셀렉션
    • aticle : 섹션의 한종류, 페이지에서 독립되어있는 부분 (ex. 블로그웹의 블로그 본문)
    • nav : 사이트 전체 or 내비게이션 메뉴
    • aside : 섹션 내용과 관련되어있지만 없어도 상관없는 부분(ex. 문서 내용 요약)
    • header : 섹션 헤더
    • footer : 섹션의 푸터
    • address : 섹션에 관한 문의처 정보(ex. 회사 전화번호등)
    • time : 날짜, 시작을 나타냄
    • 마이크로 데이터 : 문서에 삽입된 데이터의 속성 데이터(데이터의 데이터, 데이터의 의미가 명확해짐)

* 더 높은 접근성
  • 휴먼 인터페이스에 가까워질수있음

* 더 높은 호환성
  • 버전간 호환성
    • 전방호환성 - HTML5을 적용하기 이전의 브라우저에서도 HTML5사용가능(웹브라우저의 fall back 적용)
      • fall back : 모르는 부분은 무시하는 웹 브라우저의 특성
    • 후방호환성 - HTML5을 적용한 브라우저에서 HTML5 이전 버전 문서 표시가능
  • 브라우저간 호환성
    • 표준만 따른다면 어떤 브라우저에서도 똑같이 작동한다
    • 이미 사용되고 있는 내용에서 사양을 추출한다

2. 역사

* HTML의 목적 : 1998년 W3C는 html이 아닌 XHTML의 표준 사용을 권고한다. 그러나 XHTML은 HTML과의 비호환성으로 널리 퍼지지 못한다.
* 결과적으로 10년이상 사용되는 HTML의 저사양이 오히려 웹 어플리케이션의 발전을 저해했다. 그러나 W3C는 XHTML을 위해 새로운 HTML의 개발을 거절한다.
* 그러자 apple, mozillar, opera 세 기업이 모여 WHATWG를 발족하고 HTML의 진화를 지향한다.(apple은 플래시를 제공하는 어도비와 관계가 좋지않아 HTML5를 적극적으로 추진한다는 소문이다)
* 현재 HTML5W3C에 LAST CALL(최종 심사 초안)이 제출된 상태이다. 또한 W3C가 진행하던 XHTML2의 사양 제정이 중지로 HTML5의 표준화는 기정 사실로 보인다.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.1243 sec