HTML5 변경점 추가된 새속성

웹표준 2010.04.03 12:33

HTML5 변경점 추가된 새속성

HTML 5는 기존 HTML 4 내의 요소에 대해 여러 가지 새 속성들을 제공 하고 있다.

  • a와 area 요소는 link와 함께 사용 가능한 media 속성을 이용할 수 있다.

  • a와 area 요소는 ping이라는 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 한다.

  • area 요소는 좀 더 견고 하도록 hreflang와 rel 속성 모델을 사용한다.

  • base 요소는 a 요소에서 이미 널리 지원되는 target 속성을 지원한다. a와 area에서 iframe과 함께 웹 애플리케이션에서 유용하기 때문에 target을 계속 지원 하게 됩니다.

  • li요소에서 value 속성은 표현 요소가 아니므로 계속 지원 됩니다. ol 요소에서 start 속성 역시 지원 됩니다.

  • meta 요소는 charset은 이미 많은 곳에서 지원 하고 있고 문서를 위한 문자 인코딩을 깔끔하게 적용 하므로 지원을 시작 한다.

  • 새로 만든 autofocus 속성이 input (type이 hidden일 때를 제외), select, textarea, button 요소에 추가 됩니다. 이 속성은 문서를 읽는 동안 폼 콘트롤을 지정하는 선언적 방식을 제공한다. 이 기능은 사용자가 원하지 않을 경우 제공하지 않는 설정을 제공 함으로서 사용자 경험을 보장 해 주어야 한다.

  • placeholder 속성은 input, textarea 요소에서 사용할 수 있다.

  • 새로 만든 form속성은 input, output, select, textarea, button, fieldset 요소들이 한 개 이상의 폼 양식과 함께 사용하도록 지원 한다.

  • 새로운 required 속성은input (type 속성이 hidden, image, submit 같은 버튼 일 때 제외), textarea에서 사용 가능 한다. 이는 폼을 제출하기 위해서는 이 항목을 사용자가 꼭 입력해야 한다는 것을 지정 한다.

  • fieldset에서는 내부 콘텐츠에 대해 disabled를 사용할 수 있다.

  • input에는 몇 가지 새 속성을 쓸 수 있다. autocomplete, min, max, multiple, pattern, step 등. 앞에 언급한 대로 list속성은 datalist와 select와 함께 사용할 수 있다.

  • form 요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록 novalidate 속성을 가진다.

  • input, button, form 요소에서 formaction, formenctype, formmethod, formnovalidate, and formtarget를 새로 사용 가능한다. 만약에 이를 사용하면 action, enctype, method, novalidate, target 속성들을 재정의(Override)할 수 있다.

  • menu 요소는 type, label, 같은 새 속성을 가진다. 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있다.

  • style 요소는 scoped 속성을 가진다. 이는 지정한 스타일 시트를 사용하는 데 사용한다. style 요소에서 지정된 스타일 규칙은 내부 트리에서만 적용할 수 있다.

  • script 요소는 스크립트를 불러오고 실행하는 방식에 영향을 주는 async라는 새로운 속성을 사용할 수 있다.

  • html에는 menifest라는 새 속성을 가질 수 있는데 오프라인 웹 애플리케이션과 함께 사용해서 캐쉬 명세를 정의할 수 있다.

  • link에는 sizes라는 새 속성을 가질 수 있는데 rel에서 icon이 정의되면 아이콘 크기를 정할 수 있다.

  • ol에는 reversed라는 새 속성을 가질 수 있는데 역순으로 정렬할 때 사용한다.

  • iframe 요소에는 seamless와 sandbox를 통해 내용을 제어할 수 있다. (예: 블로그 답글)



설정

트랙백

댓글

최근 부라우저들의 CSS3,HTML5 지원현황

프로그램/브라우저 2010.03.31 16:47

http://www.findmebyip.com/litmus/#target-selector

여전히 문제는 IE거의 지원을 못해주고있다.제대로 병맛.


설정

트랙백

댓글

html5 엘리먼트 변경점 새로생긴 엘리먼트

웹표준 2010.03.30 14:42

