Home // Blog Home // Notice Home // Tag Log Home // Location Log Home // Media Log Home // GuestBook

'웹표준, 웹접근성™'에 해당되는 글 53건

<<Prev 1 2 3 4 Next>>

CSS Nite in Seoul Vol.1 세미나

Posted at 2009/10/14 08:51 // in 웹표준, 웹접근성™ // by 블루비

CSS Nite in Seoul Vol.1 소개

CSS Nite in Seoul 실행위원회와 (유)리그래피가 함께 주최하고, 한국 마이크로소프트와 태그앤브레이스가 협찬하고, 하드코딩하는 사람들, CSS Design Korea, Clearboth가 후원을 하는 웹표준 컨퍼런스 CSS Nite in Seoul Vol.1이 오는 11월 21일 토요일 삼성동 한국 마이크로소프트 세미나룸에서 개최됩니다.

CSS Nite는 나고야, 오사카, 아오모리, 후쿠오카, 오키나와, 아키타, 삿포로, 후쿠이, 센다이, 히로시마 등 일본의 여러 도시에서 지금까지 총 113회의 컨퍼런스를 통해 18,191분이 참여한 가장 규모가 큰 웹표준 컨퍼런스입니다.

이번 기회를 통해 CSS Nite는 한국과 일본 양국간의 웹제작들간의 교류와 정보 공유를 위해 자리를 마련했고, 그 시작을 서울에서 하고자 합니다.

행사내용과 프로그램

일정	2009년 11월 21일 13:00-18:00 당일 프로그램 소개 강의 내용 소개
장소	한국 마이크로소프트(Microsoft-korea) 오시는 길
모집인원	150명
등록비용	사전 등록：25,000원 현장 등록：30,000원 사전등록하기
발표자	타가노 마사히로（주식회사 스위치 대표 이사 ） 마시코 다카히로（주식회사 사이바가덴 대표 이사） 박 태준（주식회사 NHN 웹표준1팀팀장） 발표자 소개(프로필)

프로그램

	발표자	내용
12:30 [30min ]		입장개시
13:00 [ 15min ]	이 유미	오픈닝,행사 소개
13:15 [ 45min ]	박 태준	웹표준을 기반으로 한 HTML개발 프로세스
14:00 [ 60min ]	타가노 마사히로	일본의 웹표준현실과 제작 프로세스
15:00 [ 10min ]	한국 마이크로소프트	라이트닝 토크1
15:10 [ 15min ]		휴식
15:25 [ 60min ]	마시코 다카히로	미래의 웹표준으로서의 HTML5과CSS3
16:25 [ 10min ]	태그앤브레이스	라이트닝 토크2
16:35 [ 15min ]		휴식
16:50 [ 60min ]	박태준, 박중석,타가노 마사히로, 마시코 다카히로,미츠코시 유스케	패널토의와 질의응답
17:50 [ 10min ]		경품 추첨
18:30 [ 60min ]		교류파티(무료)

강의 내용 소개

웹표준을 기반으로 한 HTML개발 프로세스

박태준(NHN 웹표준1팀)

▪ 세션의 주요 대상은? – 웹표준 개발자 및 프로젝트 매니저 그리고 효율적인 웹개발 프로세스에 관심이 있는 모든 분.

▪ 가장 전달하고 싶은 메세지는 무엇인가? – 잘 짜여진 HTML 개발 프로세스는 웹사이트의 품질은 물론 웹개발시 일어나는 많은 시행착오를 줄여, 생산성을 향상 시킬 수 있습니다.

▪ 세션을 듣고 얻을 수 있는 노하우/스킬은? – 웹개발 프로세스 전반에 걸쳐 마크업의 효과적인 역할 수행입니다.

일본의 웹표준현실과 제작 프로세스

주식회사 스위치(株式会社スイッチ 대표 이사 / CSS Nite 주최)

Web 표준 및 제작 업무 (효율적인 마크업 작업의 WORK FLOW),HTML의 구조적, 문자와 레이아웃에 관한 CSS로 시각 정보의 적용에 대해 효율적인 마크업 작업의 워크플로를 설명합니다.

미래의 웹표준으로써의 HTML5과Css3

마시코 다카히로(주식회사 사이버가덴 대표 이사, Web 제작 / 고문)

HTML5과 CSS3의 보급에 따라, 기존의 HTML이나 CSS에 대한 지식은 Web 사이트 제작 실무에 대응할 수없는 시대에 진입했습니다.

또한 액세스 가능성에 대해서도 W3C의 “WCAG 2.0″가 2008년 12월에 발표된 이후 Web사이트에 요구되는 요건이 크게 달라있습니다. 이 세션에서는 국제 Web 표준의 현황과 향후 이외에, 일본에서의 대처 상황을 실무적인 관점도 포함하여 설명합니다.

