2010/1-2주차 클리어보스 소식

2010년 첫번째 클리어보스 소식입니다.

최근에는 어떤 주제를 던져놓고, 투표(설문)와 의견 나눔을 통해서 글을 이끌어 가보고자 하고 있습니다. 개인 블로그에 쓰듯 단지 저만의 생각과 주장을 적다 보면, 다른 분들의 생각을 충분하게 공유하지 못하는 한계가 있었던것 같아서 이런 방법을 연습해 보고 있습니다. 클리어보스는 저 '개인'만의 공간이 아닌만큼 다양한 주제와 참여를 이끄는 공간으로 만들어볼까 합니다. 그래서 2010년 첫주와 둘째주에는 투표를 통한 설문글이 많았습니다.

주소를 address 요소로 마크업하지 말라?

- HTML5Doctor 에 올라온 글을 번역한 것입니다. address 요소를 적절하게 마크업하는 것에 대해서 고민할 기회를 주기에 번역해서 올려봤습니다.

FAQ의 의미 있는 마크업은?
- FAQ는 일반적인 웹 사이트 제작시 자주 등장하는 콘텐츠입니다. 대부분 DL 요소를 많이 사용하는데, DL 이외의 방법은 없는지 있다면 다른 사람들은 어떤 마크업을 사용하고 있는지에 대한 설문입니다. 현재 진행중입니다. 많은 참여 부탁드립니다.

웹 타이포그래피
- 오페라 웹표준 강좌중 11번째 내용입니다. 웹에서 사용되는 글꼴에 대한 주제로 웹 디자이너 분들께 특히 추천드리는 내용입니다.

어떤 직함이 좋은가?
웹퍼블리셔, UI개발자, 마크업 개발자 등 다양한 이름에 대한 선호도 조사입니다. 1월 2일 현재까지 결과는 UI개발자가 40%로 가장 많은 분들이 선호하고 있음을 알 수 있었습니다. 설문은 당분간 계속할 예정이니 아직 참여하지 않으신 분들은 한 번씩 선택해 주시고, 의견도 남겨주세요.

웹 퍼블리셔의 작업중 가장 오래 걸리는 것은?
- 역시 설문조사입니다. 마크업과 스타일시트, 자바스크립트 등 실무에서 가장 작업 시간이 긴 직무를 선택하는 설문입니다. 대체로 비슷한 결과를 보이고 있습니다. 역시 당분간 계속됩니다.

웹 퍼블리셔세요?

클리어보스에서는 지난해 2월과 9월 경력이 1년이 못되는 서른명 정도의 분들을 모시고 '웹 퍼블리셔 오리엔테이션'이라는 자리를 가졌었습니다. 그리고 여름과 겨울에 가볍게 오프라인 모임을 갖기도 했었구요. 그 외에도 몇 차례 술자를 통해서 인사를 나눴던 분들도 계셨습니다.

첫 인사를 나누고 나면 으레 디자인을 하시는지 개발을 하시는지 업무를 묻곤 하게 되는데요. 아무래도 자리가 자리이니 만큼 짐짓 '웹 퍼블리셔'이겠지 하면서 "웹 퍼블리셔세요?"라고 질문을 해 봅니다. 그런데 의외로 적지 않은 분들이 머뭇거리시면서 "그게요... 아직은..."이라는 식으로 말 끝을 흐리곤 하시더라구요.

왜 그러셨을까요? 조금 더 이야기를 나누다 보면 저와 하는 일이 거의 같았습니다. HTML과 CSS를 주로 다루고, 자바스크립트를 너무 어려워 하지만 조금씩 공부하면서 적용해 가고 있다구요. 그럼 저는 "아 그럼 웹 퍼블리셔네요~"라면서 "왜 어려워하세요?"라고 되 묻곤 합니다.

그 분들은 웹 퍼블리셔라는 이름에 대한 부담을 갖고 계셨어요. 그리 먼 과거도 아닌 불과 몇 해 전까지만 해도 우리들 같은 사람들을 주로 HTML 코더라고 불려졌고, 그렇게 알아 왔습니다. 하지만 신현석님께서 보다 넓고, 깊은 의미로 직업적인 사명감과 자부심을 갖고자 '웹 퍼블리셔'라는 이름을 제안하셨습니다. 그리고 여러 사람들이 호응을 했고, 지금은 적잖은 곳에서 '웹 퍼블리셔'라는 직함을 사용하고 있지요. 그런데 비슷한 일을 하는데 어떤 회사는 'UI개발자' 누구는 '마크업 개발자' 어디는 계속 '코더'라고 불리고 있다 보니 혼란스러워들 하시더라구요.

웹 퍼블리셔라는 이름은 버겁고, UI개발자나 마크업 개발자, 프론트 앤드 개발자... 같은 여러 이름은 자신의 정체성을 더욱 모호하게 만드는 것 같고... 그렇지 않나 생각해 봅니다.

일단, 왜 '웹 퍼블리셔'라는 이름이 버겁다고 느껴질까요? 제 짧은 생각으로는 직함이 요구하는 전문성의 범위가 생각보다 넓기 때문입니다. HTML을 단지 기계적으로 작성하는 것이 아니라 논리적으로 판단하고, 의미 있게 작성할 수 있어야 하고, 표준에 맞도록 마크업 해야 한다는 것. 물론 CSS도 경제적이고 효율적으로 작성하고, 브라우저간 상호 운용성을 확보할 수 있어야겠죠. 핵은 지양하면서 말이죠. 거기에 웹 접근성 향상을 위한 심리적 부담감과 쉽지 않은 법률과 가이드라인. 거기에 단기간에 상승된 회사내의 입지. 웹 표준과 웹 접근성 이슈는 모두 '우리'에게 전담되어버린 듯 한 상황은 어지간한 경력자라 하더라도 쉽게 감내하기 어려울 수 있다고 봅니다. 사람마다 차이는 있겠지만 상당한 부담감이 될 수 있을것 같습니다. 그렇다 보니 '나는 아직 웹 퍼블리셔는 아니고, 코더다.'라는 생각을 갖게 되고, 족보 없는 가계도가 그려지곤 합니다. 코더를 하다가 웹 표준 좀 하면 웹 퍼블리셔, 그리고 자바스크립트를 조금 다룰 수 있게 되면 UI개발자. 로 말이지요.

