Diving In HTML5
 대문  주제별 보기  함수사전  코드모음  바뀐글  목록   Anonymous
총 페이지 수 : 3224

전체 함수/용어사전
Facebook Joinc 그룹   Joinc QA 사이트
현재위치 : 미니사이트>HTML5>Diving_in_html5



joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.

Contents

1 소개
2 New semantic elements
2.1 DocType
2.2 ROOT ELEMENT
2.3 <HEAD> 엘리먼트
2.3.1 문자 인코딩
2.3.2 Friend Link Relations
2.3.2.1 REL = ALTERNATE
2.3.2.2 HTML5의 다른 Link Relations
2.4 HTML5의 새로운 엘리먼트들
2.4.1 HEADER
2.4.2 ARTICLES
2.4.3 DATES 와 TIMES

1 소개

HTML5는 HTML의 차세대 버전으로, HTML 4.01, XHTML 1.0, XHTML 1.1를 대신하기 위해서 만들어졌다. HTML5는 현대적인 웹 애플리케이션을 만들기 위해서 필요한 여러 기능들을 가지고 있다. 현재 널리 사용되고 있는 HTML 4.01이 단지 문서를 출력하는데 중점이 맞추어져 있어서, 구조적 문서의 작성 (출판), 멀티미디어 데이터의 처리, 다른 웹 서비스와의 통신, 이미지 처리에 매우 취약해서 웹 애플리케이션을 만들기 힘들다.

기존 HTML의 이러한 문제점은 IE등에 표준적이지 않은 기술을 이용해서 인터넷 서비스를 구현하도록 하는 빌미를 제공하기도 했다.

이전의 HTML과 마찬가지로 HTML은 크로스 플랫폼을 지원한다. HTML5 문서는 Mac OS X, Linux, 윈도 혹은 다른 모바일 운영체제를 가리지 않고 동일하게 해석된다. 물론 기존 HTML도 그렇기는 하지만 정치적 혹은 기술적 문제들 때문에 크로스 플랫폼을 지원한다고 하기엔 부족한 면이 있었다.

HTML5에서는 아마도 정치적인 문제로 호환하지 않는 브라우저를 강요당하는 일은 없을 것으로 보인다. 인터넷 시장의 리더인 구글과 애플이 HTML5를 강력하게 지원하고 있으며, 차세대 시장으로 확실시 되는 모바일 영역역시 마찬가지이기 때문이다.

Apple Safari, Google Chrome, Mozilla Firefox, Opera 등 대부분의 브라우저가 HTML5를 지원하고 있다. 또한 iphone, ipad, Android 폰등에 기본적으로 탑재된 브라우저들 역시 모두 HTML5를 지원한다.

이하 HTML5를 제외한 버전의 HTML은 HTML로 표기하겠다.

2 New semantic elements

2.1 DocType

HTML 문서는 아래와 같이 문서 타입을 정의 한다. 대부분의 HTML 문서의 첫 줄에서 확인할 수 있다.
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
이것을 docktype이라고 하며, 문서의 형식을 알려준다. doctype를 사용하게 된데에는 - 암울하면서도 - 긴 역사가 있다. 마이크로 소프트사가 맥용 Internet Explorer 5를 개발할 때, 몇 가지 문제를 찾아내게 된다. 그들의 상위 버전의 브라우저가 점점 더 표준을 따르게 되면서, 오래된 웹 문서를 제대로 랜더링 하지 못하게 된 것이다. 그들은 제대로 랜더링 하기 할 수 있도록 만들었는데, 브라우저 사용자들은 잘못된 랜더링 결과를 보게 된 것이다. 그 당시에는 웹 표준이 잘 지켜지지 않았고 이런 저런 흠도 많을 때였는데, Netscape 4와 Internet Explore 4는 이들 (그리 깨끗하지 않은)문서를 기준으로 개발되었기 때문이다. 그래서 더 좋아진 IE5에서 웹 문서가 깨지는 문제가 발생했다.

