티스토리 뷰

IT 이야기/프로그래밍

[강의] HTML5 그 두번째 이야기 - HTML5는 OOO가 다르다

하늘과 나b 2011. 11. 5. 08:41
HTML5 두번째 시간이 돌아왔습니다.

이번 시간에는 HTML5인지 아닌지 어떻게 구분할 수 있는지와
기존 HTML 버전과 무엇이 다른지 알아보도록 하겠습니다. 



첫번째 HTML5인지 아닌지 알아보는 방법에 대해서 알아보도록 하겠습니다.

HTML 페이지를 만들 때 일반적으로
DOCTYPE이라는 것을 문서의 처음 부분에 지정하도록 되어 있는데
아래의 내용과 같이 쓰곤 했었죠.

HTML5 이전에 사용했던 버전의 DOCTYPE!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1


이걸 ... 외우지도 못하고 그냥 어디에 적어두었다가 복사해서 넣곤 했었던 코드였습니다.
어느 프로그램에서는 자동으로 붙여넣어 쓸 수 도 있었죠. 


HTML5에서의 새로운 문서 형식 (DOCTYPE)

 
HTML5는 이전 버전의 HTML과는 다르게
간단하고 새로운 문서형식(DOCTYPE)을 제공하고 있는데요.
 
위에 보이는 코드들은 복잡해서 외우기 어렵지만
HTML5에서는 이렇게 한 줄만 써주면 됩니다.
참 쉽죠잉~~!!

<!doctype html>

 
이렇게 써주면 웹브라우저에서는
아 이건 HTML5 문서구나! 라고 인식하여 그에 맞게 보여주게 됩니다.
 

 

HTML5는 OOO이 다르다!

 
HTML5는 어떤 기능들이 추가되었을까 궁금하시죠?

HTML4나 XHTML와 비교해서
HTML5가 무엇이 다른지 한번 알아보도록 하겠습니다.
 

 1. 확장된 태그의 지원  

HTML5에서는 이전 버전의 HTML보다 더 많은 태그들을 지원하는데요.
특히 문서 구조를 적합하게 header, footer, nav, section 같은 구조화 태그도 추가되었습니다.

HTML5 이전에는
아래 그림의 왼쪽에서는 header, side-bar, content, post, footer 등의
각 부분부분을 id로 지정해서 적용을 했는데요

HTML5에서는 각각의 태그로 지정해서 편하게 사용할 수 있어요^^
(자세한 내용은 다음에 다루도록 하겠습니다.)


HTML5의 새 구조적 마크업 - 출처 : http://html5doctor.com/designing-a-blog-with-html5/



 더욱 편리해진 폼(form)  


HTML5에서의 새로운 변화는 바로 새로운 폼(form)의 속성이 추가된 것인데요.
 
기존의 HTML 환경에서는 기본적으로 지원되지 않아서
자바스크립트를 이용해서 구현했던 기능들이 추가가 되었습니다.
달력, 스크롤바, 웹사이트 목록, 이메일, 색상표 등의 타입이 추가가 되었어요.

또 Form 양식에 대해서 유효성 검증 기능도 추가로 지원해서
각각의 폼 양식마다 유효성 검증 기능을 켜고 끌 수 있도록 했으며
정규식 표현의 사용을 통해 더 빨리 작업을 할 수 있게 되었어요. 

이제 HTML5를 사용하면 자바스크립트의 양이 많이 줄어들 것 같네요.


 
 리치 웹 애플리케이션  

HTML5는
웹 어플리케이션을 만드는데 도움이 되는 많은 API를 제공하는데요. 

전에는 웹 페이지에서 그림을 그리거나 비디오 및 오디오를 처리하려면
별도의 플러그인(실버라이트, 플래시 등)을 사용해서 처리를 했는데
HTML5에서는 이를 기본적으로 지원한다는 사실!
 
2차원 그래픽을 그릴 수 있는 canvas 요소와 내장 비디오 및 오디오 재생을 위한 요소를 통해
멀티미디어 기능을 강화할 수 있어요. 그래서 일부에서는 HTML5이 플래시나 실버라이트의 기능을 대체할 것이라는 이야기도 많이 나오고 있죠.


이것으로 HTML5 두번째 강의를 마치겠습니다.

두번째 강의를 마치며


이것으로 두번째 강의를 마쳤네요. 
궁금하신 부분이 있다면 댓글로 남겨주시면 답변해 드릴게요^^

글 잘 보셨나요?
  잘 보셨다면 아래에 손가락 모양을 꾹 눌러주세요 1초도 안걸려요^^
저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - 주석문  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본  (2) 2011.12.02
[HTML/CSS] 마우스 커서 모양(스타일) 바꾸기  (1) 2011.11.30
[강의] HTML5란? HTML5 자세하게 알아보기  (2) 2011.10.23
C언어 강좌 - 함수 fopen()의 모든 것!  (5) 2011.10.19
POST 방식과 GET 방식의 차이  (0) 2011.10.17
모바일 홈페이지로 자동 이동시키는 소스  (2) 2011.09.21
[HTML 쉽게 이해하기 강좌] 2단 레이아웃 한 방에 만들기  (4) 2011.07.04
공유하기 링크
댓글