지금 클리어보스에서 'HTML, CSS, JS 등을 주로 다루면서 사용자 화면을 설계하는 당신은 어떤 직함이 가장 좋습니까'라는 간단한(?) 설문조사를 진행하고 있습니다. 한 사흘 정도 진행되었는데 UI개발자가 37명으로 가장 많은 분이 택해 주셨고, 웹 퍼블리셔는 20명이 23%, 프론트 앤드 개발자가 13명으로 15%를 차지했습니다. 전체 결과를 보고 싶으시거나 설문에 참여하고 싶으신 분들은 클리어보스를 찾아주세요.

사실 설문의 결과는 그다지 중요하지 않을 수도 있습니다. 특별히 공신력이 있는 사이트도 설문 조사 방식도 아니니까요. 1위 결과를 모두 함께 사용하자라는 캠페인을 벌일 생각은 아예 없구요. 중요한 건 두가지 정도일 것 같습니다. 하나는 지금 이런 고민을 하는 순간이 과도기적 상황이라는 것이구요. 또 하나는 어떤 이름이 중요한 것이 아니라 스스로 자신의 일을 정의하고, 자부심을 갖느냐하는 점이라고 생각합니다. 최근 몇 년 동안 여러가지 상황들이 빠르게 변하면서 '코더'라는 직군이 급 부상한 상황에서 자리를 잡아가고 있다고 생각하구요. 이것은 앞으로도 몇 년은 더 지나야 조금 더 명확한 직무 범위나 가이드라인이 만들어질 것이라고 생각합니다. 그리고 두번째에 대해서 얼마전에 신현석님도 '웹 퍼블리셔의 업무범위'라는 글을 통해서 적으셨지만 우리들이 어떤 이름으로 불리는건 그렇게 중요한 것이 아닙니다. 첫번째 이유를 들어 시간이 정리를 해 줄 것입니다.(물론 그 시간 동안에 여러 사람들의 자발적인 노력과 행동들도 있을 겁니다.) 스스로 한계를 긋고 울타리를 좁게 만드는 것이 문제지요. 어떤 직군이나 자기계발은 언제나 요구되는 덕목입니다. 개발자나 디자이너, 기획자들 모두 다 그렇게 계속 공부하고, 연습하면서 자신의 직무 범위를 넓히고, 깊게 해 나갑니다. 우리도 그래야 한다는 것이지요. 자바스크립트를 어느 정도까지 해야 하는가를 고민하기 보다 일단 시작하시고 할 수 있을 만큼 계속해서 하시는 것이 좋습니다. HTML, CSS, JS, XML, SEO, 표준, 접근성, 시멘틱, 디자인, 도구, UI, UX... 이렇게 나열된 직무 갯수에 지레 겁먹지 마시길 바랍니다. 저도 위에 나열된 것중 어느것 하나 확실하게 잘 하는 것은 없습니다. 걱정하고 계시는 여러분과 크게 다르지 않은 것이지요. 어제도 HTML 공부를 했고, 오늘도 해야 합니다.

어떻게 보면 이런 논의나 설문 자체가 소모적인 논쟁이고, 답이 나지 않는 것일 수 있습니다. 하지만 고민하지 않고 넘기다 보면 나중에는 자신의 의지와 상관없이 큰 흐름에 그저 쓸려 다니기만 하기 쉽습니다.

나 스스로 고민해 보지 않으면 내 것이 되지 않는다. 그게 제 생각입니다.

HTML 5와 CSS 3로 웹 사이트 만들기 소개

Smashing Magazine에서 Enrique Ramirez 의 글 'Coding A HTML 5 Layout From Scratch'을 통해서 HTML 5 와 CSS 3를 적용한 웹사이트 개발 데모를 소개한 것이 있어 소개해 드립니다.

HTML 5와 CSS 3를 이용해서 만들어진 웹 페이지

데모 디자인을 바탕으로 HTML 5 를 이용해서 마크업을 하고 스타일시트는 CSS 3를 사용하고 있어 이를 공부하고자 하시는 분들에게는 좋은 예제가 될 것 같습니다.

완성된 데모 페이지는 여기에서 보실 수 있습니다.

4월 9일은 CSS Naked Day 입니다.

매년 4월 9일은 웹 사이트의 CSS를 제거하고, 순수하게 HTML 마크업만을 남겨 구조적이고 의미있는 웹을 보여주면서 웹 표준을 장려하는 전세계적인 이벤트입니다.

작년과 제작년 모두 이 이벤트에 참여했던 웹 뒤에 숨은 web 이었지만, 아쉽게도 올해는 현재의 블로그 서비스에서 HTML과 CSS에 대한 수정 권한을 제공하지 않아 CSS를 제거하기가 어려운 상황입니다. 자바스크립트 등을 이용한다면 강제로 벗겨버릴 수도 없지는 않겠으나 그런 편법 자체가 정직하지는 않다라는 판단 때문에 제가 운영하고 있는 또 다른 사이트인 Clearboth의 블로그와 위키, 포럼만 이벤트에 참여시키고, 올해 웹 뒤에 숨은 web은 이렇게 행사를 알리는 글만 포스팅 하도록 하겠습니다.