마이크로소프트사는 참신한 해법을 제시했다. IE5를 위해서 doctype이라는 것을 두도록 한 것이다. 참고로 이전에는 문서의 처엄을 알리기 위해서 <HTML> 태그만 필요했다. 그래서 doctype이 없는 오래된 페이지들은 예전 방식으로 렌더링을 하고, doctype 이 붙은 현대적인 문서는 최신 방식으로 랜더링하도록 했다. 즉 doctype는 읽고 있는 웹 문서가 최신 표준을 따르는 웹 문서라는 사실을 알려준다.

글쎄.. 참신한 해법이라고 했지만 참신한 해법이라고 하기에는 문제가 있다. 모든 주요 브라우저들은 두개의 모드를 지원해야 했기 때문이다. 예전 방식을 quirks mode라고 하고 표준 모드를 standards mode라고 한다.

2.2 ROOT ELEMENT

HTML 페이지는 엘리먼트의 모음으로 구성된다. 페이지를 구성하는 엘리먼트들은 트리구조를 가진다. 엘리먼트들은 하나의 쌍으로 이루어진 경우가 많으며, 하나의 트리에서 두개 이상의 가지 (branches)가 만들어지는 경우도 있다. 엘리먼트중 자식 노드를가지지 않는 경우도 있는데 이를 'leaf 노드라고 한다. 이들 엘리먼트 트리에서 가장 상위에 있는 엘리먼트를 "루트 엘리먼트"라고 한다. HTML 문서에서 루트 엘리먼트는 항상 <html>이다.

루트 엘리먼트는 다음과 같다.
<html xmlns="http://www.w3.org/1999/xhtml" 
      lang="en" 
      xml:lang="en">

위의 코드에는 잘못된 부분이 하나도 없지만, HTML5에서는 루트 엘리먼트를 더 간결하게 표현할 수 있다. HTML 엘리먼트에서 xmlns 어트리뷰트의 경우에는 XHTML 1.0의 잔재로 이 HTML 문서가 XHTML 네임 스페이스를 포함함을 알려준다. HTML5는 항상 이 네임 스페이스를 포함하므로 더 이상 문서내에서 사용할 필요가 없다. 
<html lang="en" xml:lang="en">

여기에는 lang과 xml:lang두개의 어트리뷰트가 있는데, HTML 문서의 언어를 정의 하기 위해 사용한다. en은 영어를 의미한다. 그런데 언어를 정의 하는데 왜 두개의 어트리뷰트가 필요할까 ? 이 역시 XML의 잔재다. HTML5에서는 lang 어트리뷰트만 정의 하면 된다.

결국 HTML5의 문서라면 아래와 같이 단순하게 문서를 정의 할 수 있다.
<html lang="en">

2.3 <HEAD> 엘리먼트

루트 엘리머트의 첫번째 자식은 <head> 엘리먼트이다. <head>에는 사용하는 스타일 쉬트, 웹페이지를 대표하는 아이콘 (웹 브라우저에서 사용한다), 웹 문서를 대표하는 단어과 같은 메타정보를 포함한다. (문서 본문은 <body> 엘리먼트를 사용한다.). <head> 앨리먼트는 HTML5에서 그대로 사용한다. 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>My Weblog</title> 
  <link rel="stylesheet" type="text/css" href="style-original.css" /> 
  <link rel="alternate" type="application/atom+xml" 
                        title="My Weblog feed" 
                        href="/feed/" /> 
  <link rel="search" type="application/opensearchdescription+xml" 
                        title="My Weblog search" 
                        href="opensearch.xml"  /> 
  <link rel="shortcut icon" href="/favicon.ico" /> 
</head>

2.3.1 문자 인코딩

