겨미♡웹

miya.pe.kr로 블로그를 옮깁니다. 본 블로그에 게시했던 글들은 계속 유지되며 앞으로는 miya.pe.kr에 포스팅 하겠습니다.

DOM Script의 저자 제레미 키스(Jeremy Keith)가 쓴 방탄 Ajax가 출간되었습니다. DOM Script에서 올바른 DOM, 겸손한(unobtrusive) 자바스크립트에 관한 이야기를 했다면 이번엔 올바른 Ajax의 활용, 접근성을 확보하는 Ajax 개발론, 즉 겸손한(unobtrusive) Ajax에 대해 이야기하고 있습니다. 이 책에서의 Ajax는 Asynchronous JavaScript and XML가 아닌 미국과 영국 등에서 과거에 쓰였던 Ajax라는 단어의 뜻으로서 정의하고 있습니다. 쉽게 말해 Flex, Silverlight 등의 RIA을 포괄하는 의미라는 것입니다. 모든 웹 사이트, 웹 어플리케이션의 기본은 문서이다. 라고 이야기하는 이 책에서는 기본적인 문서((X)HTML..

웹 사이트 개발을 하다보면 하나의 폼에 여러 개의 제출 버튼을 써야하는 경우가 있다. 그 경우 자바스크립트를 사용하지 않고 원하는 기능을 구현하려면 어떻게 해야할까? IE의 버그로 인해 여러 방법 중 대부분이 사용이 어렵지만 submit 타입의 input 태그를 여러 개 넣어서 폼을 구성하면 버그 없고 자바스크립트 의존적이지 않은 결과물을 만들 수 있다. 그럼 실제로 각 글에 체크박스가 있어서 체크 후 삭제 혹은 이동하는 기능이 있는 게시판 목록을 만들어보자. 결과물은 다음의 그림과 같을 것이다. 그림을 보고 HTML 페이지를 만들어보자. 여러개의 폼 제출 버튼 예제 선택 제목 작성자 작성일 조회수 게시판 제목1 아무개 2007년 10월 13일 4 게시판 제목2 아무개 2007년 10월 13일 4 게시판..

출처: Methisto: HTML5 trailer - Find your Hero HTML5의 등장의 예고편이라고 할까요? 웹의 90%를 지배하고 있다는 그의 정체 부분이 압권입니다. ㅎㅎ 2010년 12월... 더 늦지 않았으면 좋겠군요! :)

요즈음 웹이 데스크탑 어플리케이션을 흉내내기 시작하다가 어느샌가 데스크탑 어플리케이션의 한계를 뛰어넘은 모습을 자주 보게 된다. 2005년 구글 맵스에 열광하던 시절은 추억거리가 되었고, 2007년 현재에는 다양한 양질의 웹어플리케이션이 우열을 다투고 있다. 오늘 소개할 QOOXDOO는 쉬운 웹어플리케이션 제작을 위한 자바스크립트 프레임워크의 하나이다. Java의 Interface와 Ruby의 Mixin 개념을 도입한 OO 방식의 프레임워크인 QOOXDOO는 또한 기본적인 UI를 자체 제공하며 관련 아이콘들이 SDK에 포함되어 있다. 한글로 된 QOOXDOO에 관한 정보가 거의 없는 관계로 개발에 조금은 어려움이 있지만, 앞으로 중·소 사이트 제작 간 관리자 툴로서 활용할 목적으로 여러 프레임워크 중 Q..

XRAY :: for web developers v0.91a 웹 개발 간 브라우저의 어떤 개체(element)의 상세정보를 알고 싶다면 XRAY를 이용 해 보자. 단순히 북마크에 XRAY 스크립트를 넣고 원하는 페이지에서 북마크를 호출하여 주는 것만으로 준비는 끝이다! XRAY (북마크 해 주세요!) XRAY라는 타이틀을 가진 조그마한 레이어가 나타난다. 이제 상세정보를 알고 싶은 어떤 개체(element)를 클릭하면, id, class, position, border, margin, padding 등의 정보를 얻을 수 있다. 그리고 개체(element)가 속한 HTML의 구조가 표시되는데 부모 개체(element) 태그명을 클릭하면 해당 상세정보를 얻을 수 있다. XRAY를 끄고 싶다면 x 버튼을 클릭..

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

Lachlan Hunt가 2007년 8월 3일에 공개한 "HTML5를 통한 개발(Developing with HTML5)" 슬라이드 입니다. 간단히 번역을 했는데 오역이나 의역은 원문을 참조하여 이해해 주셨으면 좋겠습니다. 관련 링크 - WHATWG (Web Hypertext Application Technology Working Group) - Lachlan Hunt 인터뷰

그림1은 현재 게시판의 분류나 바로가기 메뉴 등에서 선택 시 바로 폼을 전송시키거나 자바스크립트를 이용하여 페이지 전환을 하는 용도로 쓰이고 있다. 그러나 키보드 사용자나 자바스크립트를 사용할 수 없는 사용자를 고려하였을 때 위와 같은 사용은 불가하다. 자바스크립트가 불가능한 사용자를 위해 태그를 이용하여 서브밋 버튼을 추가하면 되지 않느냐? 그것은 반쪽짜리 접근성이다. 마우스 기능을 사용할 수 없는 사용자의 접근성이 상당히 저하되기 때문이다. 키보드 사용자는 select 태그의 목록을 활성화 시킨 후 아래 방향키를 한 번 누르는 순간 select 태그의 자바스크립트가 활성화되어 마치 목록 두 번째 요소를 선택한 듯한 결과를 보게 될 것이다. 전송 버튼을 넣고 select 태그의 onchange 이벤트를..

2012년까지 장애인 13만여명에 IT보조기기 보급 이밖에 장애인이 공공부분의 인터넷 사이트를 손쉽게 이용할 수 있도록 `웹 접근성 준수'를 제도화하기 위해 올해안에 웹 접근성 국가표준을 개정하기로 했으며 공공기관은 물론 민간기관들의 참여를 이끌어내기 위해 `웹 접근성 품질 마크'를 적극적으로 부여하기로 했다. 정부 차원에서 장애인들의 IT 활용 활성화를 추진하고 있다는 기사가 났다. 웹 접근성에 대해 국가 차원의 관심과 필요성이 더욱 늘어나게 되었다는 이야기이다. 좋던 싫던 관심이 있던 없던 웹 표준과 접근성은 점점 피할 수 없는 필수요소가 되어가고 있다. 장애인의 인터넷 접근 장치는 점점 늘어가는데 정보를 얻는 통로인 웹사이트가 그들을 소외시킨다면 정부의 이런 정책은 아무런 의미가 없을 것이다. 기사..