한국 정보문화진흥원 사이트에 landmark roles를 적용한다면? Landmark roles는 정적인 웹 페이지에 책갈피를 달아놓은 것이라고 설명할 수 있다. 이는 HTML을 스타일링하지 않아도 어느 부분이 메인 컨텐츠 영역인지 사이드바(부가 정보) 영역인지 메인 메뉴(내비게이션) 영역인지 명확하게 구분하도록 해준다. Landmark roles는 현재 다음의 8종류가 있다. application: 웹 응용 프로그램에 선언한다. 여기서 웹 응용 프로그램이란 GMail, SVG와 같은 정적인 웹 [...]

http://example.com/page.html, http://example.com/page.html?param1=1, http://www.example.com/page.html 등 한 문서를 가리키는 여러 URL은 검색엔진에 심각한 중복 문제를 안겨줍니다. 최근 구글, 야후, 마이크로소프트가 이를 해결할 수 있는 방법을 제시하였습니다. <link rel="canonical" href="http://example.com/page.html" /> 위의 코드를 넣어주면 끝입니다. 간단하죠? 단어 그대로 표준 혹은 대표 링크를 선언해주는 것입니다. 이미 많은 발표자료, 동영상 등이 공개되어 있네요. 보시죠~ 참고로 첫 링크만 보시면 정리가 다 [...]

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

TextMate의 강력한 기능 중 하나인 HTML의 Wrap Selection, Wrap Selection Each Line 기능을 Aptana에 추가하는 방법을 소개한다. 기능 소개 Wrap Selection, Wrap Selection Each Line은 리스트 마크업 – <ul>, <ol> – 을 작성할 수 있게 해주는 TextMate의 기능이다. 텍스트를 복사해넣은 후 각 줄의 시작과 끝에 <li> 태그를 넣는 수고를 크게 덜어주는 편리한 기능이다. Aptana에 기능 [...]

현 시대의 CSS로는 마크업의 무결성을 보장하면서 원하는 표현을 충분히 할 수 없다. 그 대표적인 예가 폰트와 배경이미지이다. 그 중에서도 폰트와 같은 경우는 기본 텍스트만으로는 원하는 결과물을 얻기가 힘들다. 이럴 때 우리가 가장 많이 사용하는 방식이 <img> 태그 혹은 이미지 대치법(Image Replacement)이다. 정보를 꾸며주기 위한 <img> 태그 <img> 태그는 사전적으로는 정보를 지닌 – 의미 있는 – [...]

여러 개의 제출 버튼을 가진 폼의 접근성에 대하여 이야기를 하였었는데 결론은 <input> 태그가 제한적이나마 사용될 수 있다는 것이었다. 좀 더 풍부한 표현이 가능한 <button> 태그가 IE에서 버그를 가지고 있는 관계로 사용할 수 없다고 하였었는데 그게 어느정도 가능할 수 있다는 결론을 얻었다. 자바스크립트를 통한 IE의 <button> 태그 버그 극복 <button> 태그가 IE에서만 문제가 되고 있고 IE는 [...]

오늘 WHATWG Wiki에서 흥미로운 내용을 접했다. W3C의 HTML5 스케줄은 신뢰할 수 없으며 2022년이나 그 이후에나 W3C의 권고안이 될 것 같다는 내용이다. It is estimated, again by the editor, that HTML5 will reach a W3C recommendation in the year 2022 or later. This will be approximately 18-20 years of development, since beginning in mid-2004. That’s actually [...]

HTML5의 2010년말까지의 일정이 W3C HTML Working Group 페이지에 공개되어 있습니다. 이하 공개되어 있는 일정입니다. 자세한 사항은 HTML Working Group Charter에서도 확인 가능합니다. 2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review 2007-11 HTML Design Principles First Public Working Draft 2008-03 HTML5 공개 초안 초판 (First Public Working Draft) 2008-06 HTML5 최종 초안 [...]

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

