HTML5

* 모바일 기기 + 클라우드 컴퓨팅 + 네트워킹 시대의 웹과 애플리케이션 제작의 새로운 개념

* 구조 structure + 스타일 style+ 기능 functionality  → 상호의존, 조직적

* html5는 웹이 아닌 웹 어플리케이션을 가능하게 하기 위해 만들어짐


1. html5 추가기능    

발췌 : http://html5dev.kr/357

발췌 : 2012년 KISA 전자인증기술워크숍에서 발표한 W3C 웹크립토그래피 API (http://channy.creation.net/lecture/webstandards )


1. 멀티미디어 : 유튜브의 경우는 html5 멀티미디어 기능을 평가판으로 제공

2. 그래픽 : 하드웨어의 가속을 받아 2차원 그래픽과 3차원 그래픽을 구현

   - 2차원 그래픽 구현 : SVG태그 이용한 2차원 벡터그래픽 구현, 자바스크립트 캔버스를 사용한 2차원 래스터 그래픽 구현

   - 3차원 그래픽 구현 : CSS3를 사횽한 3차원 구현, 자바스크립트 webGL사용한 3차원 구현

     참조: http://lights.elliegoulding.com

     (three.js 사용  https://github.com/mrdoob/three.js, http://kinesis.kr/entry/Threejs-Lets-Do-a-Cube)


3. 통신

4. 장치접근

5. 오프라인 및 저장소

6. 시멘틱 태그

7. css3 



2-1. HTML 구조


    <!DOCTYPE html> → 1. 독타입

    <html lang="ko"> → 2. <html>

    <head> → 3. <head>

    <meta charset="utf-8" /> → 4.meta

    <meta name="description" content="this is an example" /> 

    <meta name="keword" content="html5, css3, javascript" /> 

    <title>this text is the title of the document</title> → 5. <title>

    <link rel="stylesheet" href="mystyle.css"> → 6. <link>

    <body>

    </body>

    </html>


1. <doctype> : 생성할 문서타입으로 표준모드를 활성화하고 브라우저가 html5를 해석하게 한다

2. <html> : 문서 타입을 선언한 후에 html 트리구조를 생성해야한다. 루트요소는 <html>요소이다. lang의 속성은 한글이다.

3. <head>: <head>태그 내에서 웹페이지의 제목을 정의하고, 문자인코딩선언, 일반적인 정보를 제공

4. <meta> : 문자의 인코딩정의하는 <meta>태그로 텍스트를 화면에 표시하는 방법을 지정한다

5. <title> : 문서의 제목을 지정한다

6. <link> : 문서내의 외부파일의 스타일, 스크립트, 이미지, 아이콘을 포함한다


2-2. 문서구조

1. <header> : 머리글 등의 헤더 정보를 나타내며, 문서의 다른 섹션에 적용. 섹션의 헤더를 표시하는 용도이지만 

    인덱스, 검색 폼, 로고등을 묶는데에도 사용할 수 있다

2. <nav> : 메뉴나 인덱스 같은 내비게이션 목적의 링크 섹션을 나타낸다. 

   <nav>요소내에는 내비게이셔페이지의 모든 링크가 아니라 주요 내비게이션 구역 부분만 있어야 한다

3. <section> : 문서내에서 범용적인 섹션으로, 일반적으로 column같은 여러 콘텐츠를 구축,

    뉴스기사모음, 게시물 같은 특정 테마콘텐츠를 나타낸다

4. <aside> : 인용사이드바의 정보, 광고

5. <footer> : 부모 요소와 관련된 추가 정보를 나타낸다. 바디뿐만 아니라 바디의 다른 섹션내에서도 사용가능

6. <article> : 관련정보의 독립적인 부분을 나타낸다. 신문의 기사나 블로그의 모든 항목. 

    블로그항목의 사용자 댓글처럼 항목이 목록내에 목록을 보여주는데 사용



2-3. 의미적 표현, 컨텐츠 모델



콘텐츠 모델은 특정 요소 안에 좀더 세분화되어야 하는 콘텐츠의 종류에 관한 폭넓은 정의이다




2-4. 요소 

1. <hgroup>: 제목과 부제목처럼 제목이 여러 레벨인 경우 h요소를 그룹화하는데 사용

2. <figure> : 이미지의 다이어그램. 비디오처럼 메인콘텐츠의 독립적인 부분을 나타낸다. 

    정상적인 흐름에 영향을 미치지 않고 메인컨텐츠에서 제거할 수 있는 정보이다. <figurecaption>으로 설명을 적어준다

3. <mark> : 상황에 따른 테스트 강조, 사용자 입력에 대한 응답으로 표시되는 텍스트

4. <small> : 저작권 법률적 제약사항 면책조항

5. <cite> : 책 영화 시등의 제목



저작자표시

'공부 > CSS' 카테고리의 다른 글

CSS 3장 } 선택자 예시 : 상태선택자 . 보이고 사라지기  (0) 2012.12.18
CSS 2장 } 선택자 예시 : 상태선택자 . 로그인폼  (0) 2012.12.18
CSS 1장 } 선택자종류  (0) 2012.12.04
Posted by uuulike :

티스토리툴바