'웹표준' 태그의 글 목록

HTML5에 대해 들어보셨습니까?
구글이 HTML5 지원을 공개적으로 천명하고,
애플과 어도비사의 HTML5 동영상 이슈로 새로운 웹 기술에 대한 궁금증을 더해 가고 있습니다.

아래 주소에서 HTML5 에 관련한 여러가지 동영상을 보실 수 있습니다.

http://webappscon.com/html5/video/

이미지 : html의 역사 - 발표자료 중

발표자료 다운로드 http://www.slideshare.net/Channy/html5-html5-open-conference/download

실전 HTML5 가이드
http://webstandards.or.kr/html5/

저작자표시

'개발도 하냐?' 카테고리의 다른 글

증강현실의 비지니스 기회 (0)	2010.08.09
사람에 대한 생각을 먼저해야 한다. (0)	2010.08.04
요구사항 관리도구의 비교 (0)	2010.08.02
개인 주민등록번호 노출상태 확인 (0)	2010.08.02
QR코드 (0)	2010.07.26

오랜만에 웹표준이란 태그로 북마크해둔것을 들어가서 정리했습니다.
웹사이트를 개발하기전에 한번씩 읽어본 후 해보시기 바랍니다.

0. DTD, Charset 공통 정의

1. 의미있는 구조적인 HTML 구성
-html 작성을 위한 가이드라인 : http://html.nhndesign.com/html_guideline
-자주발생되는 오류에 대한 가이드 : http://html.nhndesign.com/html_validation_guideline

2. Global, Layout CSS 제작
-CSS제작을 위한 가이드라인 : http://html.nhndesign.com/css_guideline

3. 접근성있는 Navigation 제작(키보드접근확인)

4. Section CSS 제작

5. 브라우저 호환성 테스트

6. 접근성 준수지침 검토

7.웹표준코딩의 장점 예
- TABLE VS DIV : http://www.thlife.net/34

8. table 에 th를 사용한 예제 : http://kukie.net/resources/design/using_th/using_th_table.html

9. css를 이용한 레이아웃의 사용 예 : http://naradesign.net/open_content/reference/layout/

10. 웹표준 준수를 통한 이익 : http://kukie.net/resources/benefits/index.htm

