html5

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

돼지고기국밥 2010. 2. 2. 15:52

2010. 2. 2. 15:52

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

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

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

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

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

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

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

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

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

드래그앤 드롭, 오디오 비디오 지원, 그리고 모바일 까지의 확장.