발표자 소개(프로필)

장소

한국 마이크로소프트(Microsoft-korea): 강남구 대치동 포스코센터 서관 5층
TEL : 02-531-4500

운영

주최: CSS Nite in SEOUL実行委員会
공동주최: CSS Nite（株式会社スイッチ）

Conference, css, CSS Nite, html, HTML5, seoul, Web, 웹, 웹표준, 컨퍼런스

No Comment 1 Trackback

슬라이드로 보는 CSS Inheritance 메뉴얼

Posted at 2009/07/29 18:21 // in 웹표준, 웹접근성™/CSS // by 블루비

슬라이드로 보는 CSS Inheritance 메뉴얼
자~~ 한번 시작해볼까요??

CSS Inheritance - a simple step-by-step tutorial

View more documents from Russ Weakley.

inheritance, stylesheet, Tutorial, 스타일시트

No Comment No Trackback

CSS 몇가지 팁(TIP)

Posted at 2009/07/23 13:07 // in 웹표준, 웹접근성™/CSS // by 블루비

1. focus, active 시 생기는 outline 제거(IE 제외)

a:active, a:focus{
    outline:none;
}

2. 링크 태그 자동 줄 바꿈 막기

a {
    white-space:nowrap;
}

3. 파이어폭스에서 스크롤바 항상 보이기

html{
    overflow:-moz-scrollbars-vertical;
}

4. 프린트시 페이지 나누기

h2 {
    page-break-before:always;
}

css, stylesheet, TIP, 스타일시트

No Comment No Trackback

HTML5 문법, DOCTYPE, 인코딩, 추가요소

Posted at 2009/07/16 13:13 // in 웹표준, 웹접근성™/HTML5 // by 블루비

문법

HTML 5 언어는 이미 잘 알려진 HTML 4와 XHTML1 문법과 호환 됩니다만 HTML내 난해한 SGML 문법과는 호환되지 않습니다. 문서는 text/html MIME 형식을 사용하게 됩니다.
HTML 5는 구현을 용이하기 위해 오류 처리를 비롯하여 세부적인 파싱 규칙을 정의 합니다. 사용자 에이전트는 text/html MIME 형식을 가진 문서를 파싱 할때는 이러한 규칙을 따르게 됩니다. 아래에 HTML 문법과 함께 처리하는 간단한 예제가 있습니다.
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>
</html>
HTML 5에 사용된 다른 문법은 바로 XML 입니다. XHTML1 문서 및 구현과 같은 문법을 사용할 수 있습니다. 이 문법을 사용하는 문서는 XML MIME 형식을 사용하고 http://www.w3.org/1999/xhtml 네임 스페이스를 이용하고 XML 명세에 따라야 합니다. [XML]
아래 예제는 HTML 5에서 XML 문법을 사용할 때의 예제 입니다. 아래 문서는 application/xhtml+xml나 application/xml 같은 XML MIME 형식을 따르고 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>

DOCTYPE

HTML 5 문법은 웹 브라우저가 표준 모드로 문서를 렌더링 할 수 있도록 문서 처음에 DOCTYPE을 지정해야 합니다. DOCTYPE은 특별한 목적이 없이 XML을 위한 옵션입니다. XML MIME 형식 문서는 관계 없이 항상 표준 모드로 동작합니다. [DOCTYPE]
기본 DOCTYPE 선언 방식은 <!DOCTYPE html>이며 대소문자 구별을 하지 않습니다. 초기 HTML 버전에서의 DOCTYPE은 HTML이 SGML의 일부라서 새로운 DTD를 참조해야 되었기 때문에 필요했지만 지금은 더 이상 그럴 필요가 없습니다. HTML 5는 HTML 문법을 사용하는 문서를 표준 모드로 동작하기 위해 DOCTYPE을 이리 저리 바꿀 필요가 없습니다. 웹 브라우저는 단순히 <!DOCTYPE html>만 있으면 표준 모드로 동작 합니다.

문자인코딩

HTML 5 저작자들은 문자 인코딩에 관한 아래 세 가지 부분 중 하나에 설정하여야 합니다.
전송 단계에서 HTTP 헤더에 Content-Type 표시.
문서 앞부분에 특수 유니코드 BOM 문자를 표시. 이 문자는 인코딩 방법에 대한 정보를 제공해 줍니다.
파일 초기 512 바이트 크기 내에 meta 요소 내 charset 속성에 표시. UTF-8 방식을 이용하면 <meta charset="UTF-8">와 같이 표기 하며 기존의 사용 방식인 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">에서 변경하는 게 좋습니다.