11. 드림위버에서 제목표기 단축키 : 제목표기하기 (단축키 ctrl+1 ~ ctrl+6)
- 아래의 CSS를 만들어서 테스트해보자 (ctrl+3)
- h3 {padding:8px 0 5px 35px; background:#EEE url(h3_ bullet.gif) no-repeat 5px center; border-bottom:1px solid #CCC }

12. 드림위버를 이용한 접근성 높은 테이블 제작 : http://naradesign.net/wp/2006/09/14/63/

13. 드림위버를 이용한 ‘Markup+CSS’ 브라우저 호환성 검사 : http://naradesign.net/wp/2006/09/28/75/

14. 특수문자 및 HTML Spacial Entities. : http://naradesign.net/wp/2006/10/30/86/

15. 웹접근성을 준수하는 사이트 제작 템플릿의 예 : http://db.garada.co.cc/html/form.htm

저작자표시

'개발도 하냐?' 카테고리의 다른 글

JAVA Application 한글깨짐 해결 (0)	2009.12.03
java 데몬형태 프로그램 작성시 서버소켓을 사용하는 shutdown 패턴 (0)	2009.12.02
Cross Domain Script 해결법 (0)	2009.12.01
HTML vs XHTML? (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30

출처 : http://naradesign.net/wp/2006/09/05/35/

XHTML 은 HTML 을 XML 문법에 맞게 변형하여 다시 한번 공식화 한 것 뿐입니다. 따라서 HTML과는 약간의 문법적 표기에 대한 차이만 갖는데 XHTML 문법은 좀더 엄격함을 요구하고 있습니다. XHTML 1.0 스펙을 보면 별도의 XHTML 요소(엘리먼트)에 대한 규격을 소개하고 있지 않은데 이는 XHTML에서 새롭게 추가된 요소가 존재하지 않고 HTML 을 XML 규격에 맞도록 단지 재 구성 하였기 때문 입니다.
드림위버를 사용하는 경우 DTD만 바르게 설정되어 있다면 설정된 DTD의 표준 문법에 맞게 바른 XHTML을 코딩해 주지만 HTML 과 XHTML의 문법적인 차이를 알고 있을 필요는 있습니다. 한마디로 정의하면 XHTML은 HTML의 W3C 최신 표준이며 보다 엄격하고(Well Formed) 확장가능한(extensible) 형태의 HTML 입니다. 아래는 HTML과 XHTML 의 문법적인 차이점 입니다.

#
문법적으로 엄격하게 구성되어 있어야 한다.

HTML 은 종료태그가 없는 것을 허용하였으나 XHTML은 반드시 종료태그를 갖는다. HTML 은 태그의 중첩이 잘못된 것을 허용하였으나 XHTML은 잘못된 중첩을 허용하지 않는다.
#
요소와 속성은 소문자로 표기되어야 한다.

HTML 은 대소문자를 함께 사용하는 것을 허용하였으나 XHTML의 마크업 ‘요소’와 ‘속성’들은 반드시 소문자로 표기한다. 단, 속성의 ‘값’에는 대소문자 혼합 표기가 가능하다. 하지만 대소문자를 명확하게 구분하기 때문에 대문자로 구성된 ‘값’과 소문자로 구성된 ‘값’은 동일하지 않고 확실히 구별된다.
#
모든 태그는 종료태그를 갖는다.

HTML 의 경우 <p>, <td> 등의 태그에서 종료태그를 생략하는 것을 허용하였지만 XHTML 의 경우 반드시 닫아야 한다.
#
속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.

HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성 ‘값’은 따옴표 안에 있어야 한다.
#
속성과 값의 단축표기를 허용하지 않는다.

HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않는다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 한다.
#
비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.

HTML 에서 <br>, <hr> 과 같이 표기되는(포함하는 내용이 없이 비어있는) 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.
#
a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않는다.

id 와 name 을 함께 사용하던 마크업의 name 속성은 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.x 모드까지 지원하고 있다. 하지만 다음 버전에서는 분명히 폐기된다.

참조문서

XHTML 1.0 규격(한국어) http://trio.co.kr/webrefer/xhtml/overview.html
XHTML 1.0 규격(원문) http://www.w3.org/TR/xhtml1/
HTML 및 XHTML 요소 http://www.w3schools.com/tags/default.asp

저작자표시

'개발도 하냐?' 카테고리의 다른 글

웹접근성을 보장하는 웹개발을 위한 고려사항 (0)	2009.12.02
Cross Domain Script 해결법 (0)	2009.12.01
웹표준 가입폼 (0)	2009.11.30
javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18

접근성을 고려한 가입폼의 예제

1. 폼안의 내용그룹을 표시하는 fieldset
2. dl, dt, dd 를 이용한 의미있는 구성
3. float, clear 를 이용한 디자인변경

# fieldset
* 하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소로서, 회원가입 페이지의 전송양식을 예로 든다면 ‘필수입력, 선택입력’ 등과 같이 의미구조에 따라 전송할 내용을 그룹핑(또는 분할)

# legend
* FIELDSET 요소에 대한 캡션(또는 제목)을 제공하여 양식의 이해를 도움
* legend는 CSS로 변경하는 것이 쉽지 않은 경우가 있어 제목 요소(H1~H6)를 대신 사용할 수 있음

# DTD에따른 표현법 차이
* HTML 4.01: FIELDSET 사용시 LEGEND 요소는 반드시 첫 번째 자식(first-child)으로 마크업 되어야함
* XHTML 1.0: FIELDSET 사용시 LEGEND 요소는 생략 가능

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css" title="">
    body {
        margin: 0;
        padding: 0;
        font-size: 75%;
        line-height: 1.5em;
        font-family: "NanumGothic", "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
    }
    form {
        margin: 0;
        padding: 0;
    }
    hr {
        display: none;
    }
    p, div, th, td, select, input {
        color: #333;
    }
    a:link, a:visited {
        color: #666;
        text-decoration: none;
    }
    a:active, a:hover {
        color: #000;
        text-decoration: none;
    }
    img {
        border: 0 none;
    }
    form dt {
        float:left;
        clear:both;
        width:100px;
    }
</style>
</HEAD>

<BODY>
<form action="....." method=".....">
<fieldset>
    <legend>필수항목</legend>
    <dl>
        <dt><label for="mbname">이름:</label></dt>
        <dd><input type="text" id="mbname" name="mbname" /></dd>

        <dt><label for="email">이메일:</label></dt>
        <dd><input type="text" id="email" name="email" /></dd>
    </dl>
</fieldset>
<fieldset>
    <legend>선택항목</legend>
    <dl>
        <dt><label for="address">주소:</label></dt>
        <dd><input type="text" id="address" name="address" /></dd>
    </dl>
</fieldset>
<p><input type="submit" value="확인" /></p>
</form>
</BODY>
</HTML>

저작자표시

'개발도 하냐?' 카테고리의 다른 글

Cross Domain Script 해결법 (0)	2009.12.01
HTML vs XHTML? (0)	2009.12.01
javascript AJAX 페이지로딩 (0)	2009.11.28
FLEX AIR - 케이웨더 날씨 모듈 (0)	2009.11.18
FLEX AIR 시스템트레이에 프로그램 넣기 (0)	2009.11.18

반드시 읽어볼것

http://ilmol.com/wp/css/css_start/

http://sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=153

http://www.cadvance.org ---> CSS ---> Page Layout Serie1s 의
해당 서브 목록의 글들만 모두 읽어 보고
(전 읽는데 30분 정도 걸렸습니다. 그리고 실행결과를 보기위해선 익스로 접속해야 하더군요)

왜...??? doctype 을 지정하는지 어떻게 사용하는지
페이지 레이아웃을 만들때 알아두어야 하는 것들과
익스에서의 div 태그 사용시 margin, padding, border 인하여 생기는 버그에 관해서 한번 알아보고

아래 css로 짜여진 레이아웃들을 다운받아 많이 다루어 보면 좋을듯 합니다.

http://www.freelayouts.com/
http://templates.arcsin.se/
http://www.templateworld.com/
http://www.oswt.co.uk/
http://www.cssfill.com/
http://www.oswd.org/
http://www.free-css-templates.com/
http://www.templatesbox.com/
http://www.ex-designz.net/template/

'개발도 하냐?' 카테고리의 다른 글

검색결과의 Visualization (0)	2008.09.24
FLEX (0)	2008.09.22
웹표준개발방법론 (0)	2008.02.02
웹표준관련 책 (0)	2008.02.02
Internet Explorer Developer Toolbar (0)	2008.02.02

http://clagnut.com/sandbox/csstabs/?writingtext=csstabs

The HTML:

<ul id="globalnav">
  <li><a href="#">Home</a></li>
  <li><a href="#" class="here">About</a>
    <ul>
      <li><a href="#">Vision</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Culture</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#" class="here">History</a></li>
      <li><a href="#">Sponsorship</a></li>
    </ul>
  </li>
  <li><a href="#">News</a></li>
  <li><a href="#">Proof</a></li>
  <li><a href="#">Process</a></li>
  <li><a href="#">Expertise</a></li>
  <li><a href="#">Help</a></li>
</ul>

The CSS:

/*globalnav*/

#globalnav {
	position:relative;
	float:left;
	width:100%;
	padding:0 0 1.75em 1em;
	margin:0;
	list-style:none;
	line-height:1em;
}

#globalnav LI {
	float:left;
	margin:0;
	padding:0;
}

