* 모바일 기기 + 클라우드 컴퓨팅 + 네트워킹 시대의 웹과 애플리케이션 제작의 새로운 개념
* 구조 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 |