겨미♡웹

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

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

페이징 기능을 포함한 게시물 리스트 화면이나 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 이벤트를..

"파일을 원하는 갯수만큼 올릴 수 있는 폼으로 구성해주세요!" 웹을 업으로 하는 사람이라면 이 말 싫어하는 사람 참 많을게다. 몇 개의 파일 입력 상자를 고정해놓는다면 모를까? 입력 상자의 갯수를 동적으로 해달라는 요구는 그 처리의 귀찮음에 혀를 내두르지 않는 사람이 드물것이다. 귀찮고 오류가 일어날 소지가 많은 부분이다 보니, 관련 자바스크립트 라이브러리 라든지 Flash를 이용한 경우 라든지 심지어 ActiveX를 사용하는 경우(너무 많아서;;)까지 관련 라이브러리나 기술이 많이 생기게 되었다. 요즘은 오히려 훌륭한 공개 라이브러리가 많아서 - AJAX로 Progress Bar까지 구현해주는 라이브러리도 있다. - 불편함이 없다고 얘기해도 무방한 정도다. 하지만 HTML5는 자바스크립트라든지 외부 기..

요즘 HTML5에 흥미가 생겨서 보고 있는데, 그 중에 Web Form 2.0에서 재미있는 내용들이 많이 있어서 정리해보고자 합니다. 앞으로 간간히 재미있는 내용을 정리해놓을 생각입니다. 많이 봐주세요! ^^ HTML5에 대해 더 알고 싶으면 channy님의 포스팅이나 WHATWG HTML5 spec을 방문해보세요! 오늘 소개 할 내용은 form attribute 입니다. 폼을 사용하면서 불가피하게 자바스크립트를 쓸 수 밖에 없는 경우가 꽤 있습니다. 예를 들어, 서브밋 버튼을 여러개 두어 action을 여러군데로 하는 경우라든지, 받은 편지함을 HTML화 할 때 여러 편지를 선택하여 삭제 혹은 이동하는 경우라든지 하는 경우가 자바스크립트나 DOM 스크립트 없이 HTML만으로는 폼을 완전히 구성할 수 없..