마크업 개발, 어떤툴들을 사용하시나요? View more presentations from mctenshi

CSS Zen Garden 웹 폰트 버전, 잘 나와요! ㅋ 오페라10 알파 버전이 공개되었습니다. 다양한 기능과 속도 향상과 더불어 웹 폰트도 지원하는군요. 파이어폭스 3.1도 웹 폰트를 지원하니 이제 모든 주요 브라우저(IE와 사파리 포함)가 웹 폰트를 지원하게 되었네요. EOT냐 TTF냐 하는 이슈가 있긴 합니다만, Ajax 등장시절 구글 지도가 그랬던 것처럼 Best Case가 나오면 붐이 일 수도 있지 [...]

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

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

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의 기본 탑재 브라우저에 귀추가 주목됨 웹 [...]

파이어폭스 3의 공개가 6월 17일로 확정되고 다운로드 수 기네스에 도전하고 있다. 주소 표시줄 자동완성 기능, 페이지 줌 기능 등 막강한 사용자 편의 기능으로 무장하고 있는 파이어폭스 3이지만, CSS 지원 향상은 사파리, 오페라와 비교해보았을 때 조금 부족한 느낌이 강하게 들었다. 그런데 파이어폭스 3.1은 그런 실망감을 꽤 삭혀줄 것 같다. 파이어폭스 3.1의 CSS 지원 2008년 안에 출시될 [...]

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

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

CSS의 세로 중앙 정렬은 display: table-cell;이라는 간단한 방법으로 해결할 수 있습니다만, 글을 쓰는 현재 가장 많이 사용되는 브라우저인 IE가 이것을 지원하지 않기 때문에 항상 까다로운 문제였습니다. (IE8 – 베타 (8.0.6001) 버전 – 은 지원하는 것 같지만 아직 버그가 있는 듯 합니다.) 많은 꼼수가 있지만 사용에 많은 제약이 있었죠. 그런데 yomotsu라는 일본인이 간단하면서도 명쾌한 아이디어를 내놓았습니다. [...]

웹 퍼블리셔 일을 하면서 가장 짜증나고 마음 아픈 작업이 디자인을 위해 의미 없는 마크업을 넣는 것과 텍스트를 대체한 이미지를 자르고 <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 베타가 각 버전마다 [...]

Conditional selector depends on child nodes ul(a:hover) {property:value;} Code means select ul element that contains a element with hover statement. Example <style type="text/css"> ul { background-color: #999; } ul a:link { color: blue; } ul a:hover { color: red; } </style> <ul> <li><a href="/products">products</a> <li><a href="/store">store</a> <li><a href="/products">blog</a> <li><a href="/support">support</a> <li><a href="/community">community</a> </ul> This code [...]

CSS Working Group의 블로그에 CSS의 박스 모델의 중앙 정렬 문제라는 글이 올랐습니다. Unfortunately, when we revised CSS level 2, we discovered that many browsers imposed a limit on what could be centered. In particular, centering something that was wider than its containing block didn’t work. The reason, probably, was that the browsers’ scrollbars were programmed [...]

최근 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 [...]

여러 개의 제출 버튼을 가진 폼의 접근성에 대하여 이야기를 하였었는데 결론은 <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 [...]

스스로 웹 표준을 하는 이유에 대해 좀 정리할 필요를 느껴 간단히 적어 보았습니다. 남들이 하니까… 우스갯소리처럼 들리겠지만 사실 그렇지 않다. 어떤 일을 시작하는데 그런 일을 하는 다른 사람들이 모두 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 태그에만 붙이는 [...]