..

Search

29) HTML5 추가요소

HTML5 추가요소

HTML5에서 추가된 의미(semantic) 요소

의미 요소 설명
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.
<main> HTML 문서의 주요 콘텐츠(content)를 정의함.
<section> HTML 문서에서 섹션(section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함.
 <aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. 
<figure> HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.
<figcaption> figure 요소를 위한 캡션을 정의함.
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
<bdi> 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
<mark> 하이라이팅된 텍스트를 정의함.
<details> 사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
<summary> details 요소에 나타날 내용을 정의함.
<dialog> 다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem> 사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함.
<meter> 정해진 범위 내의 스칼라 치수를 정의함.
<progress> 작업에 대한 진행 정도를 정의함.
<ruby> 루비(ruby) 문자를 선언함.
<rt> 본문 위에 나타날 문자를 정의함.
<rp> 루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
<time> 날짜와 시간을 정의함.
<wbr> br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.

 

HTML5 의미 요소 수업 확인 =>

HTML5에서 추가된 다양한 타입의 input 요소

form 요소 설명
<datalist> input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen> form 요소 안에 두 개의 키(key)를 만들어주는 생성기를 명시함.
<output> 스크립트 등으로 실행된 계산의 결과를 바로 나타냄.

 

HTML5 Input 요소 수업 확인 =>

HTML5에서 추가된 input 요소의 타입

number
range
color
date
time
datetime-local
month
week
email
tel
url
search

 

HTML5 Input 요소의 타입 수업 확인 =>

HTML5에서 추가된 form 요소의 속성

autocomplete
novalidate

HTML5에서 추가된 input 요소의 속성

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern
placeholder
required
step

 

HTML5 Input 요소의 속성 수업 확인 =>

HTML5에서 추가된 그래픽 요소

그래픽 요소 설명
<canvas> 자바 스크립트를 이용한 그래픽 작업을 정의함.
<svg> SVG를 이용한 그래픽 작업을 정의함.

 

HTML5 그래픽 요소 수업 확인 =>

HTML5에서 추가된 멀티미디어 요소

멀티미디어 요소 설명
<audio> 오디오와 음악 등 오디오 파일을 명시함.
<video> 비디오와 영화 등 비디오 파일을 명시함.
<embed> 플러그인(plug-in)과 같은 HTML 문서에 삽입할 객체(object)를 명시함.
<source> 멀티미디어 요소의 원본에 대한 파일 형식 및 파일 주소를 여러 개 명시함.
<track> 비디오 플레이어에 대한 텍스트 자막을 명시함.

 

HTML5 멀티미디어 요소 수업 확인 =>

연습문제