HTML5 둘러보기

HTML5 둘러보기 추가된 엘리먼트

API의 확장 모바일에서 구동가능, 미디어 지원 이런특징을 가지고 개발되는 html5에 대해 간단히 둘러보자

The DOCTYPE 문서타입 선언

아주 간단해졌다. html1.0, html4.0문서선언 보다 훨씬 간단해졌다. 훨씬 간단하고, 기억하기쉽고, 간편하게 의미있어보인다

새로 만들어진 엘리먼트(Element)

이전에 엘리먼트에 새로운 엘리먼트가 추가되었다. 대체적으로 과다하게 쓰였던 div엘리먼트를 좀더의미화 하여 구체적으로 나누어졌다고 보면된다. 추가된 엘리먼트는 다음과 같다.

• <header>
  글자그대로 머리부분이다.브랜드이름이나,페이지 맨위에서 사이트를 소개할떄 사용한다.
• <nav>
  nvigation의 약자로 nav로 쓴다.흔히 사용하는 메뉴 네비게이션 부분에 쓰일 것이다.
  
• <section>
  이제 div와 같이 사용한다.구역을 나눈다.
  
• <article>
  section과 흔히 유사 하다하는데 article은 내용(content)를 담는 엘리먼트이다.예를 들어 블로그같으면 포스팅 부분이 article이 되겠다.
  
• <aside>
  우리가 흔히 지정하고 사용해왔던 sidebar의 역할을 할 엘리먼트다.블로그로 예를들자면 태그클라우드, 카운터, RSS, 시계 등이 이부분이다.
  
• <footer>
  하단 부분이다 헤더와 반대로 생각하면 된다.
  

위에 태그를 봤다면 이건 한페이지에 한번만 사용해야하나 하는 생각이들수 있다. 하지만 여러번 사용해도된다고 되어있다.예제를 들자면 아래그림과 같다.

위그림에서 보듯이 header 와 footer는 section안에 한번씩더쓰였다. 주요머리부분과 하단부분 이라보면되며 이로서 별도 아이디나 클래스 지정없이 편하게 짤수 있게 된다.

div 엘리먼트와 비교해보기

간단한 두그림으로 div를 쓸때와 html5에서 새 엘리먼트를 쓸때를비교해보자

모두 div로 지정하고 개별 아이디를 header, nav, article,....등으로 지정해붜야 됬다.

간편하고 아이디를 부여하지않아도 어떻게사용되는지 한눈에 들어온다.

이외에 추가와 개발

• Drag & Drop
  자바스크립트를 서야했던 드래그 앤 드롭이 지원된다.
  
• Video & Audio
  비디오와 오디오 엘리먼트 예제와 같이 사용된다.
  
  view source

  

  print?

  1.<VIDEO width="400" height="360" src="vid.mp4">