WAI-ARIA의 tab, 아직 사용하긴 이르다. 라는 글을 썼었는데, 탭을 헤딩으로 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업을 위한 자바스크립트 라이브러리는 찾기가 어려워 하나 만들었다. 이름하여 flowTab. (기본적으로 자연스럽게 흐르는 컨텐츠를 탭 UI로 만든다 하여 이렇게 지었다.) 마크업과 자바스크립트를 아래 코드와 같이 작성하면 된다. <script type="text/javascript"> // <!– $(function() { $(‘#tabs’).flowTab(); // $(‘#tabs’).flowTab({tabSelector: ‘> .heading’}); }); [...]

WAI-ARIA에는 다양한 위젯 – 여기서 위젯이란 tab, dialog, alert 등을 말한다. – 이 있는데 그 중 tab은 아직 조금 문제가 많은 것 같다. WAI-ARIA 저작 가이드 문서의 tab 부분을 보면 탭 인터페이스를 구현하는 방법을 자세히 소개하고 있는데 그 중 키보드 인터페이스에서 좌/우, Ctrl+Tab/Ctrl+Shift+Tab, Ctrl+PageUp/Ctrl+PageDown 키를 이용하여 탭과 탭을 이동하는 기능을 구현하도록 문서화되어 있는데 좌/우 키는 [...]

이 글은 아래의 두 문서 내용의 요약 정리본이다. WAI ARIA Live Regions – MDC How to use ARIA Live Regions for dynamic content – CodeTalks 이 글을 통해 ARIA 개발의 감각을 끌어올릴 수 있기를 바라며 스펙(Taxonomy of WAI-ARIA States and Properties)에 더 많은 내용이 있으니 참고바란다. 예제들은 ARIA를 지원하는 스크린리더(Korean JAWS for Windows (한글용; 유료), [...]

KWAG 12번째 모임 발표자료 WAI-ARIA in Real World(on slideshare.net)입니다. 첫 발표라 긴장되고 어색했다는 느낌이 드네요. 죄송해요. ㅠ_ㅠ 발표에서 빼먹었던 내용들 이렇게 큰 모임에서의 발표는 처음이었던 관계로 긴장이 되어 준비했던 것들을 다 전달해드리지 못했습니다. 아쉬운 마음 글로나마 보충해봅니다. 참가하셨던 분들 중에 몇 분이나 보실지는 모르겠지만 도움이 되셨으면 좋겠네요. 브라우저별 ARIA 지원표에서… 프리젠테이션 10번 슬라이드의 내용입니다. 브라우저별 [...]

dynaTrace는 웹 페이지의 서버 실행 시간, 페이지 렌더링 시간은 물론 자바스크립트 한 줄의 걸린시간까지 볼 수 있는 툴이다. 얼마전 자바스크립트의 실행속도 때문에 시름시름 앓다가 지인의 소개로 이 툴을 알게 된 후로 그런 고민들이 싹 사라졌다. 자바스크립트 속도 때문에 골치를 앓고 있는 이라면 당장 설치하길… 암튼 좀 짱임.

찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. 아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다. <div id="a"> <div class="content">…</div> </div> <div id="b"> <div class="content">…</div> </div> 그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 [...]

단어를 드래그, 더블클릭 등으로 선택하면 선택된 단어를 번역하여 보여주는 북마클릿, 이름하여 inline translator를 만들었습니다. 개인적으로 영문서 읽기 성공률을 올려보고자 만들었는데 생각보다 쓸만한 것 같아 공유해봅니다. :) Google AJAX Language API를 사용하였고 API 지원하는 모든 언어가 번역되어 보여집니다. Google 번역 API가 12월 1일부로 폐기된 관계로 Microsoft Translation API로 번역 API가 변경되었습니다. 아래의 링크를 북마크에 추가하신 후 [...]

접근성을 해치지 않는 자바스크립트의 사용 신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 [...]

요즘 웹에서 벡터 그래픽을 표현하는 방법에 대한 관심이 생겨 canvas, SVG, VML 등을 살펴보고 있습니다. SVG라는 표준이 있고 HTML5에는 canvas 요소가 기본적으로 들어가는데 일단 IE 때문에 표준으로 짜자잔이라던지 CSS background로 벡터 그래픽을 사용한다던지 하는 신나는 일은 나~중에나 될 것 같습니다만 자바스크립트를 통해 IR처럼 구현하는 건 가능할 것 같습니다. 컨텐츠를 HTML로 기본적으로 마크업한 뒤 자바스크립트로 갈아치우는거죠. [...]

우연히 Acid Test Results on Popular Browsers라는 글을 보게 되었는데 최신 브라우저들의 Acid3 테스트의 점수를 볼 수 있었다. 놀라운 것은 파이어폭스3 베타의 점수였다. 베타 2는 55점, 베타 3는 59점을 기록한 것이다. 호기심에 베타 4를 테스트 해보니 무려 67점을 기록하였다. IE8은 Acid2 테스트를 통과하였다. 그러나 Acid3 테스트에서는 겨우 17점이라는 초라한 성적표를 보여주었다. 파이어폭스3 베타가 각 버전마다 [...]