CSS Naked Day의 한국어 페이지

CSS를 제거한 Clearboth.org

오픈 웹을 지지합니다!

한국의 웹을 아름답게 만들기 위해서 불철주야 애를 쓰고 있는 오픈 웹(Open Web) 을 다들 아시죠?

최근에 고등법원에서 다시 한 번 패소하면서 아쉬움을 남겼지만, 거대한 기업과 정부를 상대로 고전분투하고 있는 오픈 웹의 철학과 실천 의지를 지지한다는 의미에서 클리어보스(Web Standards Evangelist Forum)에서 '오픈 웹을 지지합니다!'라는 배너를 만들어서 배포하고 있습니다.

더 많은 분들이 오픈 웹을 기억해 주시고, 방문해 주셔서 김기창 교수님 외 여러 오픈 웹 지지자분들께 기운을 북돋아 드렸으면 합니다.

오픈 웹 지지 배너

오픈 웹 홈페이지

웹 퍼블리셔들의 놀이터, CSS Playground

CSS Zengarden은 구조적으로 잘 작성된 하나의 HTML 문서에 수 많은 CSS가 결합되어 다양한 디자인을 선 보이는 아주 특별한 사이트입니다. CSS의 기술적인 능력을 뽐냈을 뿐 아니라 예술성까지 느껴지도록 만들어 준 사이트입니다. 그래서 웹 표준을 다루는 거의 모든 책과 세미나에서 젠가든을 언급합니다. 이런 젠가든을 더욱 특별하게 해 주는 이유는 누구에게나 문이 열려 있다는 점일 겁니다. 지금이라도 당장 젠가든의 멋진 마크업 위에 아름다운 디자인을 CSS로 작성하여 올릴 수 있습니다. 하지만 언어적인 장벽 때문일까요? 한국의 훌륭한 웹 퍼블리셔들의 작품은 좀 처럼 찾아볼 수 없었던 것 같습니다.

CSS Playground

그런 안타까움을 느끼셨는지 CSS Design Korea의 홍윤표님께서 아주 멋진 사이트를 하나 만들어 주셨습니다. CSS Playground는 한국의 웹 퍼블리셔나 디자이너, 개발자들이 자유롭게 자신들의 능력을 발휘하여 CSS를 다룰 수 있도록 만들어진 한국의 젠가든입니다.

CSS Playground의 규칙은 다음과 같습니다.

• CSS는 표준 방식에 근거함
• Cross Browsing
• 저작권에 대한 이해와 합법적인 컨텐츠 사용
• FAQ 숙지

디자인시 발생할 수 있는 저작권 문제만 잘 피하신다면 나머지는 표준을 준수하는 CSS작성이 전부입니다. 또한, 제작에 대한 어려움은 CSS Design Korea에서 운영하고 있는 포럼 게시판을 통해서 해결할 수 있습니다.

웹 표준을 시작하는 여러분이라면 한번쯤 멋지게 도전해 볼만하지 않겠습니까?

은행 및 금융기관 사이트 액티브X 없애주세요

최근에 맥북을 한 대 장만해서 잘 쓰고 있습니다. Firefox를 주 브라우저로 웹 서핑도 잘 하고 있습니다. 대부분의 사이트는 무리 없이 잘 사용되고 있는데, 쇼핑몰 사이트와 은행 사이트의 사용이 쉽지가 않습니다. 별 수 없이 그 때만 윈도우를 사용하고 있습니다. 결국은 Active X를 쓸 수 없다는 것이 문제죠.

Active X 와 관련해서는 Open Web의 Active X 외의 대안은 없는가? 와 같은 글과 의견들을 통해서 많은 정보를 얻으실 수 있습니다.

그리고 이번에 다음 아고라에서 은행 및 금융기관의 Active X 사용 중지를 요청하는 서명운동을 실시하고 있네요.

Active X 사용 중지를 요청하는 서명운동

저처럼 웹 관련 직종에 종사하는 사람들 대부분은 이 문제에 대해서 찬성이든 반대이든 나름의 의견을 가지고 있고, 얼마간 정보와 지식 역시도 갖고 있다고 생각합니다. 하지만 문제는 절대 다수인 일반 사용자들입니다. 대부분의 일반 사용자들은 Active X의 설치는 너무나 당연하고 자연스러운 과정이라고 생각하는 듯 합니다. 그것이 불편하다고 느끼면서도 필요하기 때문이라는 생각을 갖는 것이죠. 그리고 그렇게 습관이 되고, 길들여져 버린 것 같습니다.

저처럼 Windows가 아닌 다른 운영체제를 사용하는 사람이 되어 보고나, PC가 아닌 다른 플랫폼(맥, 스마트 폰 등)을 사용해보면 단번에 Active X가 얼마나 사람을 불편하게 하는지 알 수 있는데 말이지요. 모르겠습니다. "왜 이 맥은 Active X를 못 깔게 해서 날 불편하게 해!" 라며 자신의 맥을 멍청하다고 생각할지도 모르겠네요.

mac magazine의 JMHendrix님 말씀처럼 우공이 마을 사람들을 위해서 산을 옮겼듯이 웹 접근성을 향상을 위해서 노력하는 Open Web과 웹을 사랑하는 사람들의 노력을 저 역시 지지합니다. 또한 더 많은 분들이 이런 노력에 함께 동참해 주시기를 바라겠습니다.


다음 아고라 '은행 및 금융기관 사이트 액티브 X 없애주세요' 서명운동 동참하기

은행 및 금융기관 사이트 액티브X 없애주세요

* Clearboth Blog에 올렸던 글(2009/03/29)을 이전했습니다.