XML 문법을 작성하는 저작자들은 XML 명세에 따라 문자 인코딩 설정을 하여야 합니다.

HTML5 추가 요소

아래 요소들은 구조적 마크업을 위해 추가된 요소들입니다:
section 은 태그는 일반적인 문서 및 어플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는 h1-h6와 함께 사용할 수 있습니다.
article 은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.
aside 는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.
header 은 문서 내 머리말 부분을 표시할 때 사용합니다.
footer 는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.
nav 는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.
dialog 는 대화 기능을 표시할 때 사용할 수 있습니다.
<dialog>
 <dt> 안녕하세요?
 <dd> 네 오랜만입니다. 건강하시죠.
 <dt> 물론입니다. 당신은?
 <dd> 저도 좋습니다. 
</dialog>
figure 는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.
<figure>
 <video src=ogg>…</video>
 <legend>캡션 예제</legend>
</figure>
또 다른 몇 가지 요소들을 추가하였습니다.
audio 와 video 는 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중 source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.
embed 는 플러그인 컨텐츠를 표시할 때 사용합니다.
m 는 별도로 표시한 컨텐츠를 표시하는데 사용합니다.
meter 는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.
time 은 날짜나 시간을 표시하는 데 사용합니다.
canvas 는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용합니다.
command 는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.
datagrid 는 트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. (역자 주. 목록형 구조로 테이블 보다 쉽게 구조를 이해할 수 있습니다.)
details 은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다.
input 을 위한 list 속성과 datalist 는 유용한 콤보 박스를 만드는 데 사용합니다.
<input list=browsers>
<datalist id=browsers>
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>
event-source 는 서버가 보낸 이벤트를 파악하는 데 사용합니다.
output 은 자바 스크립트로 수행된 결과값을 표시하는 데 사용합니다.
progress 은 다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.
input요소에는 아래와 같은 좀 더 세부적인 type 속성 들을 추가 합니다.
datetime
datetime-local
date
month
week
time
number
range
email
url

새로운 형식들은 웹 서버에 기 정의된 유효 형식을 전달해 줄 수 있도록 사용자 에이전트가 일정에서 날짜 선택 시 달력을 표시해 주기 위해 만든 것입니다. 또는 주소록에 이메일 주소를 입력할 때 유효성을 체크 해 줌으로서 불필요한 자바 스크립트 유효성 확인 절차를 줄여 주어 사용자들이 빠르게 기능을 사용할 수 있도록 도와 줍니다.

- HTML 5 differences from HTML 4

HTML5

No Comment 1 Trackback

HTML5 Validator

Posted at 2009/07/13 09:46 // in 웹표준, 웹접근성™ // by 블루비

HTML5 Validator
http://validator.nu/

HTML5, validator

No Comment No Trackback

세번째 웹 표준의 날 (부제: 웹표준을 넘어서)

Posted at 2009/01/16 09:45 // in 웹표준, 웹접근성™ // by 블루비

세번째 웹 표준의 날 (부제: 웹표준을 넘어서)

일시 : 2월 7일 토요일 12시 30분 ~ 18시
장소 : 한국정보문화진흥원 2층 세미나실 (정보문화진흥원 오시는길)

주최 : CDK, ClearBoth
후원 : 한국정보문화진흥원

발표순서

