공부공부/HTML52012. 2. 6. 23:11

[HTML5]HTML5에서 새롭게 추가된 요소들 & 변경된 요소들(html5 속성 변경)


        


HTML5에서 새롭게 추가된 요소들과 기존 요소가 가지고 있는 속성(attribute)에 또다른 속성(옵션의 의미)이 추가된 요소에 대해서 알아보자.

<HTML5에서 새롭게 추가된 요소>
 요소 의미   요소 의미 
 <Section>  섹션 콘텐츠  <bdo>  기본 텍스트의 방향성 서식과 다른 구역의 지정
 <nav>  네비게이션 콘텐츠  <video>  동영상 콘텐츠
 <article>  독립적인 콘텐츠  <audio>  오디오 콘텐츠
 <aside>  메인 콘텐츠와 관련이 적은 콘텐츠  <source>  동영상,오디오콘텐츠의 자원의 경로
 <hgroup>  제목 그룹  <track>  자막을 위한 요소
 <header>  섹션의 헤더  <canvas>  동적 그래픽 콘텐츠 영역
 <footer>  섹션의 푸터  <datalist>  입력 값 제시를 위한 요소
 <figure>  캡션이 있는 콘텐츠 영역  <keygen>  보안키 생성
 <figcaption>  <figure>콘텐츠의 캡션이나설명  <output>  출력 영역
 <time>  날짜 및 시간 콘텐츠  <progress>  진행 상황 표시 요소
 <mark>  마킹(marking)콘텐츠  <meter>  한정된 범위의 값을 위한 요소
 <ruby>  루비 텍스트 영역  <details>  상세 정보
 <rt>  루비 텍스트  <summary>  상세 정보의 요약
 <rp>  루비 괄호  <command> 어플리케이션의 명령 관련 요소 


<HTML5에서 추가된 속성>

 요소 추가된 속성  의미 
 <style>  scope  스타일 적용 범위 지정
 <ol>  reversed  내림차순 정렬
 <a>  ping  웹 사이트 방문 기록
 <frame> - srcdoc
- sandbox
- seamless		 - 프레임 내에 삽입할 마크업 지정
- 보안강화를 위해 사용, 링크타겟, 플러그인, 폼  서밋, 스크립트 무효화
- iframe콘텐츠를 부모 브라우징 콘텍스트안에 마크업된 것으로 취급(렌더링 시 경계선이 나타나지 않음)
 폼 콘트롤 공용속성 - autocomplete
- list
- required
- pattern
- step
- placeholder
- autofocus		 - 자동완성 기능
- 텍스트 필드에 입력 후보 목록 정의
- 입력 값 필수
- 입력 값의 정규 표현식
- 입력 값의 단계
- 입력 값 힌트
- 페이지 로딩 후 해당 콘트롤로 포커스가 자동으로 이동
-
 <form>  novalidate  폼과 관련된 입력 값의 검증을 수행하지 않음 
 <button>  - formaction
 - formenctype
 - formmethod
 - Formnovalidate
 - formtarget		  - 폼을 전송할 곳의 주소
 - 폼 전송 MIME타입지정
 - 폼 전송에 사용할 http메소드지정
 - 폼 전송 시 입력 값의 검증을 수행하지 않음
 - 폼의타겟 지정
 <input>  - search
 - tel
 - url
 - email
 - datetime
 - date
 - month
 - week
 - time
 - datetime-local
 - number
 - range
 - color		   - 검색을위한 폼 콘트롤
  - 전화번호
  - URL 입력 값
  - email 입력 값
  - 날짜와 시간
  - 날짜
  - 년월
  - 주
  - 시간
  - 로컬일시
  - 숫자입력 값
  - 범위
  - 색상 값


<HTML5에서 의미가 변경된 요소>

 요소 기존 의미  변경된 의미 
 <address>  웹 사이트 연락처 정보 작성자의 연락처 정보 
 <hr>  수평선  주제별 콘텐츠 구분
 <em>  강조  강조 구문
 <strong>  강한 강조  중요한 구문
 <small>  크기가 작은 글자  주석 등 크기를 작게 표시하는 콘텐츠
 <i>  기울임꼴 글자  학명이나 주변 콘텐츠와 분위기가 다르게 전환되었을 때를 의미, 일반적으로 이탤릭체로 표기되는 콘텐츠
 <b>  굵을 글자  일반적으로 굵게 표시하는 콘텐츠
 <menu> ul요소와 유사한 목록   어플레케이션의메뉴

저작자표시비영리동일조건

'공부공부 > HTML5' 카테고리의 다른 글

[HTML5]HTML5에서 새롭게 추가된 요소들 & 변경된 요소들(html5 속성 변경)  (3) 2012.02.06
[HTML5]아웃라인 알고리즘(outline algorithm) 예시  (1) 2012.02.06
[HTML5]HTML5에 새롭게 도입된 개념  (0) 2012.02.06
[HTML5]HTML5 시작하기 - 개발환경 설정 작업  (0) 2012.02.02
[HTML5]HTML5의 개요  (0) 2012.02.02
Posted by Jun~
TAG , , , , ,
Trackback 0 Comment 3

댓글을 달아 주세요

  1. 비밀댓글입니다

    2013.02.02 09:33 [ ADDR : EDIT/ DEL : REPLY ]

  2. 비밀댓글입니다

    2018.09.11 19:25 [ ADDR : EDIT/ DEL : REPLY ]

  3. 비밀댓글입니다

    2018.09.11 20:52 [ ADDR : EDIT/ DEL : REPLY ]

    free counters     free counters