다음 아고라에서 은행과 금융기관의 Active X의 사용 중지를 요청하는 서명을 받고 있어 소개해 드립니다.

Active X 사용 중지를 요청하는 서명운동

Active X 문제가 어제 오늘의 문제는 아니고 Open Web 의 활동을 통해서 끊임 없이 문제 제기와 변화를 요구해 왔습니다만 Active X를 만든 MS나 Active X를 남용하는 각종 사이트들은 요지부동 마음을 바꿀 생각이 전혀 없어 보입니다. 서로 눈치만 보고 누가 먼저 움직이나 하고 뒷짐 지고 지켜만 보고 있는 꼴이지요.

Open Web의 끈질긴 노력에도 불구하고 두번의 고배를 마셨습니다. 하지만 그렇다고 여기서 포기할 Open Web도 아니고, 웹을 사랑하는 사람들 역시 작은 노력들을 모아서 뜻을 밝히고자 이와 같은 서명운동을 시작했습니다. 많은 분들이 이 서명운동에 함께 해 주시기를 바라겠습니다.

모바일 웹 Top 10 (미국)

* Clearboth Blog에 올렸던 글(2009/03/05)을 이전했습니다.

모바일 컨텐츠 이야기의 '모바일 웹의 성장은 계속된다'에 따르면 (오페라 소프트웨어가 발행하는 'State or the Mobile Web' 보고서 인용한 글) 2009년 1월 모바일 웹의 성장세가 지속적이고 뚜렷하게 나타나고 있다고 한다.

특별히 이 글에서 미국의 모바일 웹 Top 10 (미국)에 대한 자료를 소개하고 있는데, 포털과 SNS 사이트들이 주로 포진되어 있음을 볼 수 있다.