html5 엘리먼트 변경점 새로생긴 엘리먼트

HTML5 추가된 엘리먼트포스팅에서 간단히 봤지만 새로추가된것들 더자세히보자

  • section은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용한다.

  • article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 한다.

  • aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용한다.

  • hgroup은 섹션 머리말을 표시할 때 사용한다.

  • header은 문서 내 소개 및 네비게이션 메뉴 모음을 표시할 때 사용한다.

  • footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있다..

  • nav는 문서 내 네비게이션.

  • figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.

    <figure>
    <video src=ogg>…</video>
    <legend>캡션 예제</legend>
    </figure>

복습차원에서 아리개림을 다시한번참조


  • audiovideo는 멀티미디어 컨텐츠를 표시하는 데 사용한다. 둘다 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공.

  • embed는 플러그인 컨텐츠를 표시할 때 사용.

  • mark는 별도로 표시한 컨텐츠를 표시하는데 사용.

  • progress는 다운로드나 시간이 걸리는 별도 작업의 과정을 표시.

  • meter는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.

  • time은 날짜나 시간을 표시하는 데 사용.

  • ruby, rt, rp는 루비 언어 표현을 위해 사용.

  • canvas는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용.

  • command는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.

  • details은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용.

  • datalistinput에 대한 새 list와 함께 콤보박스를 만들 때 사용.

    <input list="browsers">
      <datalist id="browsers">
        <option value="Safari">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Firefox">
    </datalist>

  • keygen 은 키의 페어를 생성하기 위한 컨트롤을 나타낸다..
  • output 은 스크립트에 의한 계산 결과등, 어떠한 출력 결과를 나타낼 수 있다..



설정

트랙백

댓글

HTMl5 레이아웃 만들기

웹표준 2010.02.20 15:57

HTMl5 간단한 레이아웃 만들기

html5를 이용해서 간단한 레이아웃을 만들어보자

먼저 생각하는 레이아웃의 모양은 다음과 같다.

각 엘리먼트와 그 크기는 그림과 같이 할것이다

html5 소스

위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다.

소스는 다음과 같다.

html5 simple test

header

section

article

footer

위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다.

CSS로 완성

이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을 none

*{ margin:0; padding:0;}
ul,li{list-style:none;}

중앙에 배치하기

대부분의 사이트는 가운데 배치한다 그방법중 하나가 body엘리먼트의 텍스트위치를 가운데로 잡아주고 그다음 div엘리먼트로 감싸서 margin:0 auto; 이렇게 주어 가운데로 배치하는방법이다.

