[ 오라클 DBA & 빅데이터 분석 ] 국비지원 취업연계교육 연수생모집
댓글 쓰기 권한이 없습니다. 로그인 하시겠습니까?
2016.03.08 16:13
HTML5 개요
(*.36.106.242) 조회 수 4135 추천 수 0 댓글 0
■ HTML5란 무언인가?
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다. HTML5는 엑티브X(Active X)를 설치하지 않아도 동일한 기능을 구현할 수 있고, 특히 플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 없이도 웹 브라우저(web browser)에서 화려한 그래픽 효과를 낼 수 있다. 현재 W3C를 주축으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다.
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다. HTML5는 엑티브X(Active X)를 설치하지 않아도 동일한 기능을 구현할 수 있고, 특히 플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 없이도 웹 브라우저(web browser)에서 화려한 그래픽 효과를 낼 수 있다. 현재 W3C를 주축으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다.
■ HTML5
목적
기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이며, 리치웹 응용을 가능하게 한다.
=>엑티브엑스,플래시등의 플러그인의 문제점 보완
기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이며, 리치웹 응용을 가능하게 한다.
=>엑티브엑스,플래시등의 플러그인의 문제점 보완
■ HTML5 일정 및 역사
|
2007년 5월 HTML5와 Web Forums 2.0 스펙 채택 - 리뷰 기반으로 2007년 11월 HTML5 디자인 원칙 작업 초안 2010년 1월 HTML5 Last Call 작업 초안 2010년 12월 HTML5 후보 권고안(Recommendation) 2012년 1월 HTML5 제안 권고안 2012년 3월 HTML5 정식 권고안 |
■ HTML5의 특징
1. 시맨틱 태그(시멘틱한 마크업)의 등장
1. 시맨틱 태그(시멘틱한 마크업)의 등장
HTML 영역을 보다 한눈에 알기 쉽게하고, 필요한 부분만 정확하게
검색하기 위해 등장
기존의 html4보다 더 명확한 의미 표현이 가능하도록 26개 정도의
새로운 마크업이 추가
| header | 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등을 포함 |
|
nav |
사이트의 메뉴나 링크 같은 네비게이션 요소들을 포함 |
|
section |
실제 문서 내용이 들어감, 또 다른 section 태그를 포함 가능 |
|
article |
문서 내용이 많을 경우 여러개의 요소로 나눌 수 있다 |
|
aside |
문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치 |
|
footer |
작성자 정보, 저작권, 관련문서 링크 둥 부가 정보를 담고 , 문서 하단에 배치 |
|
hgroup |
제목과 그와 관련된 부제목을 묶어주는 태그 |
2. 새로운 폼 컨트롤
달력(calendar), 날짜(date), 시간(time), 이메일(email), URL, 검색(search)과 같이 새로운 폼 컨트롤이 추가
3. HTML에서 직접 개체를 그릴 수 있는 Canvas 요소 지원
플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 기술을 대체할 수 있는 영역으로
직접 그림을 그리거나 다양한 효과 및 애플리케이션을 만들수 있다.
아직 기능적으로 많이 부족하지만 발전 가능성이 무한해 보임
4. 플러그인이 필요없는 동영상, 음악 지원
한줄의 코드로 동영상 재생 : <video src = "video.mp4" width="320" height="240" autoplay>
하지만 브라우져에서 지원하는 코덱이 다르기 때문에 아래와 같이 코덱에 따라 달라지는 동영상 파일을 설정해줘야 합니다.
|
<video width="320" height="240" autoplay controls poster="image.jpg"> <!- mp4 : 사파리, IE9, 아이폰, 아이패드, 안드로이드, 윈도우7 폰버젼 --> <source src="video.mp4" type="video/mp4"> <!- WebM : 파이어폭스4, 오페라, 크롬 --> <source src="video.webm" type="video/webm"> <!- ogv : 파이어폭스4 이전버젼 --> <source src="video.ogv" type="video/ogv"> </video> |
5. 다양한 API 지원
| 드래그 & 드랍 | 웹 콘텐츠들을 드래그 할 수 있는 기능 (모든 브라우져에서 지원하지 않음) |
|
애플리케이션 캐시 |
오프라인 상태에서도 애플리케이션을 실행할 수 있도록 지원하는 기능 |
|
웹스토리지 |
쿠키처럼 클라이언트 쪽에 데이터를 저장할 수 있는 기능 |
|
Indexed 데이터베이스 |
클라이언트에 저장하는 데이터 베이스 기능 |
|
웹 워커 |
시간이 오래 걸리는 작업을 백그라운드로 실행하는 기능 |
|
지오로케이션 |
PC나 모바일 장치에서 현재 위치를 파악할 수 있게 해주는 기능 |
■ HTML5의
문제점
1. HTML5를 지원하지 않는 브라우져의 존재
- IE6/7/8에서 미지원, IE9에서도 완벽하게 지원하지 않음
- 2012년 1월 윈도우 XP 점유율은 47%로 앞으로 상당 기간 HTML5가 나아가는데 큰 걸림돌이 될 것으로 보임
- IE6/7/8에서 미지원, IE9에서도 완벽하게 지원하지 않음
- 2012년 1월 윈도우 XP 점유율은 47%로 앞으로 상당 기간 HTML5가 나아가는데 큰 걸림돌이 될 것으로 보임
(윈도우 XP는 IE8 버젼까지만 설치가 가능하기 때문에 HTML5를 보기 위해서는
다른 브라우져 설치가 필요함)
2. 저작권 보호 문제 (개발소스, 동영상, 음악)
3. ActiveX의 보안성을 대체할 요소가 없음
- 은행권, 공공기관에서 사용하는 ActiveX의 보안성을 대체할 요소가 없기 때문에 ActiveX의 사용은 당분간 계속될 것으로
보임
■ 브라우저 지원 현황
브라우저
Ver
HTML5 검사 점수[2]
2012년 1월 6일 Ver HTML5 검사 점수
2012년 5월 23일[3]구글 크롬 16.0 373/475 18 400모질라 파이어폭스 10.0 332/475 12 345오페라 11.60 329/475 11.60 338오페라 12 알파 344/475 12.00 385애플 사파리 5.1 302/475 5.1 317인터넷 익스플로러 9 141/475 9 138인터넷 익스플로러 10 306/475 10 316맥스톤 - - 3.3.7 437
2012년 1월 6일 Ver HTML5 검사 점수
2012년 5월 23일[3]구글 크롬 16.0 373/475 18 400모질라 파이어폭스 10.0 332/475 12 345오페라 11.60 329/475 11.60 338오페라 12 알파 344/475 12.00 385애플 사파리 5.1 302/475 5.1 317인터넷 익스플로러 9 141/475 9 138인터넷 익스플로러 10 306/475 10 316맥스톤 - - 3.3.7 437
Designed by sketchbooks.co.kr / sketchbook5 board skin
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5