#globalnav A {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
	background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
	position:relative;
	z-index:102;
}

/*subnav*/

#globalnav UL {
	position:absolute;
	left:0;
	top:1.5em;
	float:left;
	background:#bbb;
	width:100%;
	margin:0;
	padding:0.25em 0.25em 0.25em 1em;
	list-style:none;
	border-top:1px solid #fff;
}

#globalnav UL LI {
	float:left;
	display:block;
	margin-top:1px;
}

#globalnav UL A {
	background:#bbb;
	color:#fff;
	display:inline;
	margin:0;
	padding:0 1em;
	border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
	color:#444;
}

'오픈소스SW' 카테고리의 다른 글

Web-Based HTML Editor 비교 및 미리보기 (0)	2008.12.02
core file 분석 (0)	2008.04.17
공개웹방화벽을 이용한 보안대응 (0)	2008.01.11
공개SW라이센스가이드(20007.11) (0)	2008.01.05
[펌]오라클 OCP 데이터베이스 백업과 복구전략 (0)	2007.09.06

invalid-file

'개발도 하냐?' 카테고리의 다른 글

FLEX (0)	2008.09.22
CSS 레이아웃기초 (1)	2008.02.02
웹표준관련 책 (0)	2008.02.02
Internet Explorer Developer Toolbar (0)	2008.02.02
웹 접근성 향상을 위한 웹 표준화 가이드 (0)	2008.01.31

