[HTML5] 6-1장 새로운 태그

새로운 태그가 생겼지만 해당 태그들은 구조만 이룰뿐, 기능은 제공되지 않기에 자바스크립트나 스타일시트로 구현은 따로 적용해야 합니다. 간단한 기능들은 브라우저 자체에서 제공했으면 하는 바램이 생기네요.

의미를 부여받은 특별한 텍스트

조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다.

dialog

대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작성한다.

<dialog>
    <dt>나</dt>
    <dd>아!, 이런 오늘 작업한 걸 저장하지 않고 종료했네~</dd>

    <dt>수정</dt>
    <dd>이런, stupid!</dd>
</dialog>

figure

이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.

<figure>
    <figcaption>HTML5 로고</figcaption>
    <img src="logo.gif">
</figure>

mark

형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.

<p>지금 공부하고 있는 것은 <mark>HTML5</mark> 입니다.</p>

time

날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다. YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.

<p>도서관은 <time>22:00</time> 에 문을 닫습니다.</p>
<p>다음주 <time datetime="2013-01-30">수요일</time>은 쉽니다.</p>
<p>Published on <time datetime="2013-01-25" pubdate>2013년 1월 25일</time></p>

datetime 속성은 기계가 이해하는 부분이고 pubdate 속성은 문서의 발행일을 표기할때 사용한다. 한 문단에 여러개의 날짜와 시간이 존재한다면 발행일을 구분하기 어려우므로 pubdate를 사용하자

time요소에 지정할 수 있는 일시의 문자열 형태는 ISO-86이라는 표준 규격에 정해져 있다.

meter

통화, 인구, 점수, 치수와 같은 숫자들과 같이 특정 범위내에 있는 숫자 값을 시스템에 인지시킬 필요가 있을때 사용할 수 있다.

속성명	속성의 기능
value	실제로 측정된 진짜 데이터를 지정한다.
title	튤팁 입력을 할수 있다.
high	입력된 데이터들 중의 사용자가 허용할 수 있는 최대값을 지정한다.
low	입력된 데이터들 중의 사용자가 허용할 수 있는 최저값을 지정한다.
max	meter에서 인식할 수 있는 최고 값을 지정한다.
min	meter에서 인식할 수 있는 최저 값을 지정한다.
optimum	최적의 측정값을 지정해 준다. min으로 설정된 최저값과 max로 설정된 최대값 사이에서 가능한 한 최고 적합한 값을 지정해준다.

<p>수학 : <meter>80</meter> 점</p>
<p>수학 : <meter min="0" max="100">80</meter> 점</p>
<p>수학 : <meter min="0" max="100" value="80" optimum="95">80</meter> 점</p>

'%'나 '분수'형태로도 사용할 수 있다.

<p>점유율 : <meter min="0" max="5000" value="1000">20%</meter></p>
<p>판매율 : <meter min="0" max="100" value="50">1/2</meter></p>

progress

다운로드 진척 상태를 알려줄때 유용하게 사용할수 있는 태그로 최대값 max 속성과 현재 다운로드한 값 value 속성을 가진다. 이는 자바스크립트와 연동하여 동적으로 다운로드 상태를 제공할 수 있다.

Downloading ...
<progress value="5000" max="10000">
    <span id="status">50</span>%
</progress>

meter 와 progress 테스트 보러가기

ruby

한자, 일어등의 발음등을 표기하기위해 사용하며 <rp>와 <rt>를 사용한다.5.5pt의 작은 글씨를 사용해 첨언을 넣는 영국 출판문화에서 기원한 단어.

<ruby>
    漢<rp>(</rp> <rt>한</rt> <rp>)</rp> 子<rp>(</rp> <rt>자</rt> <rp>)</rp>
</ruby>

<rp>는 루비의 앞뒤로 붙게되는 괄호등을 지정하고 지원 브라우저에서는 보이지 않는다. <rt>는 루비로 표시한 텍스트

결과는 아래와 같다.

漢( 한 ) 子( 자 )

상호 작용을 위한 요소

사용자와 직접 상호작용을 위한 요소들로 WHATWG의 웹 애플리케이션1.0 스펙 안에 포함된 것들이다.

details

HTML 문서에서 추가적인 설명을 붙일때 사용하며 워드프로세서의 '각주' 역할과 비슷하다. <summary> 태그와 함께 사용되며 기본적으로 <details>는 '감춤'상태이다. summary 부분만 보이도록 되어있고 그 외 콘텐츠는 기본적으로 감추어져 있는 것이다. details 콘텐츠를 모두 펼쳐 놓기 위한 속성이 있는데 'open' 속성이다.

<details open="open">
    <summary>HTML5 란?</summary>
    <p>HTML5는 어쩌고 저쩌고</p>
</details>

summary를 클릭해서 details 내용을 보였다 감췄다 토글하는 것은 자바스크립트를 이용해서 동작시켜야 한다.

datagrid

기초 자료를 HTML 태그로부터 가져와 자바스크립트 등을 이용해서 동적으로 정보를 갱신할 수 있다. multiple 속성을 사용하여 한번에 여러 행을 컨트롤할 수도 있다.

<datagrid multiple>
    <ol>
        <li>데이터 그리드 0행</li>
        <li>데이터 그리드 1행</li>
    </ol>
</datagrid>

menu

폼 컨트롤 목록이나 명령어 목록을 만들때 사용, HTML5에서 재정의 되었음. <command> 태그는 라디오 버튼이나 체크박스, 버튼을 이용해서 명령어 박스를 만들수 있게 해주며 반드시 <menu> 태그안에 포함되어야 한다.

속성명	속성값	설명
type	list(기본값) toolbar context	사용할 <menu>의 타입을 지정한다. 툴바 형태로 사용할 것인지 목록 형태로 사용할 것인지를 지정할 수 있다
label	레이블 텍스트	메뉴에 대해서 알려줄 레이블이다

<menu type="toolbar">
    <li>
        <menu label="파일">
            <button type="button" onclick="newfile()">새파일</button>
            <button type="button" onclick="fileopen()">열기</button>
            <button type="button" onclick="filesave()">저장</button>
        </menu>
    </li>
    <li>
        <menu label="편집">
            <button type="button" onclick="btncopy()">복사</button>
            ...
        </menu>
    </li>
</menu>

<nav> 태그는 사이트의 글로벌 내비게이션에 사용할 수 있으며 URL링크를 사용할 수 있지만 <menu>와 <command> 태그는 클라이언트 측 애플리케이션 실행을 위한 것이므로 URL링크나 폼 액션은 처리하지 않는다. command를 이용하면 사용자가 요청하는 명령을 즉각적으로 실행할 수 있다.

속성	값	설명
type	command(기본값) checkbox radio	사용할 명령어 형태의 타입을 지정
label	명령어 설명, 이름	각 명령어 항목별 설명 텍스트 혹은 이름을 입력
disabled	disabled
icon	아이콘 이미지 URL	각 커맨드 항목에 아이콘을 만든다
radiogroup	라디오 그룹 이름	타입을 라디오 버튼으로 지정했을 경우, 이들 라디오 버튼을 묶어서 이름을 지정해줄 수 있다
checked	checked	타입을 라디오 버튼이나 체크박스로 지정했을 경우, 이들을 기본적으로 선택상태로 할 것인지를 설정할 수 있다.

<menu type="toolbar">
    <command type="command" icon="icon-lock.gif" label="잠금" onclick="elock()"></command>
    ...
</menu>