[HTML] HTML5 ?[HTML] HTML5 ?

Posted at 2013.10.04 16:43 | Posted in == Web ==/HTML



facebook에 글올리기



HTML5?


HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다. 2004년 6월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다. 2013년 4월 현재에도 개발 중이다.

HTML5는 HTML 4.01, XHTML 1.0 DOM Level 2 HTML에 대한 차기 표준 제안이다. 최신 멀티미디어 콘텐츠를 브라우저에서 쉽고 용이하게 볼 수 있게하는 것을 목적으로 한다.


출처 : 위키 피디아 



여러가지 이유가 있지만 가장 중요한 건, HTML5가 웹 표준을 정의하고 선도할 수 있는 클라이언트 언어이기 때문이다. 웹표준을 지키지 않지만 엄청난 점유율을 보이는 인터넷 익스플로러와 플래쉬 액티브X 등으로 우리의 웹은 표준 및 크로스 브라우징에서 점점 멀어지고 있었다. 위키 피디아의 설명 무슨말인지 너무 어렵다. 다들 HTML5 가 중요하다고 써야한다고 하는데 왜 그럴까? 왜 써야하지? 최신 기술이라서?

하지만 웹표준을 지키면서 강력한 기능을 지원하는 HTML5가 나오면서 새로운 시대가 열렸다. 특히 모바일 웹의 영향력이 부상하면서 웹 표준은 필수가 되었다. 엄청난 점유율을 보이던 인터넷 익스플로러도 항복을 하고 말았다.


웹 표준은 왜 중요한가?


웹 표준은 국제 규격이자 약속이다. 약속을 지키지 않는 인터넷 익스플로러가 더 큰소리 치던 세상이 이상한 세상이었다. 그만큼 HTML5 이전의 언어들이 익스플로러의 규칙과, 플래쉬, 액티브X의 역활을 해줄 수 없기 때문이었다. 하지만 HTML5는 이 모든것을 가능하게 해준다. 모바일에서도 HTML5 웹 표준을 지원한다. 웹표준을 지켜서 웹을 만들면, 모든 페이지에서 공통된 화면을 볼 수 있다. 크로스 브라우징이다.

예전처럼 인터넷 익스플로러 하나의 브라우저에 의존적이지 않은 지금, 개발 소요를 줄이고 공통된 기능을 제공하기 위해서는 웹 표준을 지켜야하고 그래서 HTML5를 사용해야 한다.


브라우저별 HTML5 지원 현황




인터넷 익스플로러도 열심히 웹 표준을 따라가고 있다.

출처 : 위키피디아


HTML5의 기능


그러면 HTML5는 어떤 기능을 제공하길래, 플래쉬를 비롯한 기존의 여러 기능을 대체할 수 있는가?


(1) 새로운 마크업 : 페이지에 있는 구간, 머리글, 바닥글, 내비게이션을 만드는 새로운 방법을 포함해서 여러분이 만든 페이지 구조를 체계적, 의미론적으로 만드는 데 도움을 준다.


(2) 폼 : HTML4에서 정보를 입력할 때 form을 사용했을 텐데, HTML5에서 훨씬 개선됐습니다. 필드에 값을 채우면 이메일, URL, 전화번호 등을 제대로 입력했는지 손쉽게 검증할 수 있습니다.


(3) CSS3 : 이전에도 CSS3를 사용할 수 있었지만, HTML5에서 CSS3를 내장하면서 더욱 효율적으로 사용합니다. 요소들을 움직이게 하고, 멋진 둥근 모서리와 심지어 그림자 기능까지 구현할 수 있습니다.


(4) 캔버스 : 캔버스를 이용하면 웹 페이지에서 그림을 그릴 수 있습니다. 텍스트, 이미지, 선, 원, 사각형, 패턴, 기울기, 경사도도 그릴 수 있다.


(5) 오디오와 비디오 : 이전에는 오디오와 비디오를 지원하기 위해서는 플러그인이 필요했었지만, 이제 HTML5를 사용하여 지원할 수 있습니다.


(6) 오프라인 웹앱 : 네트워크와 연결이 안 될 때에도 애플리케이션이 작동하게 합니다.


(7) 로컬 저장소 : 사용자의 브라우저에서 로컬 저장소를 사용합니다. 즐겨찾기 주소, 장바구니 목록, 효율성을 위해 거대한 캐시가 필요할 때 사용할 수 있습니다.


(8) 지오로케이션 : 위치를 알려줄 수 있는 API입니다. 구글 지도와 연동할 수 있습니다.


(9) 웹 워커 : 사용자 인터페이스에 방해를 주지 않고 백그라운드에서 동시에 실행되는 워커를 사용할 수 있습니다.


HTML5에서는 이러한 강력한 기능들이 새로 추가 됐습니다.

하지만 아직 모든 브라우저에서 이 HTML5의 새로운 기능들을 지원하는 것은 아닙니다.




점점 HTML5를 지원하면서 좋아지겠죠?


그럼 HTML5에 대해 간단하게 알아봤습니다.

HTML5는 어떻게 사용하면 될까요? 기존 형식에서 4가지를 바꿔주면 됩니다.


HTML5-o-Matic


(1) doctype 변경

HTML5에서는 doctype 선언이 간편해졌습니다.


기존 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5 변경 : <!doctype html>


훨씬 간단해졌습니다. 이 doctype 형태는 HTML5뿐만 아니라 HTML 향후 버전에 대한 doctype입니다. 그뿐만 아니라 이 doctype은 이전 버전의 HTML에서도 문제없이 작동합니다.



(2) meta 태그 변경


meta 태그도 정말 간단해졌습니다.


기존 : <meta http-equiv="content-type" content="text/html"; charset=UTF-8">

HTML5 변경 : <meta charset="utf-8">


meta 태그는 문자 인코딩 문자를 지정합니다. 영화를 볼 때 코덱이 있어야 영상을 볼 수 있는 것처럼 웹 브라우저도 한글 같은 문자를 해석할 때 한글을 읽을 수 있는 코덱 같은 것이 필요합니다. 표준 인코딩 문자인 UTF-8로 지정합니다.


(3) link 태그 변경


css 파일을 import 시키는 link 태그도 간편해졌습니다.


기존 : <link type="text/css" rel="stylesheet" href="csscommon.css">

HTML5 변경 : <link rel="stylesheet" href="csscommon.css">


(4) script 태그 변경


HTML5에서는 자바스크립트가 기본 표준 스크립트 언어가 됐습니다. 따라서 script 태그에서도 type 특성을 제거할 수 있습니다.


기존 : <script language="javascript"></script>

HTML5 변경 : <script></script> 



그럼 HTML5 변경 사항을 적용해서 HTML5 기본 태그 형식을 만들어 보자

Colored By Color Scripter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
  <head>
    <title>HTML5</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="csscommon.css">
  </head>
  <body>
    <script>
                    스크립트 언어 입력
    </script>
    
              HTML Body 입력
    
  </body>
</html>



이제 HTML5에 대해 조금은 알겠나요?

다음 포스팅에서 좀 더 알아봅시다.



'== Web == > HTML' 카테고리의 다른 글

[HTML] HTML5 ?  (0) 2013.10.04
이웃추가
facebook에 글올리기

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기