웹표준 3종 세트

http://channy.creation.net/blog/?p=283

[특별세트] 실용 예제로 배우는 웹 표준 + 웹 2.0을 이끄는 방탄웹
댄 씨더홈 저/박수만 역

★★ 『 실용 예제로 배우는 웹 표준』 소개

웹 표준을 이용해 사이트를 구현하면 어떤 장점이 있을까?
이 책은 웹 표준의 장점을 이해하기 위한 필수 안내서입니다.

XHTML과 CSS 같은 웹 표준은 이미 많이 알려진 기술입니다. 웹 관련 직종에 있다면 웹 표준에 대해서 들어봤을 것입니다. 하지만 웹 표준을 지원하는 웹 브라우저가 점차 늘어가고 있고, 웹 디자이너와 웹 개발자가 웹 표준이 주는 실질적인 이점을 이해하고 이를 준수하려고 하는 움직임이 많아지고는 있지만, 웹 표준으로 사이트를 구축하는 것은 아직까지 쉬운 일...

'개발도 하냐?' 카테고리의 다른 글

CSS 레이아웃기초 (1)	2008.02.02
웹표준개발방법론 (0)	2008.02.02
Internet Explorer Developer Toolbar (0)	2008.02.02
웹 접근성 향상을 위한 웹 표준화 가이드 (0)	2008.01.31
또배워야하는기술 - W3C의「스파클」 (0)	2008.01.22

IE에 add-in 되는 웹문서 분석 툴

w3c로 바로 연결하여 validate 결과를 보기
view DOM
css를 disable 시키는 기능
div elements 아웃라인을 보여주는 기능
브라우저를 리사이징해주는 기능 등

http://www.microsoft.com/downloads/details.aspx?amp;amp;amp;displaylang=en&familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

또다른 도구로는

http://www.visionaustralia.org.au/info.aspx?page=614

한글판 :

invalid-file

참고.

'개발도 하냐?' 카테고리의 다른 글

웹표준개발방법론 (0)	2008.02.02
웹표준관련 책 (0)	2008.02.02
웹 접근성 향상을 위한 웹 표준화 가이드 (0)	2008.01.31
또배워야하는기술 - W3C의「스파클」 (0)	2008.01.22
2008년 비지니스 키워드 1년내에 웹접근성 준수를위한 기술컨설팅 및 사업수행필요 (1)	2008.01.20

2. 접근성 향상 적용 과제

웹 표준 준수
구조,표현,행동 분리
최소한의 디버깅을 거쳐라.
효율적인 웹 개발 방법론을 가져라.
의미에 맞는 HTML 태그 사용 (가독성)
올바른 표(table) 사용
대체 수단 제공 (이미지,플래시,동영상,음성)
반복 네비게이션 링크
키보드로만 서비스 이용 가능
독립적인 링크 텍스트
웹 문서에는 독립적인 제목을 붙인다
양식 컨트롤과 양식 이름표를 명확히 짝짓는다.

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