만약 웹 문서의 만든다면 문서의 내용을 화면에 표시할 수 있는 텍스트와 심볼들로 구성하길 원할 것이다. 그러나 컴퓨터는 문자와 심볼을 다루지 못한다. 컴퓨터가 다루는 것은 비트이며, 문자와 같이 비트가 추상화된 정보는 소프트웨어의 재현으로 모니터에 출력된다. 실제 컴퓨터가 화면에 표시할 모든 문자는 독특한 문자 인코딩형식으로 저장이 된다. 지구상에는 다양한 종류의 문자가 있으므로, 문자 인코딩 역시 다양한 형식이 존재한다. 그러므로 이를 제대로 재현하기 위해서는 소프트웨어 (여기에서는 브라우저)에 인코딩 정보를 알려주어야 한다.

문자 인코딩 정보는 <header>영역에 포함된다. 
Content-Type : text/html; charset="utf-8"
위의 정보는 웹문서가 포함하고 있는 데이터의 형식이 일반 텍스트이며, utf-8 인코딩되어 있음을 알려준다. 이 웹문서를 읽은 브라우저는 읽어온 정보를 utf-8형식에 맞추어서 화면에 재현한다. 불행하게도 World Wide Web은 언어의 짬뽕이다. 그래서 HTML4에서는 다음과 같이 HTML 문서의 문자 인코딩을 알려준다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
일반적으로 UTF-8인코딩을 이용하면, 대부분의 문자를 처리할 수 있다.

이러한 기술적인 문제는 HTML5에도 여전히 남아 있다. HTML4에서와 마찬가지로 <meta>태그를 사용하지만, 좀더 간단하게 사용할 수 있다.
<meta charset="utf-8" />
위 코드는 모든 브라우저에서 사용할 수 있다.

2.3.2 Friend Link Relations

일반적으로 다른 페이지로의 링크는 <a href>를 이용한다. Link Relations는 당신이 왜 그 페이지를 링크했는지를 알려주기 위해서 사용한다. 즉 여기에는 "나는 이러이러한 이유로 이 페이지를 링크했다"라는 정보를 내포한다. 가장 대표적인 경우가 문서를 표현하기 위해서 외부의 CSS를 링크하는 경우다.

HTML5는 Links to external resources와 hyperlnk links, 두가지 형식의 링크를 제공한다. external resources는 CSS나 자바스크립트와 같은 외부 자원을 링크하기 위한 목적으로 사용한다. 리소스의 형태는 "rel=stylesheet"형식으로 알려준다.

link relations 는 <link>엘리먼트를 이용하며 페이지의 <head>영역에 위치한다.어떤 link relations는 <a>엘리먼트를 이용하기도 하지만 일반적인 방법은 아니다. HTML5는 <area>엘리먼트를 사용하기도 한다.

===== REL = STYLESHEET ====
이 문서를 표현하기 위해서 참조할 스타일쉬트의 위치를 알려준다. 
<link rel="stylesheet" href="style-original.css" type="text/css" />
위 방식이 가장 일반적으로 사용된다. 스타일쉬트는 홈페이지의 모든 문서에 공통적으로 적용되는 공통자원인 경우가 많다. 그러므로 독립적인 파일형태로 관리하는 경우가 많은데, 이때 이 스타일 쉬트를 읽어 오기 위해서 사용한다. C언어의 include와 같은 이유로 사용한다고 볼 수 있다. href는 문서의 위치, type는 문서를 이루고 있는 데이터의 형식을 알려주기 위해서 사용한다. 현재 웹 상에는 단지 하나의 CSS 문서 타입만 존재하기 때문에 type은 생략해도 된다.
<link rel="stylesheet" href="style-original.css" />

2.3.2.1 REL = ALTERNATE 
<link rel="alternate" 
       type="application/atom+xml" 
       title="My Weblog feed" 
       href="/feed/" />
이 태그는 이 문서와 관련된 RSS, atom media 애플리케이션을 실행시킬 수 있음을 의미한다. 이 태그를 발견한 모든 브라우저는 Google Reader과 같은 (브라우저 설정에 따라서)feed 리더와 연동된다. rel="alternate" link relation은 HTML4와 HTML5모두에서 사용할 수 있다.

