반응형

html5가 발표되면서 새로 추가된 태그들이 발표가 되었습니다.

맑은커뮤니케이션에서는 이번에 html5에서 새롭게 추가된 태그들을 정리해볼까 합니다.

새로운 태그 중 저는 <audio>, <video> 태그가 눈에 띄는데요.

이전버전에는 오디오나 비디오의 표준안이 존재하지 않았었습니다. 그래서 윈도우 미디어 플레이어나 ActiveX기반의 기술을 사용하는 방법 혹은 Silverlight나 Flash와 같은 기술이 발전해왔습니다.

html5에서 태그를 정의해 줌으로써 별도의 플러그인 없이 재생이 가능해 짐으로써 좀더 가벼워짐을 느낄 수 있을 것입니다.

지금부터 새롭게 추가된 아이들을 알아볼께요~

audio

음악이나 다른 오디오 스트림과 같은 소리를 들려줍니다.

속성

속성 설명
src 미디어 주소 제공
autoplay 미디어 자동 재생
loop 미디어 반복 재생
controls 사용자 에이전트가 제공하는 기본 컨트롤러를 사용

canvas

스크립트를 제공하여 그래프, 게임 그래픽, 기타 비주얼 이미지를 그릴 수 있습니다.

  • - 좌표 공간에서의 크기를 조절하는 두가지 속성은 유효한 양의 정수값이어야 합니다.
  • - canvas 요소에 동적인 작업을 하려면 스크립트 언어를 사용해야 합니다.

속성

속성 설명
width canvas의 너비 지정
height canvas의 높이 지정
 

command

사용자가 실행할 수 있는 명령을 나타냅니다.

속성

속성 설명
type 명령의 종류를 정의, radio, checkbox, command를 지정하며 기본값은 command
label command의 이름을 지정하며 값으로 빈 문자열을 쓸 수 없음
title 사용자에게 설명이나 힌트 제공
icon command 요소에 보일 아이콘 지정
disabled 사용 불가능함을 나타냄
checked type 속성이 checkbox나 radio일 때 checked 속성을 선언하면 선택된 상태로 나타남
radiogroup type 속성이 radio 일 때 토글된 커맨드의 이름을 지정할 수있는 속성

	Save

datalist

input 요소에 대한 미리 정의된 옵션 집합을 나타냅니다.

  • - input 요소에 "자동완성"기능을 제공하는데 사용됩니다. 사용자는 입력 데이터로 미리내용은 미리 정의된 옵션.
  • - option 요소를 포함할 수 있습니다.
  • - input 요소에 묶여 있습니다.

details

사용자가 보거나 숨길 수 있는 추가정보를 지정하고 열고 닫을 수 있는 대화형 도구를 만드는데 사용합니다.

  • - summary 요소는 제목을 지정하며 세부 정보보기와 숨기기 클릭이 가능합니다.

속성

속성 설명
open 세부 사항을 노출
이미지 추가 정보
  • 만든 날짜: ‎2011‎년 ‎8‎월 ‎2‎일 ‎화요일, ‏‎오후 6:16:41
  • 크기: 11.9KB (12,236 바이트)
  • 위치: D:\Downloads

embed

HTML이 아닌 외부 애플리케이션이나 대화형 컨텐츠를 포함할 때 사용합니다.

속성

속성 설명
src 포함하고자 하는 외부 자원의 주소 지정
type 인스턴스화 할 플러그인의 유효한 MIME 타입 지정
width 요소의 너비 정의
height 요소의 높이 정의
       	

figcaption

부모 요소인 figure 요소의 캡션이나 제목을 정의합니다.

biew
biew logo

figure

일러스트레이션, 도표, 사진, 코드 등과 자체 포함된 내용을 지정합니다. 이 요소는 보통 문서의 흐름에서 단일 요소로 참조되어 제거되더라도 문서의 주된 흐름에 영향을 미치지 않습니다.

biew

hgroup

섹션의 제목을 나타냅니다. 부제목이나 태그영역 h1 ~ h6 요소들을 그룹짓기 위해 사용합니다.

Welcome to biew

web standardization group

keygen

keygen 요소는 암호화를 위한 개인키와 공개키 쌍을 만들어냅니다.

  • - 폼 관련 요소에 속합니다.
  • - 스크립트에서 form.elements와 fieldset.elements로 호출할 수 있습니다. (여기에서 form, fieldset은 해당 요소의 name 속성값)
  • - 레이블을 붙일 수 있습니다.
  • - 폼을 전송할 때 함께 전송됩니다.

속성

