웹 뒤에 숨은 Web

CSS 완벽 가이드, 또 하나의 웹표준 필독서

봄눈 — Tue, 23 Jun 2009 23:43:44 +0900

지난 5월은 결혼 때문에 앞뒤로 한 두달 정신 없는 하루 하루를 보냈다. 그 와중에 친구 태영군으로부터 책 한 권을 선물로 받았던 적이 있었는데 에릭 마이어가 저술한 CSS 완벽 가이드(CSS: The Definitive Guide)였고, 번역은 책을 선물한 정태영군을 비롯해서 남덕현, 이준, 연홍석님등 웹표준에 남다른 열정을 보이고 계시는 분들이 수고를 해 주셨다.

한 두 주 동안 출퇴근길 지하철 속에서 책을 펼치기

Eric Meyer

시작해서 오늘에서야 겨우 덮을 수 있었는데 정말이지 너무나 상세하고 친절한 설명에 감탄이 절로 나왔던 순간이 여러번이었다. CSS를 쓸만큼은 알고 있다고 생각했었지만 저자의 설명을 읽어내려가는 동안 몇번이나 얼굴이 붉어지면서 스스로를 부끄럽게 느꼈던지 모르겠다.

얼마전 사석에서

CSS 완벽

만나 뵈었던 연홍석님도 번역을 하는 동안 CSS의 새로운 모습들을 볼 수 있는 좋은 기회였다는 말씀을 새삼 느낄 수 있었던 것 같다. 모든 책들을 살펴본 것은 아니지만 국내 서점에 나와 있는 대부분의 CSS 서적들 가운데 단연 으뜸이지 않을까. 어느 책도 이 정도로 깊이 있는 내용을 군더더기 없이 담아내지 못했지 싶다.

특별히 1장 CSS와 문서, 2장 선택자, 11장 테이블 레이아웃, 14장 비화면 매체는 한 번 다 읽은 후에도 다 한 번 되돌아가 읽어보기를 추천한다. 모든 장의 내용이 훌륭하지만 1장을 통해 CSS가 필요하고 중요한 까닭을 확실히 느낄 수 있기를 바란다.

2003년 3월 3일 이후에

봄눈 — Sun, 21 Jun 2009 22:43:20 +0900

2003년 3월 3일은 이 블로그의 첫번째 글이 올라온 날짜다. 하지만 실제로 위키를 포함해서 개인 블로그를 운영하기 시작한건 2001년쯤으로 거슬러 올라간다. 대학생이던 그 시절 어느날엔가 위키란 것에 관심을 갖고, 개인 위키를 개설했던 것이 시작이었다. 하지만 2005년 군 입대 이전까지는 국문학도답게 소설과 문학비평에 관심이 많았고, 그러한 이야기를 주로 담아 내기 위한 공간으로 활용했다. 축구를 즐겨 보고, 사진 찍기를 좋아했던 취미는 어느새 내 블로그를 사진첩과 독후감 페이지로 만들어 가고 있었다.

그러다 2005년 입대를 하면서 한동안 블로그를 운영하지 못했고, 2007년 제대와 함께 사회에 나왔다. 직장을 구해야 했고, 나는 웹 퍼블리셔라는 일을 시작했다. 하루 종일의 관심사는 웹 표준과 웹 접근성이 되었고, 한 달 내내 다루는 이야기는 HTML과 CSS, JavaScript가 되었다. 어느 순간 내 블로그는 '웹표준'이라는 키워드로 어느 검색 사이트에서든 찾아지는 사이트가 되어 버렸다.

어찌 보면 일관성 없이 꾸려져 온 내 작은 공간. 오늘은 문득 내 블로그의 첫번째 글을 되찾아 그간의 흔적을 쫓으면서 나는 이 블로그에 무엇을 담고자 했고, 담아 왔는지. 담아 낼 것인지를 고민한다.

웹표준에 대한 관심이 높아져서 이젠 제법 많은 블로그들이 만들어졌고, 더 좋은, 더 나은 콘텐츠들이 올라오곤 한다. 나는 부끄럽다. 내 지식과 글이 이렇게나 부끄럽게 느껴졌던 순간이 또 있었을까 싶다. 도망치고 싶은 마음이 들기도 하고, 이 블로그를 그만 둘까 하는 어리석은 생각도 가져본다. 그러다가도 며칠째 허전하게 맴맴돌고 있는 내 글들을 보고 있으면 다시금 키보드를 탁탁 두드리며 뭔가를 적으려고 발버둥 치고 있다.