2.3.2.2 HTML5의 다른 Link Relations
rel="archives"는 이 문서의 기록과 관련된 다른 흥미있는 참조할 문서들을 명시한다. 예컨데 블로그 페이지라면, 현재 포스트와 관련있는 지난 목록들의 색인을 제공하는 페이지를 링크하는 식이다.

rel="author"는 이 문서의 저자의 정보를 담은 문서로 링크한다. 일반적으로 "저자에 대하여 (about the author)"등의 페이지로 링크된다.

HTML4는 rel="start", rel="prev", rel="next"등을 이용해서 이 문서가 전체문서의 일부분이며, 이전 혹은 다음 문서가 있음을 알려준다.

HTML5는 rel="first"으로 문서의 위치를 알려준다. 또한 HTML4와 마찬가지로 rel="prev" 와 rel="next"를 지원한다. 문서의 마지막임은 rel="last"로 알려줄 수 있다.

문서의 색인페이지가 있음을 알려주는 가장 좋은 방법은 re="up"을 이용하는 것이다.

rel="icon"은 rel="stylesheet"와 함께 가장 널리 사용되는 link relation중 하나다. 이 태그의 사용법은 다음과 같다.
<link rel="shortcut icon" href="/favicon.ico">
모든 주요 브라우저는 페이지를 표시할때, URL주소창등에 이 아이콘을 표시한다.

rel="nofollow" 링크하는 페이지에 가중치를 주지 않겠다는 의미다. 구글과 같은 검색엔진은 링크가 된 문서의 가중치를 높이기 위해서 Pagerank와 같은 기술을 사용하는데, 해당 도메인 내에서는 그 페이지의 가중치가 링크로 인해서 특히 높아지는 것을 원치 않을 수 있다.

2.4 HTML5의 새로운 엘리먼트들

HTML5는 기존에 존재하는 태그들 외에 새로운 태그들을 제공한다.

  • <section> : section 앨리컨트는 문서나 애플리케이션에서 문맥단위로 내용을 구분하기 위해서 사용한다. 섹션은 문단과 문단의 그룹으로써, 이를 테면 챕터와 같은 용도로 사용할 수 있다. 애플리케이션이라면, 탭으로 나뉘어진 다이얼로그 박스를 하나의 섹션이라고 할 수 있다.
  • <nav> : nav 앨리먼트는 웹문서에서 다른 섹션 혹은 다른 문서로 넘어가기 위한 네비게이션 링크와 함께 사용한다.
  • <article> : article앨리먼트는 문서, 페이지, 애플리케이션등에서 독립적으로 배포할 수 있는 페이지 컴포넌트를 의미한다. 잡지나 신문을 보자. 잡지나 신문은 모자이크적 구성을 가진다. 이때 각각의 모자이크는 컴포넌트로써, 잡지나 신문은 이 컴포넌트들의 조합으로 페이지를 만든다. 이때 각각의 모자이크가 article이다.
  • <aside> : 주요 컨텐츠와 분리되어서 주변에 배치되는 컨텐츠를 보여주기위한 영역이다. 웹 컨텐츠의 경우 주로 본문의 옆에서 사이드 메뉴에 주로 사용한다.
  • <hgroup> : hgroup 엘리먼트는 섹션의 머릿글을 나타내기 위해서 사용한다. 이 엘리먼트는 다중의 레벨을 가지는 문서에서 h1-h6 엘리컨트를 그룹으로 관리하기 위해서 사용한다.
  • <header> : 문서의 머릿 부분에 해당한다. 페이지에 대한 소개와 h1-h6등을 포함한 색인 정보, 문서 타이틀, 로고 등을 배치한다.
  • <footer> : footer 앨리먼트는 문서의 밑부분에 위치한다. 문서의 부가적인 정보를 배치한다. 즉 각 섹션의 작성자, 저작권, 관련글, 작성일 등을 포함한다.
  • <time> : 날짜와 시간을 나타내기 위해서 사용한다.

2.4.1 HEADER

