더 높은 웹접근성을 가능케 하는 HTML5 이야기 - 하성필

더 높은 웹 접근성을
가능케 하는 HTML5이야기e-motion &e-brace
하성필

하성필 rebehayan@emotion.co.kr
FIGCAPTION e-motion &e-brace
<figure>
<figcaption>

<figure>
삽화, 다이어그램, 사진, 코드 리스팅

<figcaption>
<figure>요소에 대한 제목, 설명문, 표제

운동회에 다녀왔습니다.
너무 행복…
<figure>
<img src=“photo.jpg” alt=“”>
<figcaption>
운동회에 다녀왔습니다. 너무 행복합니다.
</figcaption>
</figure>

KEYGEN e-motion &e-brace
<KEYGEN>
비밀키와 공개키 생성을 제어

웹 브라우저 전자서명 암호화 미 지원

웹 크립토그라피 API
(암호 처리 API 지원)

ACTIVE X
공인인증서 발급 및 전자서명

LINK e-motion &e-brace
<A>

Block요소를 포함할 수 있음

<a href=“url” target=“_blank”>
<section>
<h2>우유니 사막으로…</h2>
<p>12박13일 코스</p>
<p>5,000,000원</p>
</section>
</a>
우유니 사막으로…
12박13일 코스
5,000,000원

MAIN e-motion &e-brace
<MAIN>

문서내 1번만 허용

Block 요소

Article, aside, footer, header, nav
요소 하위로 사용하지 않음

<header>
<h1>야식</h1>
</header>
<main role="main">
<article>
<h1>치킨</h1>
<p>치킨의 종류: 새우치킨, 간장치킨 등</p>
</article>
</main>
<footer>Copyright (c)2013 e-brace</footer>

CONTENT e-motion &e-brace
:after { content:” ? ”;}
:after, :before

CONTENT e-motion &e-brace
CSS
div:before { content:”여러분”; display:inline-block;}
div:after { content:”합니다.”; display:inline-block;}
HTML
<div>사랑</div>
여러분 사랑 합니다.

SUMMARY e-motion &e-brace
<SUMMARY>

<details> 요소의 요약, 캡션, 설명

확장 콘텐츠

콘텐츠 미리 열림

<table>
<caption>
<strong>한우 등급</strong>
<details>
<summary>도움말</summary>
<p>4년간 조사하여 대부분 2등급으로 나타남</p>
</details>
</caption>
… 중략 …
</table>
구분 등급
2010년 2등급
2011년 3등급
2012년 2등급
2013년 2등급
한우등급
도움말

<table>
<caption>
<strong>한우 등급</strong>
<details>
<summary>도움말</summary>
<p>4년간 조사하여 대부분 2등급으로 나타남</p>
</details>
</caption>
… 중략 …
</table>
구분 등급
2010년 2등급
2011년 3등급
2012년 2등급
2013년 2등급
한우등급
도움말
4년간 조사하여 대부분 2등급으로 나타남

더 높은 웹접근성을 가능케 하는 HTML5 이야기 - 하성필

Recommended

Recommended

More Related Content

Featured

Featured (20)

더 높은 웹접근성을 가능케 하는 HTML5 이야기 - 하성필