더 높은 웹 접근성을가능케 하는 HTML5이야기e-motion &e-brace하성필
하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figure><figcaption>
하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figure>삽화, 다이어그램, 사진, 코드 리스팅
하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figcaption><figure>요소에 대한 제목, 설명문, 표제
하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace운동회에 다녀왔습니다.너무 행복…<figure><img src=“photo.jpg” alt=“”><figcaption>운...
하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace<KEYGEN>비밀키와 공개키 생성을 제어
하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace<form action=“” method=“get”>이름 : <input type=“text” name=“usr_name”>보안...
하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace웹 브라우저 전자서명 암호화 미 지원
하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace웹 크립토그라피 API(암호 처리 API 지원)
하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-braceACTIVE X공인인증서 발급 및 전자서명
하성필 rebehayan@emotion.co.krLINK e-motion &e-brace<A>
하성필 rebehayan@emotion.co.krLINK e-motion &e-braceBlock요소를 포함할 수 있음
하성필 rebehayan@emotion.co.krLINK e-motion &e-brace<a href=“url” target=“_blank”><section><h2>우유니 사막으로…</h2><p>12박13일 코스</p>...
하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace<MAIN>
하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace문서내 1번만 허용
하성필 rebehayan@emotion.co.krMAIN e-motion &e-braceBlock 요소
하성필 rebehayan@emotion.co.krMAIN e-motion &e-braceArticle, aside, footer, header, nav요소 하위로 사용하지 않음
하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace<header><h1>야식</h1></header><main role="main"><article><h1>치킨</h1><p>치킨의 ...
하성필 rebehayan@emotion.co.krCONTENT e-motion &e-brace:after { content:” ? ”;}:after, :before
하성필 rebehayan@emotion.co.krCONTENT e-motion &e-braceCSSdiv:before { content:”여러분”; display:inline-block;}div:after { conte...
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<SUMMARY>
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details> 요소의 요약, 캡션, 설명
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details>
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace확장 콘텐츠
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details open>
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace콘텐츠 미리 열림
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<table><caption><strong>한우 등급</strong><details><summary>도움말</summary><...
하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<table><caption><strong>한우 등급</strong><details><summary>도움말</summary><...
Upcoming SlideShare
Loading in …5
×

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

2,285 views

Published on

이미 늦은 당신을 위한 20분 #a11y
레알(real)! 진짜 웹접근성 이야기

2013.05.09 이화여자대학교 삼성교육문화관
http://onoffmix.com/event/14948

  • Be the first to comment

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

  1. 1. 더 높은 웹 접근성을가능케 하는 HTML5이야기e-motion &e-brace하성필
  2. 2. 하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figure><figcaption>
  3. 3. 하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figure>삽화, 다이어그램, 사진, 코드 리스팅
  4. 4. 하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace<figcaption><figure>요소에 대한 제목, 설명문, 표제
  5. 5. 하성필 rebehayan@emotion.co.krFIGCAPTION e-motion &e-brace운동회에 다녀왔습니다.너무 행복…<figure><img src=“photo.jpg” alt=“”><figcaption>운동회에 다녀왔습니다. 너무 행복합니다.</figcaption></figure>
  6. 6. 하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace<KEYGEN>비밀키와 공개키 생성을 제어
  7. 7. 하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace<form action=“” method=“get”>이름 : <input type=“text” name=“usr_name”>보안등급 : <keygen name=“security”><input type=“submit”></form>
  8. 8. 하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace웹 브라우저 전자서명 암호화 미 지원
  9. 9. 하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-brace웹 크립토그라피 API(암호 처리 API 지원)
  10. 10. 하성필 rebehayan@emotion.co.krKEYGEN e-motion &e-braceACTIVE X공인인증서 발급 및 전자서명
  11. 11. 하성필 rebehayan@emotion.co.krLINK e-motion &e-brace<A>
  12. 12. 하성필 rebehayan@emotion.co.krLINK e-motion &e-braceBlock요소를 포함할 수 있음
  13. 13. 하성필 rebehayan@emotion.co.krLINK e-motion &e-brace<a href=“url” target=“_blank”><section><h2>우유니 사막으로…</h2><p>12박13일 코스</p><p>5,000,000원</p></section></a>우유니 사막으로…12박13일 코스5,000,000원
  14. 14. 하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace<MAIN>
  15. 15. 하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace문서내 1번만 허용
  16. 16. 하성필 rebehayan@emotion.co.krMAIN e-motion &e-braceBlock 요소
  17. 17. 하성필 rebehayan@emotion.co.krMAIN e-motion &e-braceArticle, aside, footer, header, nav요소 하위로 사용하지 않음
  18. 18. 하성필 rebehayan@emotion.co.krMAIN e-motion &e-brace<header><h1>야식</h1></header><main role="main"><article><h1>치킨</h1><p>치킨의 종류: 새우치킨, 간장치킨 등</p></article></main><footer>Copyright (c)2013 e-brace</footer>
  19. 19. 하성필 rebehayan@emotion.co.krCONTENT e-motion &e-brace:after { content:” ? ”;}:after, :before
  20. 20. 하성필 rebehayan@emotion.co.krCONTENT e-motion &e-braceCSSdiv:before { content:”여러분”; display:inline-block;}div:after { content:”합니다.”; display:inline-block;}HTML<div>사랑</div>여러분 사랑 합니다.
  21. 21. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<SUMMARY>
  22. 22. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details> 요소의 요약, 캡션, 설명
  23. 23. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details>
  24. 24. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace확장 콘텐츠
  25. 25. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<details open>
  26. 26. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace콘텐츠 미리 열림
  27. 27. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<table><caption><strong>한우 등급</strong><details><summary>도움말</summary><p>4년간 조사하여 대부분 2등급으로 나타남</p></details></caption>… 중략 …</table>구분 등급2010년 2등급2011년 3등급2012년 2등급2013년 2등급한우등급도움말
  28. 28. 하성필 rebehayan@emotion.co.krSUMMARY e-motion &e-brace<table><caption><strong>한우 등급</strong><details><summary>도움말</summary><p>4년간 조사하여 대부분 2등급으로 나타남</p></details></caption>… 중략 …</table>구분 등급2010년 2등급2011년 3등급2012년 2등급2013년 2등급한우등급도움말4년간 조사하여 대부분 2등급으로 나타남

×