HTML4에서 일반적으로 헤더는 div를 이용해서 다음과 같이 표현할 것이다. 
<div id="header"> 
  <h1>My Weblog</h1> 
  <p class="tagline">A lot of effort went into making this effortless.</p> 
</div> 
 
… 
 
<div class="entry"> 
  <h2>Travel day</h2> 
</div> 
 
… 
 
<div class="entry"> 
  <h2>I'm going to Prague!</h2> 
</div>
이것은 문법적으로 전혀 잘못된게 없다. 물론 HTML5에서도 그대로 사용할 수 있다. 그러나 HTML5는 헤더와 섹션 정보를 위해서 별도의 문법을 제공한다.

HTML4에서 <div id="header">는 일반적인-그리고 유일한-방법이지만 명시적이지 않기 때문에, 사용이 명확하지 않은 장점이 있다. 여러가지 의미로 사용될 수 있고, header 대신 다른 이름을 사용할 수 있는등 명확하지 않기 때문이다. 예컨데 <div id="shazbot">를 사용할 수도 있다. attribute 문서의 명료성을 확보하기가 힘들다.

HTML5는 <header> 엘리먼트를 제공한다. 다음은 HTML5의 <header>를 이용해서 문서를 구성한 예이다. 
<header> 
  <h1>My Weblog</h1> 
  <p class="tagline">A lot of effort went into making this effortless.</p> 
  … 
</header>
매우 명확하다. 누가 보더라도 header가 의미하는 바를 명확히 알 수 있다. header 앨리먼트는 <h1>이나 <h2>등을 이용해서 header를 구성할 수 있다. 아마도 여러분은 header에 문서의 제목등을 배치할 것이다.

HTML4에서 문서의 개론을 만들기 위해서 <h1>-<h6>앨리먼트를 사용한다 - 유일한 방법이기도 하다 -. 다음과 같은 식으로 개론을 만든다. 
  My Weblog (h1) 
    | 
    +-- Travel day (h2) 
    | 
    +-- I'm going to Pargue (h2)

괜아 보이긴 하지만 역시 명시적이지 않다는 문제가 있다. h1이나 h2는 문서의 글목록을 만들기 위한 목적 외에도 다른 다양한 목적으로 사용될 수 있기 때문이다. 다음과 같이 문서의 구조가 바뀌어야 하는 경우를 생각해 볼 수도 있다.

HTML5는 <hgroup> 엘리먼트를 지원한다. <hgroup> 앨리먼트는 머릿글을 그룹화 하여 관리할 수 있다. 
<header> 
    <hgroup> 
        <h1>My Weblog</h1> 
        <h2>A lot of effort went into making this effortless.</h2> 
    </hgroup> 
</header> 
... 
<div class="entry"> 
    <h2>Travel day</h2> 
</div> 
<div class="entry"> 
    <h2>Travel day</h2> 
</div>

2.4.2 ARTICLES

이제 본문 내용을 나타내 보자. HTML4에서는 다음과 같이 <div>를 이용해서 본문 내용을 표현할 것이다.

October 22, 2009

Travel day

...

역시 명시적이지 못한 관계로 명확하지 않다. HTML5은 페이지의 본문 내용을 표현하기 위한 <article>앨리먼트를 지원한다. 위 페이지를 HTML5로 다시 나타내 보자. 
<article> 
  <header> 
    <p class="post-date">October 22, 2009</p> 
    <h1> 
      <a href="#" 
         rel="bookmark" 
         title="link to this post"> 
         Travel day 
      </a> 
    </h1> 
  </header> 
  … 
</article>
문서의 구조가 눈에 잘 들어오긴 한다. 그런데, 좀 이상한 점을 발견했을 것이다. <h1> 앨리컨트가 사용되었는데, 이것은 <header>의 <h1>엘리먼트와 중복이 된다. 이렇게 되면 article의 글목록과 headr의 글목록이 서로 같은 아웃라인을 가지게 되지 않을까 ? 물론 문서 구조적으로는 서로 다른 h1 엘리먼트이기는 하지만, 시각적으로 동일한 h1엘리먼트를 사용함으로써, 표현되는 문서가 구조적으로 보이지 않을 수 있기 때문이다. 물론 문서에 단하나의 <h1> 엘리먼트만 가지도록 하면 되겠지만, 그닥 좋은 방법은 아니다.