테이블은 레이아웃이 아닌 본래 목적에 맞게 표로만 사용한다.
summary,Caption에 표의 목적을 간단하게 기술하는 제목을 갖는다.
제목은 th 에 내용은 td 에 넣는다.
리스트형 표의 th 에는 scope="col" 을 넣는다.

<table class="list" width="100%" summary="표의 목적을 간단하게 기술하는 제목">
<caption>표의 목적을 간단하게 기술하는 제목</caption>
<tr>
	<th scope="col">제목</th>		
	<th scope="col">제목</th>
	<th scope="col"><a href="#">제목</a></th>
</tr>
<tr>
	<td>내용</td>
	<td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td>
	<td>내용</td>		
</tr>
<tr>
	<td>내용</td>
	<td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td>
	<td> </td>		
</tr>
</table>

2.6.2 Table layout vs CSS layout

Table layout

장점: FrontPage 나 Dreamwever 같은 위지윅(WISIWYG) 에디터에서 테이블로 개발하기가 매우 쉽다.
단점: 표현데이타와 컨텐츠의 혼용 (페이지 크기를 불필요하게 증가); 사이트 재디자인시 많은 작업과 비용을 유발; 사이트 전체의 일관성을 유지하는데 매우 힘들고 과도한 비용을 발생시킴; 장애인,핸드폰,PDA..등에서 접근성을 떨어뜨린다.; 프로그램에서 데이터를 알기 힘들고, pc이외의 기계에서 렌더의 어려움이있다.; 내부 Td안의 데이터가 모두 로드 되기 전까지 전체를 표시하지 않아 속도가 느리다

CSS layout

장점: 효율적인 마크업; 페이지 용량감소; 유지보수 편리 비용절감; 이해하기 쉬운 구조; 메인 컨텐츠를 먼저 보여주고 그래픽을 나중에 로드할 수 있게 한다.; HTML/텍스트 비율을 낮게 유지함으로써 로딩 시간을 감소시킨다.; 리퀴드 디자인을 추구함으로써 사용성을 증가시킨다.; 포지셔닝에 있어 극단적인 유연성을 가능하게 한다.
단점: 어렵고 구현하는데 시간이 많이 소요

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

플러그인을 사용하는 경우 대체 콘텐츠를 제공해야 한다.

<!-- 플래시 플러그인 -->
<object data="hello.swf" type="application/x-shockwave-flash">
	<!-- PNG 이미지 -->
	<object data="hello.png" type="images/png">
		<!-- GIF 이미지 -->
		<object data="hello.gif" type="images/gif">
			<!-- 일반 text -->
			<p>Hello!</p>
		</object>
	</object>
</object>

image

Alt, title, longdesc

<img src="images.gif" alt="[Description]“ longdesc="imgdesc_a.html" />

iframe

title

<iframe
title=“꼬리말” id="commentFrame" src=“cmt.html" width="100%" height="100"
scrolling="no" frameborder="0"></iframe>

frame

title,noframes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Daum UI Style Guidline </title>
<link rel="SHORTCUT ICON" href="http://guideline.hosts.daum.net/uidev2006/file/favicon.ico">
<link rel="stylesheet" href="common.css" type="text/css" >	
</head>

<frameset rows="30,*" cols="*" frameborder="NO" border="0" framespacing="0"> 
<frame src="frameup.html" name="topFrame" scrolling="NO" noresize title=“로고”>
<frameset cols="160,*" frameborder="NO" border="0" framespacing="0" rows="*"> 
<frame src="menu.html" name="left" noresize  scrolling="no" border="0" title=“Daum UI 개발 가이드라인 메뉴”>
<frame src="top.html" name="main" scrolling="yes" border="0“ title=“ 업데이트 소식” >
</frameset>
</frameset>
<noframes>
<body>
<P>이 프레임세트(frameset)는 다음 문서들을 포함한다.</p>
<ul>
	<li><a href="menu.html">Daum UI 개발 가이드라인 메뉴</a></li>
	<li><a href="svc.html">업데이트 소식</a></li>
</ul>
</body>
</noframes>
</html>

동영상