웹 사이트 개발을 하다보면 하나의 폼에 여러 개의 제출 버튼을 써야하는 경우가 있다. 그 경우 자바스크립트를 사용하지 않고 원하는 기능을 구현하려면 어떻게 해야할까? IE의 버그로 인해 여러 방법 중 대부분이 사용이 어렵지만 submit 타입의 input 태그를 여러 개 넣어서 폼을 구성하면 버그 없고 자바스크립트 의존적이지 않은 결과물을 만들 수 있다. 그럼 실제로 각 글에 체크박스가 [...]

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

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

(그림1. 전송 버튼이 적용되지 않은 select 태그) 그림1은 현재 게시판의 분류나 바로가기 메뉴 등에서 선택 시 바로 폼을 전송시키거나 자바스크립트를 이용하여 페이지 전환을 하는 용도로 쓰이고 있다. 그러나 키보드 사용자나 자바스크립트를 사용할 수 없는 사용자를 고려하였을 때 위와 같은 사용은 불가하다. 자바스크립트가 불가능한 사용자를 위해 <noscript> 태그를 이용하여 서브밋 버튼을 추가하면 되지 않느냐? 그것은 반쪽짜리 [...]

자 이제 CSS를 입혀보자. 일단 전역설정이다. 이 작업은 브라우저마다의 차이를 극소화하고, 사용할 tag의 기본적인 속성을 부여하는 작업이다. 갖가지 태그의 padding과 margin을 0으로 지정! tag마다 기본적으로 padding과 margin값이 틀리다. 쉬운 디자인 작업을 위한 설정이기도 하다. 가로줄(hr tag)은 디자인에서 (대개) 불필요하므로 보이지 않도록 처리한다. hr tag를 생략할수도 있겠지만, 디자인이 배제된 페이지에서의 head, body, foot의 구분을 위한 용도로 [...]

XHTML 1.0 Strict에는 a tag에 target attribute가 없다. 동작이야 하지만, validator에서 에러를 봐야한다. 단순히 새 창을 띄울 때 다음과 같은 방법이 아주 유용하다. <a href="http://tenshi.pe.kr/" onclick="window.open(this.href); return false;">tenshi.pe.kr</a> 자바스크립트 parser가 없는 경우는 대개 text 브라우저 같은 녀석들이니 상황에 따른 새 창 혹은 자기자신의 선택이 되는 장점도 아울러 가질 수 있다! modified at 2005-03-17 16:10:20 – [...]

자! 지난 글에서도 언급했듯 실제로 사이트에 있을만한 페이지를 한번 작성해보자! 일단 첫번째로는! 페이지의 재료가 필요하다. 로고라든지, 메뉴, 페이지의 내용, 카피라이트 등. 타이틀 멋져부러 뉴스 서브타이틀 div 레이아웃 첫번째 페이지! —- 메뉴 home 뉴스 방명록 링크 —- 뉴스 박지성, 에인트호벤과 계약연장 합의 네덜란드 프로축구에서 활약하는 박지성(24.에인트호벤)이 소속팀에 3년 더 남을 전망이다. PSV 에인트호벤은 내년 시즌을 끝으로 [...]

자! 이제 본격적인 공략…에 앞서 한가지만 더 짚고 넘어가자. 바로 html 문서의 형식을 결정하여 주는 DTD(Document Type Definitions)라는 녀석! W3C(World Wide Web Consortium)에서는 여러가지 버전별 html 표준 규약을 제공하고 있는데, DTD는 그 여러가지 버전중에 한가지 규약을 사용하겠다 하는 선언이다. 우리의 공략의 표준 규약으로 사용할 html의 버전은 XHTML 1.0으로 해당 DTD들은 XHTML1 DTDs에서 볼 수 있다. [...]

HTML 코딩, 우리는 여지껏 열심히 table tag(이하 table) 안에 또 table을, 또 table을 넣어가며 코딩을 해왔다. "td tag(이하 td)를 하나 안닫았다!" "table 10단 콤보에 들여쓰기를 하려니 온통 공백밖에 없다 OTL" 그렇게 table 중첩 코딩을 하면서 위와같은 문제를 많이 겪었으리라 싶다. 이제 저런 문제들을 좀 벗어나보자, 바로 div+css 레이아웃(이하 div 레이아웃)으로! 그냥 위와 같은 문제들만이라면 div [...]