나는 조금 더 나아지고 싶다. 이 블로그를 조금 더 나아지게 만들고 싶다. 좀 더 뚜렷한 내 주관 안에서 좀 더 깊은 지식을 덮은 영근 글들을 토해내고 싶다.

공짜로 얻을 수 있는 CSS 템플릿들

봄눈 — Sun, 21 Jun 2009 18:42:31 +0900

웹 표준 공부를 시작하는 사람들에게 다른 사람의 소스 만큼이나 좋은 교재는 없다. 그래서 네이버와 다음과 같은 누구나 아는 사이트의 소스 코드는 언제나 1순위로 '까 보는' 교재가 되었다. 하지만 막상 속을 열어 본 포털의 소스는 너무나 방대하고 어렵다. 뭔가 깔끔하게 구조만 가지고 있는 코드는 없을까? 하고 고민을 해 본 사람이 적지 않을 것 같다. 구글링을 해 본 사람이라면 CSS를 멋지게 다룬 깔끔한 웹사이트들을 어렵지 않게 찾아볼 수 있었을 것이다. 하지만 그마저도 귀찮고 어려운 일이라고 여겨진다면 Design Tech가 소개하는 35개의 웹사이트(35 Excellent Websites for Downloading Free CSS Template)를 방문해 보자. 하루 종일 둘러봐도 시간이 모자를 만큼 많은 무료 CSS 템플릿들이 소개되어 있다. (대체로 비슷한 것들이 많아 보이지만 이외로 멋진 레이아웃을 보여주는 것도 많다!)

무료 CSS 템플릿들

THEAD안에 TD, 제목일까?

봄눈 — Thu, 18 Jun 2009 13:49:20 +0900

데이터테이블은 TABLE 요소 안에 THEAD, TFOOT, TBODY, TR, TH, TD 등의 자식 요소들을 배치함으로써 만들어진다. 더불어 CAPTION 요소를 통해 데이터테이블의 제목을 달아 주거나, summary 속성을을 통해 데이터테이블의 내용을 요약해서 적어줄 수 있다. 보통의 경우 다음과 같이 마크업할 수 있다. (편의상 네이버 스포츠 축구 섹션에서 2010 남아공 월드컵 아시아 지역 최종 예선 결과표를 인용합니다.)

2010 남아공 월드컵 아시아 지역 최종 예선 결과표

각 요소들을 의미있게 마크업되어 있는 것을 확인할 수 잇다. 물론 ID와 CLASS 역시 의미 있는 이름으로 작성되어 있다. 그런데 만약에 다음과 같이 THEAD 요소 아래 TH 요소를 TD 요소로 마크업했다면 어땠을까?

이런 경우는 흔치 않지만 가능한 경우이며, 스펙에 어긋나지도 않는다. 그럼 THEAD 요소 안에 마크업된 TD 요소(정확히는 TD요소 안에 문자열)는 의미적으로 제목 이라고 판단할 수 있을까?

TBODY 요소 안에 TH 요소를 마크업 하는 경우는 개별 행의 제목 셀을 지정하기 위해서 사용될 수 있다. TBODY 요소나 TFOOT 요소 안에서는 TH와 TD 요소의 차이가 비교적 명확하다고 볼 수 있다.

다음의 예는 THEAD 요소 안에 내용이 없는 TD 요소를 사용한 경우다.

THEAD 요소 안에 TD 요소를 마크업한 데이터테이블

<table border="1" summary="Black plums and bosca pears table with one level of row and column headers">
   <caption>Prices for black plums and bosca pears in Sydney</caption>
<thead>
   <tr>
<td></td>
<th>Lemons</th>
<th>Pears</th>
   </tr>
</thead>
<tbody>
   <tr>
<th>Wholesale</th>
<td>$1.00</td>
<td>$1.50</td>
   </tr>
   <tr>
<th>Retail</th>
<td>$2.00</td>
<td>$2.50</td>
   </tr>
</tbody>
</table>

이 경우에 THEAD 요소 안에 TD 요소는 제목 셀일까?

정리해보면 다음과 같다.

THEAD 요소 자체가 THEAD 요소 내에 마크업된 TH, TD 요소들을 '제목'이라는 의미를 갖게 만들어 주는가?
THEAD 요소 자체가 '제목'의 의미를 가지면서 TD요소에 내용이 있는 경우
THEAD 요소 자체가 '제목'의 의미를 가지면서 TD요소에 내용이 없는 경우
THEAD 요소 자체가 '제목'의 의미를 갖지 않으면서 TD요소에 내용이 있는 경우
THEAD 요소 자체가 '제목'의 의미를 갖지 않으면서 TD요소에 내용이 있는 경우