caption 지원

동영상 caption 지원

2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

카페 탑

<div
id=“skiptocontent">
<ul>
<li><a href="#cH_logo" onclick="skipid('cH_logo')"
onkeypress="skipid('cH_logo')" >Global 메뉴로 바로가기</a></li>
<li><a href="#left" onclick="skipid('left')"
onkeypress="skipid('left')">왼쪽 메뉴로 바로가기</a></li>
<li><a href="#wrap_content" onclick="skipid('wrap_content')"
onkeypress="skipid('wrap_content')">콘텐츠로 바로가기</a></li>
<li><a href="#search_euckr" onclick="skipid('search_euckr')"
onkeypress="skipid('search_euckr')">카페검색창으로
바로가기</a></li>
<li><a href="#footer" onclick="skipid('footer')"
onkeypress="skipid('footer')" >copyright 바로가기</a></li>
</ul>
</div>

2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

보통 마크업 구조상으로 보면 아레와 같이 분리되어 있어 텝메뉴 순서상으로도 카페>블로그>플래닛>포커스>랭킹... 순으로 되어 포커스가 카페 depth 안에 포함된 카테고리인지 인식 할 수가 없게 된다..

잘못된 소스

카페
블로그
플래닛

포커스
랭킹
서포터즈
공식커뮤니티

아레와 같이 순서에 맞게 구조화 되면 올바르게 표현할수 있다

잘된 소스

카페
- 포커스
- 랭킹
- 서포터즈
- 공식커뮤니티
블로그
플래닛

예제) 순서에 맞게 구조화된 문서

순서에 맞게 구조화된 GNB

<div id="gnbTabNav" class="home">
<ul id="gnbList">
	<li id="home"><a href="#" title="동영상 홈" class="menu">동영상 홈</a>
		<ul>
			<li class="sub"><a href="#">동영상 올리기</a></li>
			<li class="on"><a href="#"><b>MY 동영상</b></a></li>
			<li><a href="#">MY 동영상 댓글 모아보기</a></li>
		</ul>
	</li>
	<li id="new"><a href="#" title="NEW 동영상" class="menu">NEW 동영상</a></li>
	<li id="popular"><a href="#" title="뜨는 동영상" class="menu">뜨는 동영상</a></li>
	<li id="channel"><a href="#" title="채널" class="menu">채널</a></li>
	<li id="ranking"><a href="#" title="동영상 랭킹" class="menu">동영상 랭킹</a></li>
	<li id="producer"><a href="#" title="동영상 PD" class="menu">동영상 PD</a></li>
	<li id="event"><a href="#" title="이벤트" class="menu">이벤트</a></li>
	<li id="pie"><a href="#" title="파이" class="menu">파이</a></li>
</ul>
</div>

2.9.2 마우스와 키보드 이벤트 처리기 대응

이벤트 처리기가 장치 독립적인지 확인하십시오. 이 이벤트 처리기는 필수적인 정보나 이 페이지를 사용하는 데 필요합니다. 이벤트 처리기를 "onfocus", "onblur" 및 "onselect"와 같은 장치 독립적인 처리기로 제한할 것을 고려하십시오. 장치 독립적인 특성을 사용해야 하는 경우 키보드 방식을 제공하십시오. 예를 들어, "onmousedown"의 경우 "onkeydown"도 지정하십시오. 마우스 좌표에 의존하는 이벤트 처리기는 장치가 독립적이지 않으므로 사용할 수 없습니다.

마우스와 키보드 이벤트 처리기 대응표
마우스	키보드
onmousedown	onkeydown
onmouseup	onkeyup
onclick	onkeypress
onmouseover	onfocus
onmouseout	onblur

각각의 메뉴 링크에 onMouseOut, onMouseOver 이벤트만을 사용하여 키보드를 이용한 접근은 제한됩니다.
onFocus, onBlur를 추가하여 작성하면 이론적으로 최소의 키보드 접근이 가능하게 됩니다.
ondblclick, onmousemove 등에 상응하는 키보드 이벤트 처리기는 HTML 4.0 현재 존재하지 않으므로 그러한 이벤트 처리기는 되도록 사용을 피하는 것이 좋습니다.