body{ text-align:center; color:#FFF; background:#000;}
div#wapper{ text-align:left; width:800px; margin:0 auto; }
/*가로 넓이는 그림처럼 800px로 잡아주었다*/

display block

html5의 새로추가된 엘리먼트를 display:block; 으로 해줘야 된다 그래야 css가 먹힌다. 브라우저의 문제인지 정확한 이유는모르겠지만 어쨌든 display:block;으로 잡아주자

header, footer, nav, aside, section, article {
display:block; 
}

너비 잡아주기

각각의 너비를 잡아주자 그림을 참고하자. 그리고 aside는 왼쪽으로 배치 section은 오르쪽으로 배치시켰다.

header, nav, footer{
width:100%;
}
aside{
width:30%;
float:left;
}
section {
margin-bottom:10px;
width:65%;
float:right;
}

마무리

남은 것은 마진, 패딩조금씩주는것, 그리고 배경색 결정등이다.

header, footer, nav, aside, section{
margin-top:10px;
}
header, nav, aside, section, footer {
background-color: #666;
}
footer {
clear:both;
/* asdie와 section을 float시켰기
째문에 그아래위치하도록 clear*/
}

article부분은 약간다르게 꾸며주었다.

article {
width:90%;
margin:20px;
background-color: #999;
}

이로서완성되었다. 확인하려면 아래로 가보자

http://sianasiatiger.cafe24.com/study/5_html.html

html5 지원 브라우저

개인적으로 확인한 바로는 다음과 같다. 더낮은 버전이 지원가능할수도 있다. 정확한 자료가있다면 코멘트를...

  • 파이어 폭스 3.5
  • 오페라 10.0
  • 구글크롬 4.0
  • 사파리 3.0
  • IE8

IE의 경우 6,7은 지원되지않는다. IE8의 경우도 역시 확실하지않다.

마지막으로 html5로 만들어진 여러 사이트를 구경하고싶다면 아래 사이트를 가보로독

http://html5gallery.com/


설정

트랙백

댓글

html5 변경점 사라진 엘리먼트

웹표준 2010.02.19 22:03

html5 엘리먼트 변경점 사라진 엘리먼트

html5에서는 사라진것도 많고 새로 만들어진 엘리먼트도 많다. 하나하나 살펴보자

사라진 엘리먼트

CSS로 다루는것이 더 좋기때문에 사라진 엘리먼트

basefont
<basefont color="#000" face="sans-serif" size="11px">이런식으로 문서 전체의 기본 폰트를 설정하기도했으나 css에서 완전히 처리해주니 불필요하다고 여겨짐
big, small
문자를 크게 또 작게 변경 해 주는 엘리먼트였으나 이것역시 css에서 가능
center
중앙에 배치하는 역할을 했으나 이것역시 css에서 가능하다.
font
font역시 basefont와 마찬가지
s,strike,u
줄로 텍스트를 꾸며주는 이들역시 css에서 가능하므로 사라졌다.
tt
공지나, 상표를위해 사용했던것 이역시 css별도 강조 가능하기에 사라졌다.

프레임, 더이상 없다!

프레임 사이트는 빈도도 줄었고 접근성문제등 많은 문제를 주기에 그에 관한 엘리먼트들이 사라졌다.

   frame ,frameset, noframes

혼란을 주는 엘리먼트

  • acronym은 매우 큰 혼란을 둔다. 축약어를 사용할 때는 abbr를 사용하도록~.
  • applet은 이미 object로 대체~
  • isindex은 이미 폼(form) 양식을 통해 대체 된지가 오래다
  • dir은 이미 ul엘리먼트로

엘리먼트말고도 어트리뷰트(attribute)역시 사라진것들이 많다.

  • revcharset 속성: linka.
  • shapecoords 속성: a.
  • longdesc 속성: imgiframe.
  • target 속성: link.
  • nohref 속성: area.
  • profile 속성: head.
  • version 속성: html.
  • name 속성: img (use id instead).
  • scheme 속성: meta.
  • archive, classid, codebase, codetype, declare, standby 속성: object.
  • valuetype, type 속성: param.

역시 css에서 가능하기에 사라진 속성

이미지 정렬 이나 배경색 지정의 엘리먼트등 이들도 사라졌다 CSS와 완전분리 하겠다는뜻

  • align 속성: caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, theadtr.
  • alink, link, text and vlink 속성: body.
  • background 속성: body.
  • bgcolor 속성: table, tr, td, thbody.
  • border 속성: table and object.
  • cellpaddingcellspacing 속성: table.
  • charcharoff 속성: col, colgroup, tbody, td, tfoot, th, theadtr.
  • clear 속성: br.
  • compact 속성: dl, menu, olul.
  • frame 속성: table.
  • frameborder 속성: iframe.
  • height 속성: tdth.
  • hspacevspace 속성: imgobject.
  • marginheightmarginwidth 속성: iframe.
  • noshade 속성: hr.
  • nowrap 속성: tdth.
  • rules 속성: table.
  • scrolling 속성: iframe.
  • size 속성: hr.
  • type 속성: li, ol and ul.
  • valign 속성: col, colgroup, tbody, td, tfoot, th, thead and tr.
  • width 속성: hr, table, td, th, col, colgrouppre.

하나하나 변경점을 포스팅하겠지만 한번에 모두 보려면 여기에 가보자 http://channy.creation.net/project/html5/html4-differences


설정

트랙백

댓글

HTML5 둘러보기

웹표준 2009.09.29 17:28

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
    비디오와 오디오 엘리먼트 예제와 같이 사용된다.

이상 간단한 훑어보기였다.


설정

트랙백

댓글


티스토리 툴바