HTML4는 문서의 아웃라인을 단지 <h1>-<h6>엘리먼트로만 표현할 수 있다. 그러므로 문서의 표현이 구조적이로 보이게 하려면 하나의 페이지에서 단지 하나의 <h1>을 사용해야만 한다. 그러나 HTML5는 문서 아웃라인을 만들기 위한 알고리즘이 정의되어 있어서, <article> 앨리먼트에서는 새로운 섹션이 만들어 지도록 한다. 그러므로 HTML5에서는 각각의 섹션마다 자신의 <h1>엘리먼트를 가질 수 있다.

HTML5의 이러한 특징은 모자이크 식의 정보구성이 필요한 잡지/신문과 같은 컨텐츠의 구성을 쉽게 한다. 여러 웹 페이지의 <article>섹션을 긁어와서 별다른 조작없이 문서를 구성해도, 알아서 섹션을 구성해주기 때문이다.

또한 <article>앨리먼트는 <header>섹션을 가질 수 있음으로, 모자이크식 컨텐츠의 구성을 더욱 쉽게 한다. 즉 다음과 같이 다양한 웹 페이지에서 가져온 문서로 웹 페이지를 구성할 수 있다.
<article> 
  <header> 
    <h1>A syndicated post</h1> 
  </header> 
  <p>Lorem ipsum blah blah…</p> 
</article>

2.4.3 DATES 와 TIMES

웹문서에서 날짜와 시간은 매우 중요한 요소다. 특히 블로그나 위키와 같은 정보에서 날짜는 문서의 검색, 분류를 위한 중요 키워드로 사용된다. 일반적으로 당신은 다음과 같은 방식으로 날짜를 표기할 것이다. 
<div class="entry"> 
  <p class="post-date">October 22, 2009</p> 
  <h2>Travel day</h2> 
</div>
이것은 HTML4에서 일반적인 방식이다. 날짜와 시간에 대한 표준이 따로 없기 때문에, 문서의 저자는 자신 나름대로 클래스를 정의해서 사용할 수 밖에 없었다. 때문에 일관성이 떨어지고, 매우 중요한 정보임에도 불구하고 정보로 사용하기가 힘들었다. HTML5에는 날짜와 시간을 표기하기 위해서 <time>앨리먼트가 추가되었다. 
<time datetime="2009-10-22" pubdate>October 22, 2009</time>

<time>앨리먼트는 3가지 영역으로 구성되어 있다.
  1. 기계 (혹은 소프트웨어)가 읽을 수 있는 시간 값
  2. 인간이 읽을 수 있는 텍스트
  3. 옵션으로 사용할 수 있는 pubdate 플래그

위 예제에서 datetime 어트리뷰트는 시간값을 제외한 날짜 값만을 가지고 있다. 날짜는 yyyy-mm-dd의 형식을 가진다.
<time datetime="2009-10-22" pubdate>October 22, 2009</time>

만약 시간까지 넣고 싶다면, hh:ii:ss 형식으로 입력하면 된다. 시간은 24시간 형식으로 나타낸다. 시간과 날짜 사이는 T로 구분한다.
<time datetime="2009-10-22T13:59:47-04:00" pubdate> 
  October 22, 2009 1:59pm EDT 
</time>
datetime의 값은 기계가 읽기 때문에, 정해진 포맷을 따라야 한다. 하지만 <time></time>사이의 텍스트는 인간이 읽는 값이기 때문에, 어떤 형식을 취해도 상관은 없다.

pubdate에 대해서 알아보자. pubdate는 boolean 어트리뷰트로 다음과 같이 사용할 수 있다.
<time datetime="2009-10-22" pubdate>October 22, 2009</time>
Email을 기입하면, 댓글이 메일로 전달됩니다.