<a href=“#" onmouseout=“view()“ onblur=“view()“ onmouseover=“hide()” onfocus=“hide()” >...

예제) 키보드로 텝 메뉴 컨텐츠 구현

cssw 제거된 콘텐츠

<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ko">
<head> <meta http-equiv="Content-Type" content="text/html;
charset=euc-kr"> <meta http-equiv="imagetoolbar" content="no">
<title>Youth Voice - 퍼져라, 대한민국 젊은 목소리</title> <script
type="text/javascript"
src="http://image.youthvoice.daum.net/yv2/js/common.js"></script>
<link rel="stylesheet" type="text/css"
href="http://image.youthvoice.daum.net/yv2/css/common.css">
<style type="text/css"> /* common */ body
{margin:0;padding:0;text-align:center;} h1,h2,h3,h4,h5
{padding:0;margin:0;} hr {display: none;} textarea,input
{font-size:12px;} img {vertical-align:middle;} dl,dt,dd
{margin:0;padding:0;} .var
{font-family:dotum;font-weight:normal;font-size:11px;color:#ccc;}
#yv_mediazone
{text-align:left;position:relative;width:600px;height:170px;margin-top:30px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_bg2.gif)
10px 25px no-repeat;} #yv_mediazone h3 {padding-left:7px;height:49px;}
#yv_mediazone h3 a
{display:block;width:149px;height:15px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tt_04.gif)
no-repeat;font-size:1px;line-height:0%;text-indent:-1000em;overflow:hidden;}
#yv_mediazone h4 {border:none;padding:0;margin:0;} #yv_mediazone h4 a
{position:absolute;top:25px;left:7px;display:block;text-align:center;width:65px;padding:8px
0 2px
0;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_gr_bl.gif)
no-repeat #fff;font-weight:normal;} #yv_mediazone h4.on a
{width:65px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_wh_bl.gif)
left 1px no-repeat;font-weight:bold;padding:8px 0 3px 0;} #yv_mediazone
h4#y_1 a {left:10px;} #yv_mediazone h4#y_2 a {left:80px;} #yv_mediazone
h4#y_3 a {left:146px;} #yv_mediazone h4#y_4 a {left:212px;}
#yv_mediazone ul {clear:left;padding:14px 0 0 23px;} #yv_mediazone li
{float:left;padding:0 10px;} #yv_mediazone li p {padding-top:7px;}
#yv_mediazone li p a {font-family:dotum;font-size:11px;color:#666;}
</style> <script type="text/javascript"> <!-- function
viewYear(tab){ var
stYear=document.getElementById("yv_mediazone").getElementsByTagName("ul");
for(i=0;i<stYear.length;i++){ var sty = stYear[i];
sty.style.display="none"; } var
stYearH4=document.getElementById("yv_mediazone").getElementsByTagName("h4");
for(i=0;i<stYearH4.length;i++){ var sth = stYearH4[i];
sth.className=""; }
document.getElementById('y_'+tab+'_list').style.display="block";
document.getElementById('y_'+tab).className="on"; } -->
</script>
</head>
<body> <div id="yv_mediazone">
<h3><a href="#" title="유스크리에이터 미디어존">유스크리에이터
미디어존</a></h3> <h4 id="y_1" class="on"><a
href="javascript:;" onmouseover="viewYear('1')"
onfocus="viewYear('1')">2005년</a></h4> <ul
id="y_1_list"> <li> <a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2005..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_2"><a href="javascript:;"
onmouseover="viewYear('2')"
onfocus="viewYear('2')">2004년</a></h4> <ul
id="y_2_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2004. 억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_3"><a href="javascript:;"
onmouseover="viewYear('3')"
onfocus="viewYear('3')">2003년</a></h4> <ul
id="y_3_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2003..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_4"><a href="javascript:;"
onmouseover="viewYear('4')"
onfocus="viewYear('4')">2002년</a></h4> <ul
id="y_4_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">2002..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
</div> </body> </html>