최근 IE8이 Acid2 테스트를 통과했다고 해서 웹 표준 진영이 크게 고무된 바 있다. 그런데 HTML5의 리더인 이안 힉슨(Ian Hickson)이 또 웹 브라우저 제작자에게 또 시련을 주려나 보다. 바로 Acid3 테스트이다. < p class=”attach-image”> Acid3을 100% 통과한 웹 브라우저의 화면 스크린샷 Ian Hickson has been working hard on the acid3 test. The new test will focus [...]

Miya Validator에 몇가지 기능을 추가하여 0.2 버전을 공식배포합니다. 변경 사항 MiyaValidator 클래스의 add 함수와 addGroup 함수의 리턴값이 변경되었습니다. 특별히 폼 유효성 검사 외에 다른 작업을 하지 않으셨다면 사용상 변화된 점은 없습니다. add 함수의 리턴값 MiyaCondition의 instance에서 MiyaValidator의 conditions 변수의 해당 index값으로 변경 addGroup 함수의 리턴값 MiyaGroupCondition의 instance에서 MiyaValidator의 groupConditions 변수의 해당 index값으로 변경 추가 기능 [...]

겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다. 웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. [...]

요즈음 웹이 데스크탑 어플리케이션을 흉내내기 시작하다가 어느샌가 데스크탑 어플리케이션의 한계를 뛰어넘은 모습을 자주 보게 된다. 2005년 구글 맵스에 열광하던 시절은 추억거리가 되었고, 2007년 현재에는 다양한 양질의 웹어플리케이션이 우열을 다투고 있다. 오늘 소개할 QOOXDOO는 쉬운 웹어플리케이션 제작을 위한 자바스크립트 프레임워크의 하나이다. Java의 Interface와 Ruby의 Mixin 개념을 도입한 OO 방식의 프레임워크인 QOOXDOO는 또한 기본적인 UI를 자체 제공하며 [...]

X-Ray :: for web developers v0.91a 웹 개발 간 브라우저의 어떤 개체(element)의 상세정보를 알고 싶다면 X-Ray를 이용 해 보자. 단순히 북마크에 X-Ray 스크립트를 넣고 원하는 페이지에서 북마크를 호출하여 주는 것만으로 준비는 끝이다! < p>X-Ray (북마크 해 주세요!) XRAY라는 타이틀을 가진 조그마한 레이어가 나타난다. 이제 상세정보를 알고 싶은 어떤 개체(element)를 클릭하면, id, class, position, border, margin, [...]

페이징 기능을 포함한 게시물 리스트 화면이나 Breadcrumb 구조 등 다수의 공통적인 파라미터를 가지고 다녀야 하는 경우가 있다. 이 경우에 쓰이는 방법이 여러가지가 있는데 일반적으로 서버 사이드 스크립트를 통해 공통적인 파라미터를 묶어서 여러 개의 관련 링크에서 일관적으로 적용하도록 하는 방법이다. 그런데 다음과 같은 HTML 코드를 만들어내는 경우가 있다. (common1~3을 공통적인 파라미터라고 가정한 게시물 보기 화면) Breadcrumb [...]

1k DHTML API – document를 handling하는 여러가지 경우에 수에 대한 API를 제공한다. 종류로는… element 얻기 – gE element 보이고 숨기기(table 기반 레이아웃에는 적합하지 않다..) – sE, hE z-index style 지정 – sZ element의 left position set – sX element의 top position set – sY element의 가로길이 set – sW element의 세로길이position set – sH clip [...]

우리는 흔히 <script type="text/javascript"> 안의 내용을 다 자바스크립트(이하 JS)라고 생각한다. Document Object Model(이하 DOM)이라는 말 자체가 생소하게 느껴진다는 것이다. 어떤게 JS고 DOM인게 무슨 소용인가? 아니다. 활성화된 커뮤니티에서 문제를 해결할 수도 있겠지만, 그렇지 못할 때에는 매뉴얼을 보아야한다. 에러가 난 부분이 JS인지 DOM인지 알아야 매뉴얼을 찾아볼 수 있지 않겠는가? 분류는 쉽다! html element를 가리키면 DOM이고 아니면 JS다. [...]

JavaScript/DOM은 웹이라는 녀석에 기본적으로 포함되는 것이 아니다. 이 말인즉슨, 포함이 안될 경우도 있다는 것이다. 따라서, JavaScript/DOM 사용에 있어서, 포함이 안될 경우에는 어떻게 될것인가에 대한 고찰이 필요하다. 이렇게 얘기해서는 너무 복잡하게 생각될 수도 있겠다. 예를 한번 들어보자. 버튼을 누르면 폼을 서브밋하고 싶다.. 는 예를 들어보겠다. 편의상 일부 필수 태그는 누락시킨 점.. 이해해주시길.. :) <html> <head> <script [...]