속성 설명
autofocus 페이지를 로드할 때 요소가 자동으로 포커스를 받음
challenge 값과 함께 전달되는 문자열
disabled 값을 제출하지 않음
form 명시적으로 폼 소유자를 지정
keytype 키의 유형을 정의
name 폼 제출 시에 사용되는 폼 컨트롤의 이름을 나타냄

mark

문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타냅니다.

  • - 인용구의 특정한 부분으로 주의를 환기시키기 위해 mark 요소를 사용합니다.
  • - "구문 강조"와는 다른 의미로 구문 강조에 쓰기엔 span 요소가 좀 더 적절합니다.
  • - 원래는 강조되지 않았었던 텍스트를 인용문 일부에서 mark 요소로 하이라이트할 경우 일반적인 표현 관습대로 인용문 내의 mark 요소를 이탤릭체로 표시할 수 있습니다.
  • - 텍스트에서 "중요성"(strong)을 나타내는 것과 "연관성"(mark)을 나타내는 것의 차이가 있습니다. 문장과 관련이 없으니 중요한 부분을 나타내고자 할때는 mark 요소보다는 strong 요소를 사용하는 것이 더 적합합니다.

요즘 우리 집을 찾아 오는

고양이

가 있는데 너무 귀엽습니다. 내 생각엔 우리 집 정원이 맘에 드는 것 같아요! 나도

고양이

를 분양 받아 키워볼까 하는 생각이 듭니다.

meter

알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타냅니다.

속성 설명
value 게이지에 표시하는 측정 값
min 범위의 최소 값
max 범위의 최대 값
low '낮음' 범위의 값
high '높음' 범위의 값
optimum '최적' 범위의 값
form 명시적으로 폼 소유자 정의
내 컴퓨터 D 드라이브 사용량 : 300GB

output

계산의 결과를 나타냅니다.

속성 설명
for 계산의 결과와 계산에 사용되었거나 계산에 영향을 미친 값을 나타내는 요소를 명시적으로 연결
form 폼 소유자와 요소를 명시적으로 연결
name 폼 제출시에 사용되는 폼 컨트롤의 이름

상품 가격: 10,000원

progress

작업의 진행 상황을 나타냅니다.

속성 설명
value 진행된 작업의 값
max 최대 작업양
form 명시적으로 폼 소유자 정의

프로그램 설치 진행:

0%

rp

루비 주석을 지원하지 않는 사용자에게 루비 텍스트를 괄호로 둘러싸서 표현하기 위해 사용됩니다.

()()()

rt

루비 텍스트의 루비 주석을 나타냅니다.

()()()

ruby

루비 주석을 정의합니다. 루비 주석은 텍스트 주변(보통 위에)에 나타나는 텍스트로 주로 동아시아권 언어에서 발음이나 주석으로 사용됩니다.

       	

	韓國(한국)

source

video 요소 및 audio 요소와 같은 미디어 요소에서 사용할 수 있는 대체 미디어 자원을 정의합니다.

속성 설명
src 미디어 자원 주소 정의
type 사용할 수 있는 타입의 자원인지 확인
media 사용할 수 있는 미디어 자원인지 확인

track

video 요소 및 audio 요소와 같은 미디어 요소에 대한 텍스트 트랙을 지정합니다. 이 요소는 자막파일이나 텍스트를 포함하는 다른 파일을 자정하는데 사용됩니다.

속성 설명
kind 텍스트 트랙의 종류 정의
src 텍스트 트랙 데이터의 주소 정의
srclang 텍스트 트랙 데이터의 언어 정의
label 사용자가 읽을 수 있는 트랙 제목 정의
default 기본 트랙 정의

video

비디오나 영화를 재생하는데 사용됩니다.

  • - src 속성이 있으면 track 요소를 자식 요소로 포함할 수 있습니다.
  • - src 속성이 없으면 source 요소와 track 요소를 자식 요소로 포함할 수 있습니다.
  • - video 요소, audio 요소와 같은 미디어 요소는 자식 요소로 포함할 수 없습니다.
  • - video 요소를 지원하지 않는 오래된 웹 브라우저에서 구형 비디오 플러그인을 시도하거나 사용자가 비디오 컨텐츠에 접근할 수 있는 방법을 제시하는 텍스트를 보여줄 수 있도록 요소 내부에 컨텐츠를 제공할 수 있습니다.
속성 설명
src 미디어 자원의 주소를 제공
poster 비디오를 사용할 수 없을때 보여줄 이미지
preload none, metadata, auto 키워드를 지정하여 미디어의 다운로드 상태 결정
autoplay 미디어를 자동 재생
loop 미디어를 반복 재생
audio 오디오 채널을 제어
controls 사용자 에이전트가 제공하는 기본 콘트롤러를 사용
width 미디어의 가로 크기를 정의
height 미디어의 세로 크기를 정의
반응형

+ Recent posts