2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

시각 장애인의 경우, 홈페이지를 순차적으로 읽어 주는 기계를 통해서 탐색하는데, 빠른 탐색을 위해 키보드의 Tab key로 링크에서 다음 링크로 건너 띄는 경우가 많이 있다. 그럴 때에 음성으로 그 링크의 성질을 설명해주는데 ‘여기’라고 나오면 도대체 그 링크가 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정해야 한다.

좋지 않은 예

Abc 제품에 대한 자세한 설명을 보리면 <a href="#">여기</a>를 누르십시오.

좋은 예

자세한 내용이 궁금하신 분은 <a href="#"> Abc 제품에 제품에 대한 셜명서</a>를 보십시오

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

"더보기", "자세히보기" 등 각 콘텐츠에 반복적으로 열람되는 이미지 링크 사용시 음성으로 링크가 구체적으로 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 "000 더보기","000 자세히 보기"로 수정해야 한다.

2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

일반인들의 사용성 측면, 검색 엔진의 효율성 측면에서 제목은 매우 중요하다. 또, 시각 장애인에게는 제목이 여러 문서를 구분하고, 현재 위치를 파악하고 앞으로 계속 탐색할 것인지 말 것인지 결정하는 가장 중요한 단서가 된다.
따라서 제목은 해당 문서의 내용을 대표할 수 있도록 정확하고 간결하게 작성해야 한다.

<title> Daum 서비스명 - 서브 서비스명 : 문서제목  </title>

head테그안에서 title 선언시 주의사항

utf-8 인코딩 문서에서 head테그 맨 상단에 한글이 포함된 title 오면 IE 일부에서 문서가 하얗게 보여지는 현상이 일어난다.
따라서 head테그 맨 상단에 title선언보다 meta테그 인코딩 먼저와야 한다.

좋지 않은 예

<head>
<title> Daum tv팟 - 베스트 동영상 </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

좋은 예

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title> Daum tv팟 - 베스트 동영상  </title>

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예

<input type="radio" name="sex" value="M" checked>남
<input type="radio" name="sex" value="F" >여

좋은 예

<input type="radio" id="sex_m" name="sex" value="m" checked="checked" /><label for="sex_m">남</label>
<input type="radio" id="sex_f" name="sex" value="f" /><label for=“sex_f”>여</label>

참고 출처:

실전 웹 표준 가이드 : 한국소프트웨어진흥원
소수 사용자를 위한 웹 접근성 : lg전자 global elearning group, 신승식
공평한 인터넷 환경 제공을 위한 창의적 UI 발상 프로젝트 : Daum 커뮤니케이션 커뮤니티 UI팀 조제희
웹 접근성 이해 : 한국정보문화 진흥원 접근기술 연구팀 현준호
http://www.bb00dd.com/blog/entry/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9-%ED%91%9C%EC%A4%80%ED%99%94-%EA%B0%80%EC%9D%B4%EB%93%9C-1

'개발도 하냐?' 카테고리의 다른 글

웹표준관련 책 (0)	2008.02.02
Internet Explorer Developer Toolbar (0)	2008.02.02
또배워야하는기술 - W3C의「스파클」 (0)	2008.01.22
2008년 비지니스 키워드 1년내에 웹접근성 준수를위한 기술컨설팅 및 사업수행필요 (1)	2008.01.20
웹2.0 지불대행서비스 이니시스 C2C Payment (0)	2008.01.20

웹표준

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

The HTML:

The CSS:

'오픈소스SW' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

'개발도 하냐?' 카테고리의 다른 글

2. 접근성 향상 적용 과제

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

2.6.2 Table layout vs CSS layout

Table layout

CSS layout

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

image

iframe

frame

동영상

2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

예제) 순서에 맞게 구조화된 문서

2.9.2 마우스와 키보드 이벤트 처리기 대응

2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

좋지 않은 예

좋은 예

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

head테그안에서 title 선언시 주의사항

좋지 않은 예

좋은 예

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예

좋은 예

'개발도 하냐?' 카테고리의 다른 글

티스토리툴바