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

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

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

Eric Meyer

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

얼마전 사석에서

CSS 완벽

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

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

2003년 3월 3일 이후에

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

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

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

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

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

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

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

무료 CSS 템플릿들

1. Soulcija
2. TemplateFusion
3. Styleshout
4. Templatemo
5. Open Source Template
6. Get CSS Templates
7. Free- CSS- Templates
8. CSSTEMPLATESFORFREE
9. CSSTemps
10. freeCSStemplates
11. My Free CSS Templates
12. Six Shooter Media
13. Mitch Bryson’s Free CSS Template
14. Web Templates
15. ZeroWeb
16. CSSTemplates
17. My Celly
18. FreeCssTemplate
19. CSS Creme CSS Templates
20. Open Web Design
21. Best Free Templates
22. Templateworld
23. RamblingSoul
24. Spyka Webmaster
25. FreeTemplates4u
26. CSS Design Center
27. CssTemplateHeaven
28. FreeCssXhtmlTemplates
29. Inf Design
30. Templates Rain
31. Templateyes
32. ATemplate Free
33. Free CSS Layouts
34. CSS4Free
35. CssTemplatesFree

Safari 4 정식 발표

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

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

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

Safari 4 내려받기

Safari 4 다운로드 페이지

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

* 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로 만들어진 사이트들

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의 새로운 마크업을 살펴보면 꽤나 흥미롭습니다.

리눅스의 웹브라우저들

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

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

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

리눅스의 웹브라우저들

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

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

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

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

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

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

• 색 대비(Color Contrast)와 웹 접근 조항
• 바탕색, 전경색 대비 샘플 보기
• 인터넷 상에서 색 대비 확인하기
• Contrast Analyser 2.2

아직도 박스 모델(CSS Box Model)이 어렵다구요?

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

CSS TRICKS 에서 심심하면 한번씩 설명되는 CSS 박스 모델에 대해서 다시 한 번 이야기를 하고 있습니다.

파이어폭스의 부가기능 '파이어버그'를 이용해서 박스 모델을 시각적으로 확인하는 방법과, 박스모델을 계산하는 공식을 소개하고 있습니다.

너비에 따른 박스 모델

또한, 박스가 static 또는 relative인 경우에 너비를 정의했을 때와 정의하지 않았을 때 어떻게 다르게 표현되는지를 설명하고 있으며, Abolute로 처리된 박스에 대한 설명과 인라인 요소에 대한 설명도 함께 하고 있습니다.

어려운 CSS? 퀴즈로 배워보자

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

블로그 나라디자인을 운영하고 계시는 정찬명님은 일을 즐겁게 하는 방법을 아는 사람중 한 분이다. 최근 몇 달 사이 나라디자인을 통해서 어렵게 느껴지는 CSS를 좀 더 친근하고 재밌게 공부하고 알아갈 수 있도록 퀴즈를 직접 내고, '빌붙기' 선물까지 제공해 주시고 계시다.

초보에게는 다소 어려운 퀴즈일 수 있지만 현업에서 몇 개월 이상의 경험을 가진 개발자나 웹퍼블리셔들이라면 큰 부담 없이 도전해 볼 수 있지 않을까 싶다.

수평메뉴를 만들어라

지금은 실무에서 가장 많이 사용되고 있는 '수평 메뉴(Horizontal Navigation)'를 이미지 없이 마크업과 스타일시트를 작성하는 퀴즈가 나와 있다. 이번에도 역시나 '빌붙기' 상품이 제공된다니 어서 도전해 보자!

지금까지 출제된 퀴즈들:

1. CSS로 삼각형 만들기
2. Acid2의 스마일을 그려라
3. 라운드 코너 만들기

웹 안전 폰트(Web Safe Font)?

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

나라디자인은 글로벌 서비스에서 적용되는 서체에 대해 다음 글 '유니버설 디자인을 위한 웹 안전 서체'를 통해서 웹 안전 서체를 소개하고 있습니다.

굴 림(Gulim), 돋움(Dotum), 바탕(Batang)체와 같이 웹 디자인시 일반적으로 적용되는 시스템 서체들에 대해서 당연히 사용자 에이전트(웹 브라우저 등)에서 보여질 것이라고 기대하고 있는 것과 달리 한국어 버전이 아닌 Windows 2000/XP 에서는 돋움(Dotum)체가 포함되어 있지 않아 제대로 나타나지 않을 수 있다고 적고 있습니다.

자세한 소개와 내용은 원문을 확인해주세요.

IE8이 IE6을 끌어 내리고 있다

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

Asa Dotzlor는 Net Applications 의 자료를 바탕으로 지난 56주간의 웹 브라우저 점유율에 대한 차트를 그렸다. 2004년 10월 이후 IE6의 하락세가 뚜렷하게 나타나고 있음을 볼 수 있다.

56주간 기록된 주요 브라우저 점유율

Ajaxian의 기사 IE8 vs. IE6: Rise of the new machine를 통해서도 IE8 출시 이후(2008년 10월 이후) IE6과 IE7의 사용율이 확실히 내려가고 있음을 알 수 있다. 특히 점유율이 보다 두배 가까이 높았던 IE7의 하락세가 더욱 뚜렷하게 나타나고 있다.

Ajaxian이 공개한 IE 버전간 점유율

SwivelBusiness의 차트와 표를 통해서 본 증가율은 2008년 10월부터 2009년 6월 1일까지의 기간 동안 IE8은 평균 264.01%의 성장세를 보인 반면, IE6은 -16.73%, IE7은 -18.86%의 하락세를 보인 것으로 나타나 있다.

SwivelBusiness의 브라우저 증가율 차트

Series	Low	High	Total	Average	Median
Internet Explorer 7.0	-13.28% on May-09	0.66% on Nov-08	-18.86%	-2.36%	0.00%
Firefox 3.0	0.00% on Oct-08	40.90% on May-09	200.00%	25.00%	28.00%
Internet Explorer 6.0	-27.82% on May-09	0.00% on Oct-08	-133.87%	-16.73%	-19.00%
Safari 3.2	0.00% on Oct-08 & more	385.11% on May-09	2,032.98%	254.12%	337.00%
Internet Explorer 8.0	0.00% on Oct-08	1,081.03% on May-09	2,112.07%	264.01%	80.00%
Safari 3.1	-66.17% on May-09	0.00% on Oct-08	-334.77%	-41.85%	-50.00%
Firefox 2.0	-24.97% on Feb-09	0.00% on Oct-08	-97.57%	-12.20%	-14.00%