우선 THEAD 요소가 '제목'의 의미를 갖는가? 하는 것인데 HTML 4.01 명세서를 살펴보면 THEAD, TFOOT, TBODY는 행의 그룹화를 위해서 만들어졌음을 알 수 있다.

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively.

THEAD와 TBODY요소는 컬럼의 정보를 담아야 한다(The table head and table foot should contain information about the table's columns.)라고 적고 있긴 하지만 그것이 정확히 '제목'을 의미하는 것인지 확신이 서지는 않는다. 내가 판단하기로는 THEAD, TFOOT, TBODY 요소는 표의 행 그룹화를 위해 존재하는 구조적 요소 같다. 다시 말해 THEAD 요소 자체에는 '제목'의 의미를 품고 있지는 않다고 본다.

그럼 2,3번의 경우는 지워지고, 4,5번의 경우를 살펴보면 5의 경우는 자연스럽게 의미를 갖지 않는 빈 셀로 결정되며, 4의 경우에는 TH 요소를 마크업할 것을 TD 요소로 잘 못 마크업한 경우로 봐야 할 것 같다. 즉, 스펙에 어긋나지는 않지만 논리적인 오류를 낸 것(제작자는 분명 제목으로써 TD 요소를 마크업했을 것이기 때문에)이라고 생각한다.

사실 THEAD 요소 안에 제목 셀은 TH 요소로, 빈 셀은 TD 요소를 마크업하면 별다른 고민이 필요없고, 명확하게 이해 할 수 있는 부분이다. 하지만 THEAD와 TBODY, TFOOT 요소를 사용하지 않거나, 제목 셀을 TD 요소만을 이용해서 마크업하는 낡은 방식을 여전히 답습하는 사람이 있는 것을 보았고, 심지어 컴포넌트 기반의 개발 툴에서 데이터테이블을 생성하는 경우에 THEAD 요소 안에 제목 셀을 TD 요소로 마크업하는 것을 보면서 이런 의구심을 갖게 되었다.

당연히 그래야 한다고 생각했던 부분에 대해서 그렇지 않은 경우라면? 이라는 논리로 다소 길게 설명해 왔지만 THEAD 요소 안에 제목 셀을 TH 요소로 마크업해야 하는 이유는 확실하다.

TH 요소 자체가 '제목 셀'의 의미를 가진다. HTML 문서를 보다 의미 있게 만들어 준다.
1을 근거로 스크린 리더와 같은 접근성 보조 도구를 통해 제목 셀을 정확하게 전달할 수 있다.(센스리더의 경우 현재는 TH요소와 TD요소를 구분하여 읽어주지는 않음.)
CSS나 JavaScript를 위한 셀렉터로써의 편의를 가질 수 있다. (TD 요소에 class='title' 과 같이 작성하는 것보다 효율적이다.)

TABLE 요소는 가장 많이 다루게 되는 요소이면서 의외로 올바르게 사용하지 못하는 요소 가운데 하나다. DTD에 따라서 그 용법의 차이도 있고, TH 요소와 TD 요소 간의 관계를 보다 명확하게 정의하기 위한 headers, scope와 같은 속성도 있다. 나 역시도 TABLE 요소가 아직도 어렵고, 여전히 헷갈리는 부분이 많다. THEAD 요소 안에서 TD 요소가 제목 셀로 사용되는지에 대한 질문도 별 것 아닐 수 있겠으나 누군가에게는 (나처럼) 큰 고민이 되지 않았을까 싶어 정리해 보았다.

제목(H1)은 한 번만 쓸 수 있나?

봄눈 — Mon, 15 Jun 2009 20:49:51 +0900

산들바람님께서 하드코딩하는 사람들을 올린 'heading h1,h2,h3.... 의 배치 방법이 애매하네요....'라는 글을 통해서 H1 요소의 용법에 대한 질문을 던져 주셨습니다. 가입자만 내용을 확인할 수 있는 게시판에서 이루어진 내용이라 다른 분들께도 공유될 수 있었으면 해서 끄집어 내 보았습니다.

한 페이지 내에서 H1 요소를 한 번만 쓸 것인가? 두 번 이상 쓸 수 있을 것인가? 하는 문제인데요. 사실 명세서 상에서 횟수에 대한 제한을 두고 있지는 않습니다. 실제로 H1 요소를 두 번 이상 마크업한 문서에서도 Markup Validation Service는 문서가 유효함을 보여주고 있습니다.

웹 접근성 연구소는 H1 요소를 두 번 사용하고 있다

H1이 두 번 이상 사용되어도 마크업 유효성 검증은 통과한다.

이에 신현석님께서 게시판을 통해 "HTML 표준상에서 헤딩 태그는 각 섹션별로 H1을 지정할 수 있게 하고 있습니다. H1은 한페이지 기준이 아니라 섹션 기준"이라는 답변과 함께 다음의 기준을 일러 주셨습니다. (이 답변 내용은 현석닷컴에서도 확인해 보실 수 있습니다.)

단계가 순차적인가?
중요한 항목을 잘 표현하고 너무 남용하지 않았는가?
너무 적게 사용하여 페이지 레이아웃을 확인하기 힘들지 않은가?

아울러 "헤딩만 나열을 했을 때 페이지 전체의 콘텐츠 구조를 파악할 수있게 지정하는 것이 중요"하다는 점을 강조하고 계십니다.

H1 요소의 사용이 다소 이슈가 있어 명확한 답을 기대하긴 어렵지만 대체로 위와 같은 기준과 판단점을 가진다면 웹접근성 이슈는 해결할 수 있다고 봅니다.

여기에 제 생각을 붙이자면,

사실 명세서가 설명하는 제목 요소의 정의가 애매하기 때문에 이런 고민을 갖게 되는데요.

일반적으로 페이지의 가장 큰 제목인 사이트 제목을 H1으로 마크업하다 보니 다음 순서로 등장하는 섹션의 가장 큰 제목을 H2로 마크업하게 됩니다. 권고안대로 섹션 별로 H1 요소를 마크업할 수 있다면 다음 H1 요소는 사이트 제목과 준하는 수준에 적용되어져야 하는데 사실 사이트 제목보다 더 큰 제목이 나올 가능성은 거의 없게 되고, 그렇게 페이지 내에서 H1은 한 번만 사용된다라는 관례가 만들어진 것 같습니다.

만약에 사이트 제목을 기술하는 TITLE 요소가 HEAD 요소 이외에 BODY 요소 내에서도 사용될 수 있었다면 최상위 제목이라고 볼 수 있는 (일반적인) 사이트 제목을 TITLE 요소로 마크업하고, 하위 섹션의 큰 제목을 H1으로 마크업하는 것이 어색하지 않았을 것이라는 생각을 해 봅니다. 실제로 웹 접근성 연구소는 사이트 제목이 되는 로고 이미지에 H1요소가 아닌 P 요소를 사용하였고, class 이름으로 'logo'라고 정의하고 있습니다.

이처럼 '섹션'의 범위를 페이지로 볼 것인지, 내용 중 섹션으로 볼 것인지는 전적으로 개발자의 판단에 맡겨진 상태입니다. 저는 종종 이 문제를 함께 일하는 기획자에게 물어보곤 합니다. 마크업이 웹 퍼블리셔의 업무이긴 하지만 H1 요소와 같은 제목 요소들은 기획자들과 논의를 거친 후 명확하게 정리해 놓고 정의할 필요가 있다고 생각됩니다. H1을 한 번만 써야 한다 아니다 두 번 이상 사용해도 좋다라는 논쟁은 중요한 문제이면서 동시에 큰 문제가 아닐 수 있습니다. 웹 퍼블리셔 등 많은 개발자들이 종종 스펙 자체에만 집중하면서 시야가 좁아지고, 판단이 흐려지는 경우가 많습니다. (저 역시 그렇구요) 이럴 때 일수록 기획자와 같은 파트너의 의견에 들어볼 필요가 있습니다. 기획 단계에서부터 중요한 각 의미 영역(제목, 머릿글, 바닥글, 본문, 사이드바, 글로벌 메뉴 등)에 대한 명확한 요소의 지정이 확정될 수 있다면 시멘틱한 마크업을 보다 쉽고, 명화하게 할 수 있지 않나 싶습니다.

Safari 4 정식 발표

봄눈 — Tue, 09 Jun 2009 16:39:00 +0900

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

WWDC 2009를 통해서 애플의 웹 브라우저 'Safari 4'가 정식 버전으로 릴리즈 되었습니다.

일모리님과 웹초보님 이 각각 Safari 4 의 릴리즈 소식을 전하고 있는데요. 오프닝 영상과, Top Sites 기능, 커버플로우 등 인상적인 UI 개선을 소개하고 있습니다. 다만, 메모리 점유율에 대한 문제는 베타에 비해 개선된 것이 없음을 지적하고 있습니다.

Safari 4 내려받기

Safari 4 다운로드 페이지

Firebug를 강력하게 만들어주는 확장기능 13개

봄눈 — Tue, 09 Jun 2009 13:25:00 +0900

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

Firebug는 그 자체로 매우 강력한 웹개발도구이지만, 때때로 아쉬운 부분이 없지 않다. 하지만 현명한 개발자들은 Firebug를 위한 확장기능을 만들어 공개함으로써 Firebug를 더욱 더 강력하게 만들었다.

Google이 배포하는 확장기능 Page Speed

WebResourcesDepot에 소개된 '13 Must-Have Add-ons To Strengthen Firebug'는 Firebug의 훌륭한 확장기능 13가지를 친절히 소개하고 있다.

추신/ 사실 그동안 Firebug의 확장기능 소개가 이루어져 왔는데 Google의 Page Speed와 LiveCooder 정도가 새로운 확장기능으로 눈에 띄는 정도다. Page Speed는 Yahoo!가 개발하고 배포하는 YSlow와 비교하여 써 봄도 괜찮을 것 같다.

HTML5로 만들어진 사이트들

봄눈 — Tue, 09 Jun 2009 00:01:17 +0900

HTML5는 2009년 4월 23일 현재 Working Draft 상태입니다. 하지만 이미 많은 개발자와 디자이너들은 최신의 웹브라우저를 통해서 HTML 5 기반의 웹 사이트를 구축하여 소개하고 있습니다.

HTML 5 Gallery는 그런 사이트들을 모아둔 곳입니다.

HTML 5 Gallery

Jeffrey Zeldman은 8일 오전 'HTML 5 Gallery'를 소개하는 글을 통해서 이 갤러리의 두가지 목적을 설명하고 있는데요.

하나는 HTML 5 로 마크업된 사이트들을 소개하는 것이고, 또 다른 하나는 이렇게 소개된 사이트들을 통해서 HTML 5을 배우고자 하는 사람들에게 HTML 5를 어떻게 구현하고, 적용해야 하는지를 방법을 제시해 줄 것이라고 이야기하고 있습니다. 더불어 웹 브라우저 개발자들이 얼마나 많은 사람들이 HTML 5를 구현하는지 지켜보면서 그들의 엔진을 향상시킬 것이라고 기대하고 있습니다.

HTML 5 Gallery에는 현재(09. 6. 9) 41개의 사이트들이 등록되어 있으며, HTML 5 Gallery 트위터 페이지를 통해서 새로운 HTML 5 사이트를 등록할 수 있습니다.

추신/ 갤러리에 등록된 사이트들을 HTML 5를 지원하는 최신의 브라우저들과 IE6와 같이 구 브라우저에서 함게 확인해보면서 HTML 5의 새로운 마크업을 살펴보면 꽤나 흥미롭습니다.

리눅스의 웹브라우저들

봄눈 — Mon, 08 Jun 2009 14:37:00 +0900

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

Sirjhswin의 블로그에서 파이어폭스를 제외한 '리눅스에서 사용할만한 12가지 웹브라우저'를 소개하고 있습니다.

대 다수의 사용자들은 인터넷 익스플로어 이외의 웹 브라우저에 대해서 매우 인색합니다. 심지어 인터넷은 인터넷 익스플로어다라고 생각하고 있는 사람도 적지 않습니다. 최근 웹 표준 이슈와 더불어 파이어폭스나 사파리, 오페라 웹 브라우저가 조금씩 알려지고 있지만 세상에는 훨씬 더 많은 웹 브라우저들이 존재하고 있고, 다양한 웹 경험을 제공하고 있습니다.

리눅스의 웹브라우저들

Sirjhswin님은 이런 분위기 속에서 리눅스 사용자들을 위해서 파이어폭스 이외의 쓸만한 웹 브라우저 12가지를 선 보이고 있습니다.

저시력자를 위한 웹접근성 가이드

봄눈 — Mon, 08 Jun 2009 14:22:00 +0900

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

백남중님의 블로그는 '잊혀진 시각장애인, 저시력인'을 통해서 색 대비를 통한 접근성 가이드를 소개하면서 디자이너나 개발자들이 색 대비를 확인해 볼 수 있도록 도움을 주는 툴을 소개하고 있습니다.

색 대비가 부족하여 웹접근성이 낮은 경우

본문 목차는 다음과 같습니다: