본문 바로가기
HTML5+CSS3

[HTML5 #2] HTML5 Markup (마크업) 태그설명

아트장 2012. 3. 19. 17:52


앞 포스팅에서는 전체적인 HTML5의 대해서 알아 보았다면
이제 좀더 디테일하게 과연 무엇들이 바뀌엇고 새롭게 생겨났는지 알아봅시다.



앞시간에 했어야 했는데.ㅎㅎ^^;

내가 지금 사용하고 있는 브라우저가 과연! html5를 얼마나 지원하는지 점수로 알아봅니다.
html5test.com (당시300점만점)

이 자료를 조사할때가 2010년 경이 었는데요..형편없는 IE의 점수를 확인하 실 수 잇습니다.(버전은 몇인지 모르겠네요.)
요즘 다시 테스트를 해보면 굉장히 많이 향상되었다는것을 알 수 있습니다.

그만큼 서로 앞다투어서 html5를 지원하려고하고있고 그에따른 브라우저 업그레이드도 지속적으로 하고 있죵

좋은 도구를 사용하는 사람에게는 향상된 기능을 제공합니다.
여러분들도 좋은도구(좋은브라우저)를 사용하셔서 좋은 기능들을 만끽하시길 바랍니다..^---------^*
저는 크롬을 좋아합니다.ㅎ
오페라도 html5를 많이 지원하는 브라우저 인데 현재 점유율이 1%라고하네요..제 아는 지인은 오페라 메니아 입니다.
상위 1% 라는 자부심으로 ㅎㅎㅎ...



자 이제 본론으로 들어갑니다.

html5 의 간소화된 문법


html5는 개발자와 디자이너의 편의성을 많이 생각했습니다.

기존에 복잡하게 썻던 부분을 많이 간소화 시켰습니다. 

DTD에 대한 선언도 짧게 *<!DOCTYPE html>
인코딩도 짧게  *<meta charset=“UTF-8”>
스타일정의도 짧게  *<style>….</style>
 스크립트정의도 짧게  *<script>…</script>

그동안 많이 고생하셨습니다.^^;



기존에 DTD선언을 길게 써서 그 내용을 모두 담고 잇엇지만 이제는 !doctype 라고만 해주면
"이문서는 html5로 만들어졌습니다~"...라는 뜻입니다..참 쉽죠잉






구조와 문법


html4에서는 문서의 구조를 만들 때 div,span 요소를 id/class와 함께 사용하게 되죠.
이렇게 문서의 구조를 나타내는 요소가 풍부하지 않아서 복잡하고 중첩된 DIV를 사용했던것입니다.ㅇ
그래서! html5 에서는 구조를 만드는 새로운 개념과 요소들이 추가되엇습니다. 


 *Section, Nav,  Article, Aside, Hgroup, Header, Footer


    • section : 문서의 주제별로 섹션을 나누어 줍니다.
      hgroup : 섹션의 제목을 나타냅니다.
      header : 문서의 머리말을 표현하며, 주로 소개나 네비게이션들을 묶어줍니다.
      nav : 네비게이션을 위한 섹션입니다.
      article : 문서내에 독립적인 글을 표현할때 씁니다. (ex:블로그 글, 뉴스본문)
      aside :  본문과 상관없는글, 링크, 광고, 팁 (ex:퀵메뉴,배너)
       footer : 푸터를 나타내고 저자나 저작권 등을 포함합니다.
      figure : 그래픽이나 비디오를 위한 캡션(자막,설명)을 표시해준다. 




더 자세한 태그 설명은 하지 않겠습니다. ^^;

 구조를 나타내는 태그들로 위와같이 페이지 설계를 할 수 있습니다.








힘드니까 잠시 휴식.....--;; (개피곤.jpg)
 





새로생긴 마크업 엘리먼트 (markup element)


mark - 문서내 형광펜 처리
time - 날짜나 시간을 기계가 인식할 수 있는 시각으로 표시
meter - 분량이나 수량을 나타닐때 쓴다 (속성값으로 min,max,value를 가진다.)
progress - 현재 진행중인 상태 표시 (프로그래스 바 )
details - 추가정보 즉 주석같은것을 보여준다.
datagrid - 표 형태의 정보를 동적으로 갱신 
datalist - 추천검색어와 같이  미리 보여주는 기능
ruby (rt,rp) - 주석문 다는 기능 
menu,command - 데스크톱 어플리케이션과같은 도구모음, 마우스 오른쪽 클릭시 나타나는 컨텍스트 메뉴


변경된 태크 (새로운 의미를 갖는 요소)


B 태그 : 기존의 두꺼운 볼드체 --->, 문서상에서 특정 키워드등을 표현할때 쓰인다.
 I 태그 : 기존 이탤릭체--->기술용어 ,외국어, 배이름등 표현

이밖에도 변경된 태그들이 많이 있습니다.

멀티미디어 요소 (오디오,비디오,인코딩,canvas,embed)


html5에서는 별도의 플러그인이나 플레이어 없이 멀티미이어를 제어할 수 있게 됩니다.

간단하게 video 태그와 audio 태그만을 이용해서 아래와 같이 멀티미디어를 삽입햇습니다.




 


알고 넘어가기!

여기서 중요한것은 audio /video 태그가 아니라 바로 인코딩 부분입니다.

아직 비디오/오디오 인코딩에 대한 부분은 표준화가 되어 있지 않아서, 각 브라우저에서 지원하는 멀티미디어 형식이 다릅니다.

오디오 포맷은 다음같이 종류가 많이 있습니다.

ogg, mp3, 3gp, m4a, wav, amr, mp4


현재가장많이 사용하는 인코딩 기술은 h.264를 가장 많이 사용하고 있지만 라이센스가 있는 기술이라 표준채택이 되지 않을것 으로 보입니다.


그래서 각 브라우저 별로 지원되는 오디오 포멧은 다음과 같습니다.

  • 크롬: ogg, mp3, m4a, mp4

  • 사파리: mp3, 3gp, m4a, wav, amr, mp4(아이폰 3GS, 모바일 사파리 동일)

  • 파이어폭스: ogg, wav

  • 오페라: ogg, wav


즉 현재에는 다양한 형식으로 제공을 해주어야 합니다. 
빠른시일내에 표준화가 되길  기대해봅니다. 
그밖에 멀티미디어 요소로는
canvas : 자바스크립트를 이용해서 그래픽을 그릴 수 잇는 방법 
embed : html4 에서는 object 였음


새로운 웹폼(form) 요소와 속성


" Input " 태그 type의 새로운 속성
-기존의 인풋 폼태그에 새로운 속성들이 추가되면서 그 기능들이 다양해졌으며
-모바일에서 더 부곽됩니다.
  1. email 
  2. url
  3. number
  4. range
  5. date pickers
  6. search
  7. color





새로운 폼 엘리먼트도 있습니다.

"datalist" -input에 대한 새 list와 함께 콤보박스를 만들 때 사용
"keygen" -키의 페어를 생성하기 위한 컨트롤을 나타낸다
"output" - 스크립트에 의한 계산 결과등, 어떠한 출력 결과를 나타낼 수 있다

개선된 폼 양식도 있습니다.
 
autocomplete
novalidate
autocomplete
autofocus
form
form overrides 
(formaction, formenctype, formmethod, formnovalidate, formtarget)
height and width
list
min, max and step
multiple
pattern (regexp)
placeholder
required


  • 자동완성기능 autocomplete 


  • 자동포커싱 autofocus
     
  • 힌트기능 placeholder   



  • 파일선택타입의 개선 multiple
  • 파일 필터링 acception
  • 파일 정보 엑서스 file
  • 폼 유효성 검사 novalidate



모바일에서의 폼(mobile form)


이렇게 다양해진 폼 요소들은 모바일에서 그 힘이 나오게 됩니다.

각각의 type 속성마다 그에 알맞는 키패드가 나타나는 화면이 보입니다.
일반적으로 모바일에서의 키패드는 한가지 일 것이라고 생각하는데 굉장히 다양하게 존재하고 있습니다.
(ex:이메일 입력키패드, 문자입력키패드, 숫자입력키패드, 주소입력키패드 등)






이상으로 #2를 마치며,
원래는 더 상세하게 태그의 설명과 속성 예제 까지 다루려고 하였으나, 그 양이 너무 방대하여서 수정을 하였습니다.
전체적인 html5와 css3 API등에대해서 다루도록하고요
조금더 여력이 생기면 그때 더 자세히 하도록 하겠습니다.


그럼 다음#3  "css3" 를 기대해 주세요~.*^^* 응원많이해주시면 빠른포스팅이 갑니다.ㅋ

저작자표시

'HTML5+CSS3' 카테고리의 다른 글

CSS3 animation 속성  (0) 2013.01.27
HTML5 사라진태그 / 변경된 태그  (2) 2013.01.20
[HTML5 #1] HTML5 소개 및 배경  (12) 2012.02.28
2011 여름캠핑을 위한 웹앱  (0) 2011.12.06
[SVG 테스트]도라에몽 그리기  (0) 2011.07.05

'HTML5+CSS3' Related Articles

티스토리툴바