2011.08.31 16:13

2.HTML5 Header stuff

HTML5 2011.08.31 16:13

HTML5에서는 이전 버전에 비해서 강화되고 추가된 측면도 있지만 불필요하게 복잡한 요소들은 과감하게 정리하는 측면도 함께 가지고 있습니다. 그 중의 한 요소가 바로 헤더 요소라고 할 수 있는 메타태그와 스크립트 태그 입니다. 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

기존의 메타태그에서는 콘텐트 타입을 명시하고는 했지만 HTML5에서는 간단하게 Charset만 명시하면 됩니다. 
 
<meta charset="UTF-8">

간단하지요 Java Script를 명시 할 경우에도 script type을 명시하는 부분이 제거 되었습니다. 이미 많은 분들이 script type을 명시하지 않고 사용하고 있었기 때문에 크게 영향을 받거나 하지는 않습니다만 공식적으로 좀 더 간단해 졌다고 의미를 둘 수 있습니다.

이전버전의 Script 표기 법은 아래와 같습니다.
<script type="text/javascript" src="jquery.js"></script>

HTML5에서 간소화 된 표기는 아래와 같습니다.
<script src="jquery.js"></script>

CSS 파일에 대한 명시도 역시 단순해 졌습니다.
<link rel="stylesheet" href="html-my.css">

HTML의 시작 부분에서 공식적으로 복잡했던 부분을(사실 비공식적으로는 단순하게 다들 사용하고 있었습니다.) 역시 간단하게 수정했습니다.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 이랬던 것을
<html lang="en"> 이렇게...

HTML5는 나중에 좀 더 언급하겠지만 외형을 나타내는 태그들을 과감하게 삭제하고 그 기능을 CSS로 넘기는 등 HTML의 본래 목적에 충실할 수 있는 방향으로 진화되고 있습니다.

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고
2011.08.31 08:25

1.HTML5 DocType 정의

HTML5 2011.08.31 08:25

 

문서 타입이란 이 문서에 대해서 HTML의 버전이나 언어와 같은 요소를 사전에 정의해서 문서를 쉽게 읽어드리게 하는 요소로 제공 됩니다.

<!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
<Sample1> HTML이전의 DocType

문서 타입을 정의하는 방식은 HTML5은 확실히 간단해 졌습니다. HTML5에서는 다음과 같이 한 줄로 통일 되었습니다.

<!DOCTYPE html>

 앞도 뒤도 볼 것 없이 그냥 한 줄이면 됩니다. 기존의 HTML 문서와의 호환성을 유지하면서 HTML5 문서를 정의하기 위한 간단한 방법이라고 할 수 있습니다.  

결과적으로 실제로 사용하는 HTML5 문서를 정의할 경우에도 아래와 같이 간단하게 구현됩니다.

 <!DOCTYPE html>
<html>
  <head>
    <title>HTML5 is rocks!</title>
  </head>
  <body>
    <h1>HTML5 Rocks!</h1>
  </body>
</html>

 

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
신고
2011.08.30 08:24

 최근의 어떤 이들을 만나도 빠지지 않는 주제 중의 하나가 바로 HTML5 입니다. 
 제가 요즘 많은 관심을 기울이고 있어서 그리 보이기도 하겠지만 HTML5가 가지고 있는 잠재력은 많은 앞으로 넘어야 할 문제 점들에 비해서는 훨씬 더 매력적으로 보이는 것이 사실입니다.

 뿐만 아니라 구글이나 애플 그리고 마이크로소프트와 같은 업체들이 가지고 있는 HTML5에 대한 비전은 더 큰 기대감을 가지기에 충분합니다. 


 1. HTML5는 결국 HTML5 일 뿐이다.

옆의 그림은 제가 발로 그린 그림입니다. (실제로 발로 그린건 아니라는 것은 아시리라.. ^^;) HTML5의 경우 기본적인 태그의 확장이나 변경이 이루어지고 Java Script를 통해 접근 할 수 있는 API의 기능이 많이 확장되었습니다. 
 또 Off-line을 지원할 수 있도록 새로운 기능들이 추가되고 멀티 테스크를 지원하는 등 하나의 새로운 개발 플랫폼으로써 손색이 없을 정도로 많이 확장되었습니다. 
 하지만 그렇다고 해도 HTML5는 HTML 일 뿐입니다. 결국은 웹을 통해서 전송될 수 있는 태그와 Java Script의 덩어리 입니다. 
 즉 마음만 먹으면 그 안의 내용을 열어보기에 아주 수월한 구조라는 것 입니다. 
 이런 경우 중요한 코드가 클라이언트 측에 구현되는 것은 데이터의 조작이나 외곡에 많은 위험을 가지고 있게 됩니다. 최대한 서비스 측에 비지니스 로직이 포함될 수 있도록 해야하고 최소한의 로직만 클라이언트에서 가져 갈 수 있게 해야 합니다. 
 

2. HTML5이 오프라인 기능도 결국 임시 기능입니다. 

HTML5에 추가된 기능을 보면 기존의 쿠키보다 더 나은 방법으로 접근 할 수 기능들을 제공하는 격리 저장소 이외에도 웹 데이터베이스등 오프라인에서도 잘 실행할 수 있도록 데이터 독립성을 유지하는데 도움이 되는 기능들이 포함되어 있습니다. 
 하지만 HTML5에서 제공하는 방법은 아직 여전히 완전하지 못합니다. (앞으로 충분히 개선될 여지도 보입니다만..) 즉 클라이언트에서 관리되는 데이터는 어떤 순간에는 완전히 잃어버리더라도 다시 서비스에서 다운받아서 복구 할 수 있을 정도로 가볍운 용도로 사용하는 것이 적합하다는 것입니다. 

 즉 HTML5을 사용해서 웹이든 모바일이든 어떤 형태의 앱을 만들더라도 그 뒷단의 서비스가 잘 구현되어 있지 않으면 상당히 불완전한 모습의 앱이 될 수 밖에 없다는 결론입니다. 


 정리

 공부해 보면 HTML5는 생각만큼 새로 공부할 것이 많지 않습니다. 요란한 소문에 비해서는 아직까지 그렇게 많은 내용이 없습니다. 이 시점에서 HTML5을 왜 사용하는지 다시 한번 생각해 볼 필요가 있습니다. 그리고 전체적인 그림을 볼 때 컨슈머 지향적인 앱의 개발에 있어서 아랫쪽은 클라우드 기반 서비스로 안정성과 탄력성 그리고 확장성을 유지하고 핵심 로직을 관리하는 방식으로 가져가야 합니다. 한 걸음 나아가서 데이타는 클라우드 안에 잘 백업 되어 있다가 필요하면 다시 사용자의 앱에 데이타가 복원 될 수 있는 구조를 유지하는 것이 이상적이라고 할 수 있습니다. 

 앞으로 HTML5와 관련된 내용을 한 동안 정리해 나갈 생각입니다. 많은 기대와 성원 부탁드립니다. 
감사합니다.  

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는  컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.

신고


티스토리 툴바