한국 웹 사이트들이 거대 인트라넷이 된 것이나 웹 표준 관련 기술들의 발전이 실무자들에게는 그냥 남 얘기인 것은 솔직히 말해서 IE 잘못이 아니다. 그냥 구버전 브라우저일 뿐인 IE6 잘못도 아니다. MS 잘못이다. IE6을 사용하는 사람들에게 캠페인을 할 게 아니라 MS를 들들 볶아야 한다. 아, 제발… 서비스팩도 좋고 뭐도 좋으니… IE7로 자동 업그레이드 좀 시켜주소. 지금 안되고 [...]

CDK에서 주최하고 2008년 5월 1일부터 2008년 6월 1일까지 진행된 웹 표준 경진대회에 참석했습니다. 감사하게도 금상을 수상했음에도 불구하고 후기가 좀 늦었네요. 좀 게을러서 정리를 못하고 있다가 이제서야 정리해봅니다. 죄송합니다. ㅠ_ㅠ 대회에는 제가 참여하고 있는 하코사 강남스터디에서 3개의 조로 나누어 그 안에서 비티님과 한 조로 참석하였습니다. 웹 표준에 많은 관심을 가진 디자이너이신 아트강님도 함께 참여하려고 했는데 개인적인 [...]

2008년 7월 5일 하드코딩을 하는 사람들 웹 표준 스터디 소모임간의 연합 스터디 시 발표한 자료입니다. | View | Upload your own IE6의 역사 Windows와 함께 버전 업. Windows 98과 함께 IE5가 거의 쓰이지 않게 됨. Windows XP가 쓰이지 않게 되는 시점에 IE6에 대한 지원을 없애게 될 것 Windows 7의 기본 탑재 브라우저에 귀추가 주목됨 웹 [...]

지난 번에 Multiple Backgrounds에 대해 알아보았는데 이에 이어 오늘은 Web Fonts에 대해 써보겠습니다. Web Fonts 간략한 배경 웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 현재 CSS3의 한 부분이 되었습니다. 진행상황 오페라의 CTO인 [...]

웹 퍼블리셔 일을 하면서 가장 짜증나고 마음 아픈 작업이 디자인을 위해 의미 없는 마크업을 넣는 것과 텍스트를 대체한 이미지를 자르고 <img> 태그를 붙이는 일입니다. 어느 웹 퍼블리셔든지 시맨틱한 마크업을 만들고 싶은 마음이 간절하지만 앞서 언급한 문제들로 인해 마크업은 복잡해지고 지저분해집니다. 이미 W3C는 이 문제를 해결할 표준을 만들었는데 그것이 Multiple Backgrounds와 Web Fonts입니다. Multiple Backgrounds 라운딩된 [...]

우연히 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 [...]

스스로 웹 표준을 하는 이유에 대해 좀 정리할 필요를 느껴 간단히 적어 보았습니다. 남들이 하니까… 우스갯소리처럼 들리겠지만 사실 그렇지 않다. 어떤 일을 시작하는데 그런 일을 하는 다른 사람들이 모두 A라는 방식으로 일을 한다면 당연히 A로 하는 게 맞지 않는가? B라는 대안을 스스로 찾는다면 그것은 A를 충분히 이해하고 있을 때의 이야기이다. 아직 웹 표준에 대한 이해가 [...]

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 최종 초안 [...]

지난 수요일 시작된 email standard project과 관련하여 국내 유명 웹메일 CSS 지원 테스트를 올렸었는데 그새 다음(daum)의 CSS 지원의 향상이 있었다. 지금 막 확인한 사항이지만 테스트 시 지원하지 않거나 불완전하였던 background-image와 list-type-image의 지원이 추가되었다. 메일 컨텐츠 중 어떤 태크나 ID 값에 “x-” 라는 prefix를 붙였었는데 그 대상을 크게 줄인 결과인 것 같다(확인한 바로는 meta 태그에만 붙이는 [...]

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

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

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> 태그를 이용하여 서브밋 버튼을 추가하면 되지 않느냐? 그것은 반쪽짜리 [...]

보도자료: 2012년까지 장애인 13만여명에 IT보조기기 보급 이밖에 장애인이 공공부분의 인터넷 사이트를 손쉽게 이용할 수 있도록 `웹 접근성 준수’를 제도화하기 위해 올해안에 웹 접근성 국가표준을 개정하기로 했으며 공공기관은 물론 민간기관들의 참여를 이끌어내기 위해 `웹 접근성 품질 마크’를 적극적으로 부여하기로 했다. 정부 차원에서 장애인들의 IT 활용 활성화를 추진하고 있다는 기사가 났다. 웹 접근성에 대해 국가 차원의 관심과 [...]

자 이제 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 [...]