Top 10 sites in the U.S. (# of unique users)

1. google.com
2. facebook.com
3. myspace.com (up from 4)
4. wikipedia.org (up from 5)
5. yahoo.com (up from 7)
6. nytimes.com (up from 10)
7. youtube.com (up from 9)
8. gamejump.com (down from 6)
9. accuweather.com (back on the list)
10. cnn.com (back on the list)

웹 표준을 준수하여 사이트를 제작하였을 때 비지니스적으로 가장 큰 이점이 되는 분야가 바로 모바일 웹이라고 할 수 있는데, 앞으로 회사 내 임원이나 고객을 대상으로 하는 웹 표준 홍보에서 좋은 근거가 될 수 있다고 생각된다. 시장 초기에 자사의 웹 사이트가 모바일 웹에서도 제대로 보인다면 확실한 우선순위를 점할 수 있는 장점도 생기지 않겠는가.


추신 / 모바일 컨텐츠 이야기에서는 모바일 분야에 대한 다양한 정보와 글을 게재하고 있습니다.

UI/웹표준/웹접근성 관련 오픈캐스트 운영하실 분 찾습니다.

제가 운영중인 '봄눈의 웹표준 소식'

저는 네이버 오프캐스트에서 '봄눈의 웹표준 소식'을 운영하고 있습니다. 개인적으로 제 블로그의 트래픽을 높이고 싶은 욕심도 있었지만 그 보다는 좀 더 많은 분들에게 '웹 표준'이라는 이슈를 알리고 싶었던 마음에서 시작한 것이었습니다. 운이 좋게 베타테스터로 선정되서 두 달 넘는 기간동안 19회에 걸쳐 발행을 해 왔구요. 오늘까지 1,185분께서 제 캐스트를 구독하고 계십니다. 제 블로그 구독자 수가 비공식적으로 150명 내외일 것으로 본다면 정말 많은 분들이 제 오픈캐스트를 기다려 주신다고 봐야겠죠. 그 분들께는 너무나 감사드리고 자주 발행하고 있지 못해 죄송하네요.

그런데 이번에 오픈캐스트 베타 테스트 기간이 연장되면서 베타 테스터가 새로 3명의 캐스터를 초대할 수 있도록 해 주었네요. 그래서 저는 '아무나'는 그렇고, 기왕이면 저처럼 UI개발을 하시는 분이거나 이쪽으로 관심을 가지고 계신 분들, 웹 표준과 접근성에 대해서 캐스트를 운영해 보고 싶으신 분들께 기회를 드려보고 싶습니다.

선착순으로 세분께 기회를 드릴 것이구요. 네이버 ID, 이메일 주소, 오픈캐스트를 운영하고 싶은 이유를 댓글로 남겨주세요.

클리어보스(Web Standards Evangelist Forum) 사이트 리뉴얼 했습니다.

웹 표준을 알리는 사람들의 모임(Web Standards Evangelist Forum) 클리어보스가 블로그와 위키, 포럼을 하나의 디자인으로 묶는 리뉴얼 작업을 마쳤습니다.

클리어보스는 2007년 '하드코딩을 하는 사람들' 카페에서 강남 지역 스터디 그룹으로 처음 시작된 소모임으로 1년여 이상 함께 '웹 표준'을 공부하고, 여러 행사 등에 참여하거나 주최하면서 활동을 지속하고 있습니다.

'하드코딩을 하는 사람들'과 같은 카페처럼 회원수가 많은 커뮤니티도 아니고, CSS Design Korea처럼 질적으로 수준이 높은 포럼도 아니지만 부족하겠지만 그동안 스터디를 통해서 배우고 알아 온 지식들을 나누고, 새로운 정보를 공유하는데 부끄러워 하지 말자라는 취지에서 이렇게 공식적인 첫걸음을 내 딛게 되었습니다.

리뉴얼된 클리어보스는 기존 포럼 중심에서 블로그 중심으로 바뀌었습니다. 포럼은 블로그의 커뮤니티를 담당하는 메뉴로 내려갔고, 위키는 기존 처럼 클리어보스 활동 내용과 함께 공개 참여가 가능한 문서화 작업 등에 활용될 계획입니다.

클리어보스 리뉴얼과 맞물려 사실 제 블로그인 '웹 뒤에 숨은 Web'에서 주로 포스팅된 내용들과 부딪히는 것들이 생겼는데요. 해외 블로그나 사이트에 수시로 올라오는 글 중 일부를 간단히 번역해서 소개하는 일을 해 왔는데 그 작업은 앞으로 클리어보스 블로그 쪽으로 포스팅을 할 것 같습니다. 제 블로그에는 조금 더 제 경험이 담긴 글(?)로 채워야 하겠네요.

아무쪼록 클리어보스의 블로그와 위키, 포럼을 통해서 더욱 더 발전하는 모임이 되었으면 하고, 많은 분들이 관심을 가져 주시고 방문해 주셨으면 감사하겠습니다.

웹브라우저, 코끼리와 장님들 카툰

'웹브라우저, 코끼리와 장님들'에 등장한 브라우저들

블로거 이정희님의 '해바라기 C' 블로그에 올라온 카툰입니다. '코끼리와 장님들'이라는 인도의 우화를 비유한 제목의 이 카툰은 Firefox, Internet Explorer의 싸움과 브라우저들간의 호환성 문제를 쉽고 재미있게 잘 그려주신 것 같습니다.

열번 듣는 것 보다 한 번 보는 것이 낫다고 역시 그림으로 보니 이해가 더 쉬운 것 같습니다.

카툰이 인용한 '코끼리와 장님들'은 인도의 장님 여섯명이 코끼가 어떻게 생겼는지 알아보기 위해 각자 코끼리를 만져보고, 각자의 생각대로 "코끼리는 이렇게 생겼어!"라고 주장하는 이야기입니다. 첫번째 장님은 코끼리의 옆구리를 만져 보고 나서 벽처럼 생겼다고 하고, 뾰족한 상아를 만진 만진 장님은 창처럼 생겼다 합니다. 코를 만진 장님은 뱀같아고 하고, 다리를 만진 장님은 나무 같다고 하죠. 또, 귀를 만진 장님은 넓은 귀 모양의 팬이라고 주장하고, 꼬리를 만지고서 줄 같다고 합니다.

이렇게 여섯 장님은 자기가 만지고 느낀 것만으로 판단한 것이 전부인양 그것이 옳다고 주장하며 싸우게 됩니다. 하나의 웹을 놓고 다양한 웹 브라우저들이 서로 자기가 제대로 보여준다고 주장하고 있는 이 상황과 너무나 일맥상통한다고 느껴집니다.

그래서인지 카툰의 마지막 장면은 참으로 인상적입니다. Firefox와 Explorer, Safari와 Opera, Chrome이 나란히 손을 잡고, 희야(카툰의 주인공)가 집(홈페이지)을 제대로 짓도록 하나씩 맞춰줍니다.

웹 표준을 지켜달라는 대사 한 마디 없는 카툰이지만 그 이상으로 웹 표준의 필요성을 확실하게 느껴주게 하는 카툰이었다고 생각합니다.

[책] Everything You Know About CSS is Wrong!

Rachel Andrew와 Kevin Yank의 eBook 'Everything You Know About CSS is Wrong!'을 소개해 드립니다.

Everything You Know About CSS is Wrong!

이 책은 CSS의 문제점들과 Floats과 Position을 이용한 CSS 레이아웃 설계의 문제점 등을 지적하면서 'CSS Tables'를 사용해서 색다른 대안을 제시(CSS tables solve all the layout issues we’ve explored here regarding positioning and backgrounds in modern browsers.)하고 있습니다.

처음에 'CSS Tables'이 뭔가 했는데 table, table-row, table-cell... 과 같은 display 속성을 이용한 방법론이었습니다. Digital Web Magazine 에서 책의 요약본이 소개되고 있으니 참고해 보시면 될 것 같습니다.

저도 아직 서두와 목차만 살펴본 상태라 자세한 내용 언급은 어렵네요. 최근 관련 eBook들을 소개하고 있던 참에 IE8까지 다루는 신간(?)으로 나온 것이라 바로 소개해 드립니다.

책의 배포는 Sitepoint에서 유로로 하고 있습니다. 1,2챕터를 담고 있는 샘플 PDF를 내려 받아 보실 수 있습니다. 책 제본 형태와 PDF 형태로 판매되고 있기는 한데, Net Books 에서는 무료로 내려받을 수 있도록 하고 있네요. 두 가지의 내용 차이는 1,2챕터만 비교해 봤을 때는 없었습니다. 분량이 132쪽으로 2쪽 모아찍기로 간단히 제본을 해 두면 분량이 그렇게 많지 않으니 괜찮은 책 한권을 얻게 된 셈이지 않겠습니까 하하

웹표준교과서 찾아보기 업그래이드

웹표준 교과서가 1년 7개월만에 3쇄를 찍었다고 하네요. 웹 표준을 공부하는 사람들에게 제목처럼 '교과서'가 되어 버린 이 책이 꾸준히 사랑을 받고 있다는 소식은 개인적으로 기분 좋은 소식이었습니다.

개인적으로도 1쇄판을 구입해서 지난 한 해 스터디 그룹의 교재로 활용을 했었는데 당시에 아쉬웠던 오타 등이 3쇄를 통해서 많이 정리되었다고 하니 조금 더 퀄리티를 높였을 것으로 기대를 해 봅니다.

특히 3쇄를 통해서 찾아보기를 많이 강화하고, 별도로 블로그에 포스팅까지 해 주셨네요. 1쇄나 2쇄본을 가지고 계신 분들께도 도움이 되리라 생각되네요.

찾아보기 전체보기..

찾아보기


ㄱ
가상 클래스  134
개별성  122
검색엔진 최적화   19, 48
겹따옴표  39
겹쳐지는 순서  173
경제효과  18
고정 스타일시트  292
공백문자  40
구분선(hr 요소)  62
권고안  13
그리니치 표준시  51, 60
글꼴 패밀리  216
글리프(glyph)  188
기준URI  52
길이 단위          113


ㄴ
날짜와 시간의 형식  60
내부 텍스트 매칭 속성 선택자  133
내비게이션 링크  53
내용(content)  144
네임스페이스   22, 44


ㄷ
다단 레이아웃  459
다이내믹 가상 클래스  136
단축 속성  146
대체 스타일시트  292
대체 텍스트     87, 89
드롭 캡  417
디센더(decender)  192


ㄹ
런인박스  159
롤오버 효과  457
루비관련 요소  378
링크   33
링크 가상 클래스  135


ㅁ
마임타입  46
마진(margin)  144
마크업 언어  14
메타데이터  29, 540
명도차  208
명시적 라벨 부여  310
모던 브라우저  17, 25
모듈화  24
목록   69, 433
문단(p 요소)  57
문맥 선택자  131
문서형 선언  43
문서형 정의(DTD)  21
문서형식 전환  389
문자참조  103
문자코드세트   41, 46
미국 재활법 508조  531


ㅂ
박스모델  144
박스모델 핵 399
반행간(half-leading)  188
번호 목록(ul 요소, ol 요소, li 요소)  69
베이스라인  192
보더(border)  144, 148
보편적 접근  14, 27, 490
브라우저 제작사  15
블랭크 이미지  16
블록 레벨 요소  54
블록박스  158
비표준 독자 확장  15


ㅅ
사각정형모델  157
사양서  12
사용자 스타일시트   293
3차 브라우저 전쟁  17
상대URI  36
상속   118
상위호환성  29, 388
상호운용성  20, 388
색차  208
서버사이드 이미지맵  321
선택자   124
설명문  48
속성 선택자  129
순서 없는 목록(unordered list)    69
순서 있는 목록(ordered list)   69
순수 CSS 접근법  389
스크립트 삽입   313
스타일 초기화  402
스타일 컨테이너  101
스타일시트 언어 14
시맨틱 웹  29, 541
시선집중 효과  421
14가지 지침  502


ㅇ
아톰  549
암묵적 라벨 부여  310
양끝 정렬  234
언어 가상 클래스  138
오브젝트 삽입   336
온톨로지  29
우선 스타일시트  292
웹 접근성  19, 29
웹 콘텐츠 접근성 지침 1.0  494, 497
웹 표시 장치 접근성 지침 1.0  495
웹제작도구  16
웹표준  12
음성 스타일시트  94
이미지 대체 기법  453
이미지맵  320
이벤트 핸들러   317
2차 브라우저 전쟁  17
익명 블록박스  159
익명 인라인박스  159
인라인 요소  55
인라인박스  158
인쇄용 스타일  478
인용문(blockquote 요소)  63, 425
인용처/참조처  432
인접 선택자  132
인터레이스PNG  89
입력 양식  444


ㅈ
자식 선택자  131
장치 독립성  491
재사용성  388
저작 도구 접근성 지침 1.0  495
적합성 수준  500
전체 선택자  125
절대패스  36
절대URI  35
접근성  488
정의형 목록(dl 요소, dt 요소, dd 요소)  71
정형식  22, 40, 359
제목(h1~h6 요소)  55, 421, 458
종횡비  228
주석 삽입  101
중앙정렬   148, 407
중요도  499
직접 인접 선택자  133


ㅊ~ㅎ
초안  13
콤팩트박스  159
클라이언트사이드 이미지맵  321
키워드  48
태그 오용  16
테이블  440
테이블 레이아웃   16, 23
테이블 중첩  23
텍스트 들여쓰기  232
텍스트 장식  237
텍스트의 표기 방향  176
투명(transparant)  145
투명PNG  88
트리구조  38
팀 버너스리  12
패딩(padding)  144, 146
패스필터  400
퍼센테이지  146
포함블록  157
폼  444
표(table)  72, 250
표시방법  160
프래그먼트 식별자  83
프레임 설정  343
프로그레시브JPEG  88
플로트  166
하위 선택자  130
하위호환성  20, 387
하이브리드 레이아웃  23
행간(leading)  188
행박스  187
혼합레이아웃  389
홑따옴표  39


A
:active 가상 클래스  136
:after 가상 요소  141
a 요소  83
abbr 속성  73
abbr 요소   93, 415
absolute  163
accesskey 속성  85, 312
acronym 요소   93, 415
address   59
adjacent sibling selector  132
alt   87, 89
alternate style sheets  292
anonymous block box  159
anonymous inline box  159
applet 요소  92
Application/xhtml+xml  47
Application/xml  46
area 요소  322
aspect value  228
ATAG1.0  495
Atom  549
auto  146
axis 속성  81


B
:before 가상 요소  141
b 요소  99
background 속성 367
background-attachment 속성   212
background-color 속성  206
background-image 속성  209
background-position 속성 213
background-repeat 속성 210
backward compatibility  387
base 요소   36, 52
base-font 요소  362
bgcolor 속성   367, 376, 377
bgsound 요소   338, 387
bidi-override  177
big 요소  99
blank image  16
blink  237
block box  158
block-level elements  54
blockquote  425
body 요소   38
border 속성   74, 371, 373
border-bottom 속성   155, 415
border-bottom-color   154
border-bottom-width   150
border-bottom-style   152
border-collapse 속성  256
border-color   155
border-left   155, 426
border-left-color   154
border-left-width   150
border-left-style   152
border-right   155
border-right-color   154
border-right-width   150
border-right-style   152
border-style   153
border-spacing   258
border-top   155
border-top-color   154
border-top-width   150
border-top-style   152
border-width   151
bottom 속성   163
br 요소   58
box model hack  399
brightness difference  208
button 요소  308


C
#CDATA  102
C언어  298
caption 요소   74, 443
caption-side 속성  254
category 요소 566
cecter 요소  363
cellpadding 속성   75
cellspacing 속성   75
CGI(Common Gateway Interface)  298
channel 요소   551, 562
char 속성   78
charoff 속성   78
child selector  131
cite 속성   64, 66, 95
cite 요소  432
class 선택자  127
clear   169
client-side image map  321
clip 속성  199
cloud 요소   564
code 요소   98, 416
col 요소  76
colgroup 요소  76
color 속성  204
color difference  208
cols  304
colspan 속성  77
comment 요소   387
compact box  159
containing block  157
content 속성  261
contextual selector  131
counter-increment 속성   264
counter-reset 속성   265
CSS   15, 25, 108, 386
CSS 핵   393, 404
CSS1  25, 109
CSS2  25, 109
CSS2.1  25, 109
CSS3   26, 133, 143, 273, 477
CSS핵  393
cursor 속성  278


D
dashed  152
Date and Time Formats  60
dd 요소   71, 439
del 요소  94
descendant selector  130
description  48
device independence  491
dfn 요소  97
dir 요소  363
direct adjacent combinator  133
direction 속성  176
display 속성  160
div 요소  100
dl 요소   71, 437
Document Type Definition: DTD  43
DOM  27
DOM1  27
DOM2  27
DOM3  28
dotted  152
double  152
dt 요소 71, 439
DTD   21, 328, 333, 344
Dublin Core 모듈   555


E
ECMA   14
ECMAScript  27, 313
em 요소   93, 414
embed 요소   337, 341, 387
empty-cells 속성  260, 440
enclosure 요소   566
encoding 속성   41
EUC-KR  42
ex   113


F
:first-child 가상 클래스  134
:first-letter 가상 요소  140
:first-line 가상 요소  139
:focus   136, 449
fabrice 인버전   399
fantasy   218
fieldset 요소  311
filter   243
Firefox   15, 17, 294, 391
fixed  163
float   91, 166, 172
FOAF  569
font 속성  229
font 요소   364
font family 속성  216
font-size 속성  99, 189, 225
font-size-adjust 속성  227
font-stretch 속성   224
font-style 속성   99, 219, 432
font-variant 속성  221
font-weight 속성   99, 222
form 요소  299, 444
forward compatibility  388
frame 속성   74
frame 요소   347, 364
frameset 요소   345, 364


G
GIF   87
google   50
GMT  51, 60
groove  152
guid 요소   567


H
:hover 가상 클래스  136
head 요소   37, 119
headers 속성   79
heading   55, 421, 458
height 속성   90, 179, 376
hr 요소   62
href 속성   83, 86
hspace 속성   371, 374
HTML  20, 32, 354
HTML2.0  16
HTML 2.x   16
HTML 3.2   16
HTML4.0  17
HTML4.01  17, 21
html 요소   37, 354
HTTP  32
hybrid layout  389
h1 요소   57, 455, 458


I
!important선언  123
i 요소  99
IANA  13
id 선택자  127
IETF  13
iframe 요소   198, 328
ilayer 요소   328
img 요소  87, 92, 340, 453
inherit   118
inline box  158
inline elements  55
input 요소  300
ins 요소  94
inset  152
interoperability  388
isindex 요소  365
ismap  304
ismap 속성  326
ISO  13
ISO-HTML   14, 56
iso-2022-kr  42
item 요소   552, 565


J
Java애플릿  332
JavaScript  313
JIS  14
JPEG  88
Jeffrey Zeldman  388
JScript  313
JSS   108
justify  234


K
kbd 요소  98
keyword  48


L
:lang 가상 클래스   138
:link 가상 클래스   135
label 요소  309
lang 속성  45
language 속성   317, 375
layer 요소   328, 387
left 속성   163
legend 요소  311
letter-spacing 속성  244
li 요소   69
line box  187
line-height 속성   180, 187
line-through  237
link 속성   368
link 요소   53, 479
list-style 속성  276
list-style-image 속성  274
list-style-position 속성  275
list-style-type 속성   271
longdesc  90
ltr  176
lynx   97


M
Mac IE 4   395, 396, 397
Mac IE 4.5   395, 397
Mac IE 5   17, 295, 392, 396, 397
map 요소  322
margin 속성   91, 145, 406, 429
margin-bottom 속성   145
margin-left 속성   145, 446
margin-top 속성   145
margin-right 속성   145
marker-offset 속성  277
marks 속성   483
marquee 요소   387
MathML   28
max-height  183
max-width  183
medium  150
menu 요소  365
meta   48, 120, 540
mime type   46, 120, 357, 560
min-height  183
min-width  183
monospace   218
Movable Type  18
Mozilla   15, 17, 294
Mozilla 0.6+   391
Mozilla 1.1+   392


N
name 속성   48, 83, 128, 354, 360, 367, 373
Netscape   15, 17, 294, 391
Netscape 4   394, 395, 397
Netscape 6.0  17
Netscape 6/7/8  17
noframes 요소  350
noscript 요소   317
noshade 속성   370
nowrap 속성   249


O
#OCDATA  102
OASIS  14
object 요소  92, 331, 336, 338, 340, 341
ol 요소   69, 435
Opera   15, 17, 295, 391
optgroup 요소  307
option 요소  306
orphans 속성   484
outline 속성  279, 282
outline-color   282
outline-style   281
outline-width   280
outset  152
overflow 속성  194, 198
overflow-x   199
overflow-y   199
overline  237
OWL  29, 546


P
p 요소   57
padding 속성   148, 406, 413, 449
padding-bottom   148
padding-left   148
padding-top   148
padding-right   148
page 속성   483
page-break-after 속성   483
page-break-before 속성   483
page-break-inside 속성   484
param 속성   335
pass filters  400
pattern matching  124
Perl  298
persistent style sheets 292
PHP(Hypertext Preprocessor)  298
pixel   114
PNG  88
position 속성   162, 172, 243 
pre  249
pre 요소  67
preferred style sheets  292
pre-line  249
pre-wrap  249
Priority  499
pseudo-classes  134
pure CSS approach  389
px   113


Q
q 요소   65, 67, 430
quotes 속성  268, 430


R
:root 가상 클래스   398
RDF  29, 542
RDF Triple  542
RDF/RDFS  29
RDFS  545
rdf:RDF 요소   551, 569
relative  163
reusability  388
ridge  152
right 속성   163
Robot.txt  50
rows  304
rowspan 속성  77
RSS  547
rss 요소   562
RSS1.0  555
RSS2.0  561
rtl  176
ruby-align 속성   381
ruby-overhang 속성   382
ruby-position 속성   380
ruby-span 속성   382
rules 속성   74
run-in box  159


S
s 요소   365
Safari   15, 17, 295
samp 요소  98
sans-serif   218
SBMH   400
scope 속성  80
script 요소   102, 315, 358, 444
section 요소  57
Section 508  531
select 요소  306
selector   124
SEO(Search Engine Optimization)   19, 459
separator   63
serif   218
server-side image map  321
SGML  21, 104
shorthand properties  146
size 속성   370, 483
Small 요소  99
SMIL  22, 28
solid  152
source 요소   566
spacer 요소   387
span 속성   77, 455
span 요소  100
Specifications  12
specificity  122
src 속성   87
stanalone 속성  42
start 속성   374
static  163
Strict  17
strike 요소   365
strong 요소   93, 414
style 속성   119
style 요소   102, 119, 358
sub 요소  96
substring matching attribute selectors  133
summary 속성  73
sup 요소  96
SVG  22, 28
syndication 모듈   557


T
tabindex 속성  85, 312
tantek 박스모델 핵   399
table 요소   72, 250
table-layout 속성  255, 349, 367, 369, 373
tag misuse  16
target 속성  330
tbody 요소  76
Tcl  314
td 요소   72, 442
Text/html  47
Text/xml  47
text 속성   367
text-align 속성  233
textarea 요소  198, 305, 447, 449
text-decoration 속성  237, 411
text-indent 속성   232, 455
textinput 요소   554, 565 
text-shadow 속성   241
text-transform 속성   247, 418
tfoot 요소  76
th 요소   72, 442
thead 요소  76
thick  150
thin  150
Tim Berners-Lee   12, 21, 541
title 속성   65, 86, 95
title 요소   45
top 속성   163
tr 요소   72
Transitional  17
transparent  154
tt 요소  99
type 속성   372, 374, 377
TZD   60


U
u 요소 366
UAAG1.0  495
ul 요소   69, 433
underline  237
Unicode   41, 269
Unicode-bidi 속성  176
universal access  490
universal selector 125
URI  32, 36, 116, 560
URI schemes  33
URL  32
URN  32
usemap  304
UTC   60
UTF-16  42
UTF-8  42


V
:visit 가상 클래스   135
valign  속성   78
value 속성 373
var 요소 98
VBScript  314
version 속성   41
vertical-align 속성   79, 91, 190
visibility 속성  202, 252
visual formatting model  157
vlink 속성   368
vspace 속성   371, 374


W
W3C  12
WAI  493
WCAG1.0   29, 56, 73, 206, 321, 489, 494, 497, 529
WCAG2.0   527, 529
Web Standards  12
Web Standards Projects(WaSP)  17
well-formed  22, 40, 358
whitespace  40
white-space 속성  248
width 속성   74, 90, 179, 252, 370, 375, 377, 447
windows 속성   485
Win IE 3   395
Win IE 4   294, 395
Win IE 5   17, 199, 294, 396, 397, 401
Win IE 6/7  17, 294, 391, 397, 405
Wired News  18
Wordpress  18
word-spacing 속성  246


X~Z
XAG  496
XHTML   20, 21, 22, 38, 354
XHTML Basic  21
XHTML+CSS  18
XHTML1.0   21, 354, 444
XHTML1.0 Strict   23, 44
XHTML1.0 Transitional   23, 44, 355
XHTML1.0 Frameset   44, 355
XHTML1.1   22, 24, 43, 354, 362, 378, 444
XHTML2.0   24, 57, 75, 86
xml:lang 속성  45, 366
XML   21, 356, 545
XML 접근성 지침  496
XML1.0  22
xmlns 속성  45, 551
xmlns 속성 핵   398
xml-stylesheet 처리 명령   119, 292
xml:space 속성   69
xml:lang 속성   45, 366
Z-index   173


기호
@charset 규칙  290
@font-face 규칙  291
@import 규칙  288
@media 규칙   284, 478
@page 규칙   291, 482

[출처] 웹표준 교과서 색인 700개로 확대!(3쇄)| 작성자 퍼스널

ps/ 중복된 항목과 몇가지 거슬리는 것들이 있어서 몇가지 수정을 하고 인쇄를 편하게 해 보려고 Clearboth Wiki(제가 참여하고 있는 스터디 그룹 위키) 페이지에 등록한 조금 다른 버전도 있습니다.