12:30 ~ 13:00 시작
13:00 ~ 13:30 웹 표준을 넘어서 - 정찬명(http://naradesign.net/wp/)
13:30 ~ 14:00 웹 표준, 기술의 진정성 - 추지호(http://www.pageoff.net/)
14:00 ~ 14:30 장차법 시대의 웹 표준 - 장성민(http://www.jangkunblog.com/wp/)
14:30 ~ 14:50 20분간 휴식
14:50 ~ 15:10 브라우저 업그레이드 캠페인 - 조현진(http://resistan.com/)
15:10 ~ 15:30 웹 표준 경진대회 & CSS PLAYGROUND - 홍윤표(http://mydeute.com)
15:30 ~ 15:50 웹 접근성 품질 마크 인증제도 - 한정기(KADO)
15:50 ~ 16:10 20분간 휴식
16:10 ~ 16:30 웹 접근성 평가툴에 대한 의견 - 문준기(KADO)
16:30 ~ 18:00 웹 표준... 선배에게 질문하세요.[발표자 + 조훈(http://hooney.net/), 신현석(http://hyeonseok.com), 윤좌진(http://www.boochim.net/)]

참가비 : 없음

웹접근성, 웹표준, 장차법

1 Comment 1 Trackback

블루비
2009/01/16 11:22 [수정/삭제] [답글]

50번째 신청 완료.. ^^

[CSS] 스크롤에 반응하지 않는 고정된 배너

Posted at 2008/10/10 11:42 // in 웹표준, 웹접근성™/CSS // by 블루비

브라우저의 하단(스타일속성에 따라 위치변경가능)에 고정된 배너를 사용할때 이 스타일을 쓰면 아주 유용할거 같습니다.
스크롤바가 생겨도 항상 같은 위치에 보여집니다..

미리보기

검정색 배너는 스크롤이 되어도 항상 고정된 상태로 보여진다..
(스크립트로 할경우 스크롤시 잔상이 남지만 스타일의 경우 잔상없이 깔끔하게 구현이 가능하다)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Position Fixed </title>
<style type='text/css'>
#content {
padding:10px;
font-size:9pt;
background:#FFFF00;
width:50%;
height:1000px;
}
#fix1 {
padding:10px;
font-size:9pt;
color:#fff;
background:#000;
width:100px;
height:100px;
position:fixed;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div id="content">Scroll Layout</div>
<div id="fix1">Fixed</div>

</body>
</html>

css, fixed, position, stylesheet, 배너, 스타일시트

No Comment No Trackback

DIV 가로, 세로 가운데 정렬 스타일시트 소스

Posted at 2008/09/02 13:25 // in 웹표준, 웹접근성™/XHTML // by 블루비

DIV 가로, 세로 가운데 정렬 스타일시트 소스

미리보기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> Div Vertical Align </title>
</head>
<style type='text/css'>
/***
* author : blueb (http://blueb.net/blog/1292)
* date : 2008-09-02
*/
#wrap {
width:100%;
height:600px;
border:1px solid #000;
}
#body {
position: relative;
top:50%;
left:50%;
width:200px;
height:200px;
border:1px solid #000;
margin-top:-100px; /*** height 값의 1/2 ***/
margin-left:-100px; /*** width 값의 1/2 ***/
background:yellow;
}
</style>
<body>
<div id='wrap'>
<div id='body'>
</div>
</div>
</body>
</html>

css, stylesheet, 가로, 세로, 스타일시트, 정렬

2 Comments 1 Trackback

유리창
2009/10/04 17:11 [수정/삭제] [답글]

좋은 정보 감사합니다.
근데 소스에 보면

margin-top:-100px; /*** width 값의 1/2 ***/
margin-left:-100px; /*** height 값의 1/2 ***/

에서 width값과 height값이 뒤바뀐거 같네요
margin-top에 height값의 1/2값이,
margin-left에 width값의 1/2값이...

오타인거 같네요
- 블루비
  2009/10/04 18:17 [수정/삭제]
  
  포스팅 한지 1년이 지났는데 이제서야 지적해주시는분이 한분 나타났네요.. ㅎㅎ.. 수정해두었습니다.
  감사합니다. ^^

멀티 엔진을 탑재한 IETester 브라우져

Posted at 2008/07/19 22:34 // in 웹표준, 웹접근성™/XHTML // by 블루비

IE8 beta 1, IE7, IE6, IE5.5의 랜더링 엔진을 탑재한 브라우져(IETester) 입니다.
웹개발시 편하게 각버전별로 테스트할 수 있어 편할거 같습니다.

IETester

install-ietester-v0.2.2.exe

IE, IE5.5, IE6, IE7, IE8, 멀티브라우져, 브라우져, 익스, 익스플로러

1 Comment No Trackback

BoKi
2008/07/21 09:49 [수정/삭제] [답글]

오~~
스크립트가 6이랑7이랑 약간 틀려서 애먹고 있었는데 좋네요~ ^^

CSS(Cascading Style Sheets) hack Table

Posted at 2008/05/29 15:27 // in 웹표준, 웹접근성™/CSS // by 블루비

CSS(Cascading Style Sheets) hack Table

hack, stylesheet, 스타일시트, 핵

2 Comments No Trackback

azki
2008/05/30 13:41 [수정/삭제] [답글]

ㅎㅎ 좋은 자료네요.
- 블루비
  2008/05/30 21:39 [수정/삭제]
  
  휴~~ 이제야 퇴근하네요..
  즐거운 주말 되세요.. ^^

ul 태그와 CSS를 이용한 탭(Tab)코딩

Posted at 2008/05/08 09:46 // in 웹표준, 웹접근성™/CSS // by 블루비

IE6, IE7, FF2 브라우저에서 작동되는 ul 태그를 이용한 탭(Tab) style 코딩 입니다.
슬슬 웹표준 코딩을 준비하느라.
짬짬이 만들어 본 소스입니다.

미리보기

http://blueb.net/dev/css/tabs.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Tabs</title>
<!-- Description	: XHTML Tabs style code [ IE6 , IE7 , FF2]	-->
<!-- Author			: blueb(http://blueb.net/blog)						-->
<!-- Date			: 2008-05-08											-->
</head>
<body>
<script type='text/javascript'>
function tabs(idx){
	for(i = 1; i <= 3 ; i++ ){
		document.getElementById('tab'+i).className = "";
		document.getElementById('content'+i).className = "content hide";
	}
	document.getElementById('tab'+idx).className = "active";
	document.getElementById('content'+idx).className = "content show";
}
</script>

<!--[if IE 6]>
<style type='text/css'>
/* IE 6 */
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:48px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:0;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type='text/css'>
/* IE 7 */
div.tabs-area {
	position:relative;
	z-index:2;
	height:48px;width:100%;padding:0;margin:0
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-2px;
	border-bottom:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if !IE]>-->
<style type='text/css'>
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:45px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<!--<![endif]-->
<style type='text/css'>

ul.tabs {
	padding:0px;margin:0px;
	z-index:2;
}

ul.tabs li {
	list-style:none;
	display:inline;
	height:50px;
}

ul.tabs li a {
	padding:5px 20px 3px 20px;
	border:1px solid #D3D9E6;
	text-decoration:none;   
	font-size:9pt;
	line-height:30px;
    color:#4B69AF; 
    background:#E9ECF2;
}

ul.tabs li a:hover {   
    background:#E8FFFF;
}

ul.tabs li a.active {   
    background:#fff;
    color:#4B69AF;   
    border:1px solid #D3D9E6;    
    border-bottom: 1px solid #ffffff;   
	padding:10px 20px 3px 20px;
	font-weight:bold;
	line-height:70px;
}

div.content {
	/* 컨텐츠 영역 박스 스타일 지정 하는곳 */
}
div.show		{ display:block;}
div.hide		{ display:none; }

</style>
<h3>IE6, IE7, FF2 Tabs</h3>
<div>
	<div class='tabs-area'>
		<ul class='tabs'>
		<li> </li>
		<li><a id='tab1' title="Tab1 Desc" href="javascript:tabs('1');" class='active'>Tab 1</a></li>
		<li><a id='tab2' title="Tab2 Desc" href="javascript:tabs('2');">Tab 2</a></li>
		<li><a id='tab3' title="Tab3 Desc" href="javascript:tabs('3');">Tab 3</a></li>
		</ul>
	</div>
	<div class='tabs-line'></div>
</div>


<div id='content1' class='content show'>
	<h1>Content 1</h1>
</div>
<div id='content2' class='content hide'>
	<h1>Content 2</h1>
</div>
<div id='content3' class='content hide'>
	<h1>Content 3</h1>
</div>

</body>
</html>

tab, 웹표준, 코딩, 탭

7 Comments No Trackback

이현국
2008/05/08 12:47 [수정/삭제] [답글]

지나가다가 그냥 한자 적고 갑니다.
현재 활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것 같네요.
또한(샘플이라서 그렇겠지만) a 태그에 title로 보다 상세한 메뉴의 설명이 있으면 더할나위 없이 좋겠어요 :-_
- 블루비
  2008/05/08 13:26 [수정/삭제]
  
  지적에 감사드립니다.
  지적하신 내용중 의아한 부분이 있어 혹시 보시거든 댓글 부탁드립니다.
  "활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것" 라고 말씀하셨는데 현재 bold 처리 되어 있는 상태이구여 string,em 태그는 추가가 어려울거 같습니다. css로만 컨트롤 되는 부분이기에.. 어떤 의미인지 알고 싶습니다.
  
  그리고 a 태그의 title 부분은 바로 수정해서 추가했습니다.
  아직 웹표준에 대한 인식이 부족한듯 합니다.
  
  좋은 하루 되십시오~!!
이현국
2008/05/08 13:45 [수정/삭제] [답글]

style에서의 bold 처리가 아닌, html 에서의 강조 처리를 말하려던 것이었어요.
style에서의 bold로 강조도 좋겠지만, strong 이나 em으로 강조 구문을 추가해 주는것이 시맨틱에도 맞는것 같아요 ^^;
- 블루비
  2008/05/08 14:10 [수정/삭제]
  
  음.. 접근성으로 봤을때는 strong 이나 em으로 처리 해주는것이 맞긴한데
  only css+xhtml 코드로는 어려울거 같네요..
  자바스크립트로 strong or em 엘러먼트를 추가하는 방법을 구현해야 한다는 의미 같은데 접근성을 위해서 꼭 그렇게 해야 하는 것일까요??
gilhyun
2008/05/14 16:54 [수정/삭제] [답글]

꼭 그렇게 해야한다 라는 법(?) 은 없지만 접근성에 도움이 된다면 한번더 고려해볼만 하겠죠?? ㅎㅎ 현국님의 의견은 스타일이 지원안될경우,스크린리더기 사용자등에게 '어떠한메뉴가 현재 활성화 되어있음' 를 표현하고자 strong 으로 표현을 제시하셨던것 같네요
- 블루비
  2008/05/14 20:31 [수정/삭제]
  
  스타일이 지원이 안된다면 저 탭은 무의미하기 때문에 컨테츠 영역에 어떤탭과 연결된것인지 대한 정보를 표시해줘야 할거 같네요..
  웹접근성까지 생각하려니깐 굉장히 어려워 지는거 같습니다.
- 블루비
  2008/05/14 20:39 [수정/삭제]
  
  사이트 정말 좋은데요..
  직업 운영하시는건가요??

웹 표준 경진대회

Posted at 2008/05/02 09:27 // in 웹표준, 웹접근성™ // by 블루비

웹 표준 경진대회

http://award.standardmag.org/

한번 참석해 볼까 생각중이다.
나 자신이 어느정도의 웹표준 기술을 가지고 있는지 테스트할 수 있는 기회도 될듯하다
짬을 내보긴해야하는데...
만약 한다하더라도 역시 개발자라 보니 디자인쪽에서는 점수을 못 뽑을 듯.. ㅠ.ㅠ

누군가가 시켜서 만드는 웹, 누구를 위해 만드는 것인지 알 수 없었던 웹은 이제 우리 자신과 보다 많은 사람들을 위해 개선되어 나가야 합니다. 더 많은 사람들이 더 좋은 방법을 이용하여 웹 사이트를 제작하고 사용할 수 있어야 하고, 시대가 이런 점을 이미 요구하기 시작했습니다. 이제는 가르치고 배우는 과정을 넘어 더 많은 사람이 보다 손 쉽게 이용할 수 있는 웹 표준으로 나아가야 할 것입니다. '규칙과 창조의 만남'이라는 슬로건처럼 웹 표준이라는 규칙을 지킴으로써 사이트가 얼마나 창조적으로, 유연하게, 얼마나 더 편리해질 수 있는지를 많은 사람들이 알 수 있게 될 것입니다.

CSS Design Korea에서 주최하고, Hosting.kr, 에이콘출판사, 디지털미디어리서치가 후원하는 이번 대회는 2008년 5 월 1일부터 약 한달간 진행되며 2008년 6월 예정인 세번째 웹 표준의 날에 그 대미를 볼 수 있게 됩니다.

우리가 원하는, 모두를 위한 웹을 만들어가려는 이번 행사에 많은 분들의 참여를 기대합니다.

: 개인 혹은 3인 이내로 구성된 팀

제시된 콘텐츠(인터넷 웹 콘텐츠 접근성 지침)를 웹 페이지로 작성하여 소정의 페이지를 통해 접수

주어진 내용 전체를 사이트의 콘텐츠로 활용해야 합니다.
사이트의 형식은 자유롭게 작성할 수 있습니다. (일반적인 정보 제공 형태의 사이트, 블로그 등)
최소한 1개 이상의 메뉴 형식이 포함되어야 합니다.
HTML, CSS, Javascript와 이미지 파일만 허용되며 각각의 고유 확장자를 사용해야 합니다. (.html, .css, .js, jpg, .gif, .png 등)
최종 작업물은 로컬에서 열었을 때 정상 동작할 수 있도록 작성되어야 합니다.
최종 작업물과 스크린샷을 압축하여 참가 신청 양식에 첨부해야 합니다.

: 100점기준; Markup(35) / CSS(30) / 디자인(20) / 기타(15)

: 대상(1팀) : iPod Touch 8Gb + Hosting.co.kr(도메인/호스팅 3년 이용권); 금상(1팀) : iPod Touch 8Gb + Hosting.co.kr(도메인/호스팅 1년 이용권); 은상(2팀) : 웹 표준 완전정복 세트; 동상(5팀) : 웹 표준의 교과서

* 입상팀을 제외한 참가자 전원에게 Web Standards day 컵(소량으로 참가 신청순에 의하여 지급 될 수 있습니다. )과 Hosting.co.kr(웹 호스팅 1년 이용권) 지급

* 그 외의 궁금한점이나 기타 의견 있으시면 CDK Forum의 관련 글타래를 이용해주시기 바랍니다.

: 2008.5.01~6.01

: 2008.6.15 (입상시 개별 통보)

웹표준

4 Comments No Trackback

azki
2008/05/06 10:02 [수정/삭제] [답글]

Web Standards day 컵.. 끌리는군요.. +_+
- 블루비
  2008/05/06 10:23 [수정/삭제]
  
  ^^ 그쵸? 희소성가치가 있다보니... 못해도 참가하면 줄거 같은데..ㅋㅋ
azki
2008/05/06 17:35 [수정/삭제] [답글]

저도 참가로 뜻을 굳혔습니다 -ㅁ-
- 블루비
  2008/05/07 13:35 [수정/삭제]
  
  좋은 결실 거두길 응원하겠습니다.. ^^
  어제 밤에 꿈속에서 레이아웃 잡는 꿈을 다꿨네요..ㅎㅎ

Web Content Accessibility Guidelines 2.0 CR 08/04/30 발표

Posted at 2008/05/01 21:33 // in 웹표준, 웹접근성™ // by 블루비

9년만에 WCAG 2.0 CR을 발표 했습니다.
웹 컨텐츠 접근성 가이드라인

Web Content Accessibility Guidelines 2.0

W3C Candidate Recommendation 30 April 2008
http://www.w3.org/TR/WCAG20/

Web Content Accessibility Guidelines 1.0

W3C Recommendation 5-May-1999
http://www.w3.org/TR/WCAG10/

W3C, WCAG1.0, WCAG2.0, 접근성

No Comment No Trackback

웹접근성 지침(KWCAG, WCAG) 1.0

Posted at 2008/04/10 08:59 // in 웹표준, 웹접근성™ // by 블루비

한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0
Korean Web Contents Accessibility Guideline 1.0

지침1. 인식의 용이성 - 웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.
항목1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.
항목1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기되는 대체 매체를 제공해야 한다.
항목1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

지침2. 운용의 용이성 - 웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.
항목2.1 (이미지 맵 기법 사용 제한) 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하여 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.
항목2.2 (프레임의 사용 제한) 콘텐츠를 구성하는 프레임의 수는 최소한으로 하여, 프레임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.
항목2.3 (깜박거리는 객체 사용 제한) 콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.
항목2.4 (키보드로만 운용 가능) 키보드 (또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.
항목2.5 (반복 내비게이션 링크(repetitive navigation link)) 웹 콘텐츠는 반복적인 네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.
항목2.6 (반응시간의 조절기능) 실시간 이벤트나 제한된 시간에 수행하여야 하는 활동 등은 사용자가 시간에 구애 받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

지침3. 이해의 용이성 - 사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.
항목3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
항목3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
항목3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

지침4. 기술적 진보성 - 구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.
항목4.1 (신기술의 사용) 스크립트, 애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.
항목4.2 (별도 웹사이트 제공) 콘텐츠가 항목 1.1에서 4.1에 이르는 13개 검사 항목을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹사이트)를 별도로 제공해야 한다.

W3C 웹 콘텐츠 접근성 지침(WCAG) 1.0
Web Contents Accessibility Guideline 1.0

지침1. 콘텐츠의 시각적, 청각적 요소에 대하여 동일한 내용의 대체수단을 제공하라.
항목1.1 모든 비 텍스트 요소에 대하여 대체 텍스트를 제공하라.
항목1.2 서버측 이미지 맵의 활성화 영역에 대하여 부가적인 텍스트 링크를 제공하라.
항목1.3 멀티미디어의 시각적 요소에 대한 대체 텍스트를 사용자 도구(웹 브라우저, 스크린리더 등 사용자가 웹 서비스를 이용하기 위한 도구)가 자동으로 읽을 수 없다면, 이 내용의 중요한 정보를 음성으로 제공하라.
항목1.4 시간에 따라 내용이 변하는 멀티미디어와 이에 대한 대체 텍스트는 그 내용을 동기화시켜야 한다.
항목1.5 사용자 도구가 클라이언트측 이미지 맵의 각 활성화 영역 및 링크정보에 대하여 대체 텍스트를 인식하여 처리할 수 없다면, 동일한 내용에 대하여 부가적인 텍스트 링크를 제공하라.

지침2. 색상만을 이용하여 정보를 전달해선 안된다.
항목2.1 색상을 통해 전달하는 모든 정보는 색상 없이도 전달될 수 있어야 한다.
항목2.2 색맹, 색약인 사람이나, 흑백 모니터를 통해 보는 사람들도 정보전달 시 문제가 없도록 전경색과 배경색은 충분한 명암 대비를 가져야 한다.

지침3. 마크업과 스타일시트를 사용하되 적합하게 사용하라.
항목3.1 적절한 마크업 언어가 존재한다면 정보를 전달하기 위해 이미지보다 마크업을 사용하라.
항목3.2 공식 문법에 맞도록 문서를 작성하라.
항목3.3 시각적 요소를 컨트롤하기 위해서는 스타일시트를 사용하라.
항목3.4 마크업 언어 및 스타일시트의 속성값 부여시 절대단위보다는 상대단위를 사용하라.
항목3.5 문서의 구조를 전달하기 위해 헤더요소를 사용하되 정해진 방법에 맞게 사용한다.
항목3.6 리스트 및 리스트 요소 마크업들을 적합하게 사용하라.
항목3.7 인용 마크업을 사용하되 들여쓰기 효과 등을 위해 사용하지 않는다.

지침4. 사용언어를 명시하라.
항목4.1 문서의 텍스트 및 대체 텍스트의 언어의 변화에 대해 분명히 명시하라.
항목4.2 문서에서 약자, 약어 등이 쓰일 경우, 해당 약어가 처음 나타났을 때 이에 대한 전체 내용을 명시하라.
항목4.3 문서의 기본언어를 지정하라.

지침5. 호환성을 지니도록 테이블을 작성하라.
항목5.1 데이터 테이블에 있어 행과 열에 대한 헤더를 구분하라.
항목5.2 행 또는 열에 대하여 두 단계 이상의 논리적 헤더를 갖는 데이터 테이블은 데이터 셀들과 헤더 셀들을 연결시킬 수 있는 마크업을 사용하라.
항목5.3 레이아웃 테이블을 이용한 정보를 선형화시켰을 때 해당 내용이 제대로 전달되지 않는다면 레이아웃 테이블을 사용하지 않는다. 꼭 사용해야 한다면 해당 내용에 대한 대체 정보를 제공하라.
항목5.4 테이블이 레이아웃을 위해 사용되었다면, 이 테이블 작성 시 시각요소 컨트롤을 위해 문서의 구조에 관한 마크업을 사용하지 말아라.
항목5.5 테이블에 대한 요약정보를 제공하라.
항목5.6 헤더 레이블에 대한 요약을 제공하라.

지침6. 신기술을 사용한 페이지는 해당 내용에 대해 호환성을 확보해야 한다.
항목6.1 스타일시트를 사용하지 않아도 읽을 수 있도록 문서를 구성하라.
항목6.2 동적 콘텐츠에 변화가 있을 경우에는 해당 내용에 대한 대체 콘텐츠도 갱신시켜야 한다.
항목6.3 스크립트, 애플릿, 또는 다른 프로그램 객체들이 사용 중지되어 있거나 지원되지 않아도 페이지가 사용 가능해야 한다. 이것이 불가능할 경우에는 별도의 접근가능한 페이지를 통해 정보를 제공해야 한다.

KWCAG, W3G, WCAG, 웹접근성

No Comment No Trackback

꼭 읽어야하는 웹표준, 웹접근성 포스트 링크

Posted at 2008/04/05 17:53 // in 웹표준, 웹접근성™ // by 블루비

웹표준

웹 뒤에 숨은 'web' : 웹표준 합시다. 제발 합시다.

웹접근성 화두 '장차법'

Standard Magazine(정찬명) : '장애인차별금지 및 권리구제 등에 관한 법률'과 대응방안

웹접근성, 웹표준, 장차법

2 Comments No Trackback

봄눈
2008/04/05 23:21 [수정/삭제] [답글]

부족한 제 글을 소개해 주셔서 감사합니다^^
그런데 제 블로그 제목을 [웹 뒤에 숨은 'web']으로 고쳐주시면 안될까요? 하하;
- 블루비
  2008/04/06 06:46 [수정/삭제]
  
  ^^ 네 당연히 그래드려야죠..

<<Prev 1 2 3 4 Next>>

'웹표준, 웹접근성™'에 해당되는 글 53건

CSS Nite in Seoul Vol.1 소개

행사내용과 프로그램

프로그램

강의 내용 소개

웹표준을 기반으로 한 HTML개발 프로세스

일본의 웹표준현실과 제작 프로세스

미래의 웹표준으로써의 HTML5과Css3

장소

운영

http://blueb.net/blog/trackback/1495

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1446

댓글을 남겨주세요.

1. focus, active 시 생기는 outline 제거(IE 제외)

2. 링크 태그 자동 줄 바꿈 막기

3. 파이어폭스에서 스크롤바 항상 보이기

4. 프린트시 페이지 나누기

http://blueb.net/blog/trackback/1444

댓글을 남겨주세요.

문법

DOCTYPE

문자인코딩

HTML5 추가 요소

http://blueb.net/blog/trackback/1442

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1440

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1381

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1312

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1292

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1267

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1239

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1224

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1221

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1219

댓글을 남겨주세요.

http://blueb.net/blog/trackback/1195

댓글을 남겨주세요.

웹표준

웹접근성 화두 '장차법'

http://blueb.net/blog/trackback/1191

댓글을 남겨주세요.

Category

Recent Comment

Recent Trackback

Counter