네, 드디어 W3C 의 표준을 준수하는 XHTML 1.0 Strict 로 완벽하게 탈바꿈하였습니다.
그간 항상 마음한구석에 찜찜함을 주었던 지나친 테이블 기반의 디자인을, 테이블을 모두 걷어내고 CSS 로만 구성하였습니다.
물론 W3C 의 Validator 도 무사 통과.
한두어시간이면 될까? 하고 시작했었으나 IE 와 모질라의 서로다른 처리방식때문에 갖은 고생을 하였습니다. 게다가 맥유저를 위해 사파리로 잘 보이나 테스트하느라 더욱 많은 시간이 소요되었습니다.
사파리는 표준임에도 불구하고 지원하지 않는 몇몇 태그때문에 많은 고생을 하였습니다만 폼에 백그라운드 이미지가 들어가지 않는것만 빼고는 거의 비슷하게 구현하였습니다.
왜 이런 고생을 한건가요? 라는 질문을 해온다면 대답은 명확합니다.
이것이 바로 "표준"이기 때문입니다.
HTML Tidy가 한글지원이 되지않아 "인간 Tidy"가 되어 코드를 최적화하였습니다. 이런 훌륭한 프로젝트에 참여한 한국인 개발자가 한명도 없다는 사실이 슬프게합니다.
트랙백
- w3c markup validation - hopefull.net
- W3C Validated. - Moon in Melbourne
- XHTML 1.0 reference with examples - 날밤
- 결국 포기, W3C 인증. - Moon in Melbourne
- 요즘 써본 프로그램 & 서비스 - 오리대마왕님 집

코멘트
어떻게 하면 "표준" 으로 만들까 고민하고 있는데.. 한수 배울수 있을까요?
W3C 만으로 충분한가요? 조언이 될만한 레퍼런스 사이트 라도 알려주시면 고맙겠습니다. ^^
아! likejazz 사이트도 분석(?)을 해봐야 겠네요.
물론 W3C 가 가장 도움이 되었지만 실질적인 도움이 되었던건 TopStyle 이라는 훌륭한 CSS 편집도구였습니다. 이 툴이 없었다면 일일이 찾아보느라 더 많은 고생을 했을거같네요. http://www.bradsoft.com/topstyle/ 가격이 부담스럽긴하지만 Lite 는 무료이용가능하니 받아서 한번 사용해보세요.
사파리 사용자로써 재즈님 사이트가 이제 얼마나 깨끗하게 보이는지 감격입니다. 저도 W3C 검사기로 제 사이트의 인덱스 페이지를 점검해 본 후, 불합격 판정을 받고 놀란 나머지(저딴에는 표준 지킨다고 했는데에도) 꼼꼼히 코딩을 다시 보고 수정해서 인덱스 페이지만 W3C 통과 인증을 받았습니다. 나머지 페이지들은 천천히 해나가려구요. 저도 W3C XHTML 1.0 통과 딱지를 붙였습니다 ^^
딱지붙히심을 축하드립니다 ^^ 1% 가 채안되는 사파리 유저를 위해 2.141592 배 더 노력한것이 마음에 드셨으면 좋겠습니다.
Validator를 통과하는 것은 웹브라우저에서 잘 보이게 하는 것보다 훨씬 많은 노력이 필요한 일인데 해내셨네요. 통과 축하드립니다. 대단한 일을 하셨네요 ^^
IE 와 모질라간에 width, height 처리 방식이 다른것은 ari 님의 블로그 css 섹션에서 도움을 받았습니다. 덕분에 삽질을 조금 덜 하게 되었습니다 ^^
항상 저 W3C 배너가 무슨의미일까 궁금하며 지나쳤는데... 그런 자랑스러운 의미가 있었네요.. 알고보니까 무지 부럽네요. 이렇게 멋진 페이지가 표준까지 지켰다니 불공평해요!! ^^;
사실 제가 좀 멋있긴하죠. 'bout Me 섹션에 가시면 더 멋진 사진을 게재해두었으니 한번 보세요!
아... 부럽습니다. 정말. ㅠ_ㅠ
축하드립니다. 저도 언젠간 +_+!
likejazz님도 유명블로거인 만큼 많은분들이 자극받아 수정하겠네요. 일단 저부터두 마음이 동하구요. 그런데 전 설치형 툴을 쓰는데 스킨만 수정해서는 않되겠죠? likejazz님처럼 전체를 모두 표준에 맞게 해야만 가능할테지요. 흠;;
MT 를 위시한 외국의 설치형 툴은 대부분 표준을 완벽하게 준수하고 있습니다만 태터는 아직 표준과는 거리가 먼것같습니다. 물론 파이어폭스에서 잘 보이게 하기 위해 꾸준히 노력하는점은 인정하지만요.
두번 남기기 좀 그렇지만,, 오마이 갓. 무심코 검사해봤는데 전에 쓰던 스킨이 통과해버렸네요. -_-! 이런 기쁠때가 ㅠ_ㅠ
열번남기셔도 괜찮습니다 ^^ 스킨이 통과되었다니 축하드립니다. 아마도 HTML 4.01 Transitional 이겠죠 ? 참고로 XHTML 1.0 Strict 는 html 내에 디자인관련태그가 전혀 들어가서는 안되는 가장 하드코어한 형태입니다. 모든 디자인관련요소가 css 로만 구성되어야 하지요. W3C 문서를 읽어보시고 XHTML 1.0 Strict 로 스킨만들기에도 한번 도전해보세요.
저는 블로그 제목에서만 16개가 걸리는군요.
보니까 특수문자 & 에서 걸리네요. 쿨럭. 그외엔 너무 많아서 어디서 부터 손봐야할지 -_-; 파폭과 익스에서 깨짐없으니 일단 그냥 써도될듯..
& 는 & amp; 로 변경하시면됩니다. 하지만 태터자체가 표준과는 거리가 멀어 스킨편집만으로는 힘들것 같습니다. 꾸준히 개발자에게 건의해보세요. 초기버전을 내놨을때도 모질라에서 잘 안보이던 오류들이 수정된바 있으니 표준에도 많은 관심을 가지리라 생각합니다.
저도 W3C 표준을 지키겠다고 발버둥 치다가 귀차니즘으로 포기한 사람으로서, 저 노란 딱지 하나 붙어있는게 얼마나 많은 노력과 고민의 산물인지를 알고 있습니다.
정말, 대단한 일 하신겁니다.
대부분 한글을 주 언어로 사용하는 사이트들 중에 W3C표준을 통과한 사이트가... 1%나 될까요? DTD조차 없는 사이트들도 수두룩 하니까요.
저도 자극받아서 다시 노력해봐야 겠습니다.
별것도 아닌것 같은데 Validator 가 오류를 뱉어낼때는 정말 가슴이 아팠습니다. 덕분에 고생은 많이 했지만 뿌듯함을 느낄수가 있네요. 혁상님도 조금만 수정하시면 노란딱지를 붙이실 수 있을것 같습니다 ^^
축하합니다! :) 사실 validator 통과하는 건 어렵지 않고, 오히려 실제 보이는 걸 똑같이 하는 게 훨씬 힘들죠. (직접 테스트해 봐야 하는데 저는 사파리가 없어서... -_-) 뭐 요즘은 XHTML 1.x 문서를 왕창 만들다 보니까 뭐가 문제가 될 수 있는 지 대충 감이 잡히더군요.
저도 당연히 사파리를 가지고 있지 않습니다. http://www.browsercam.com/ 사파리를 포함한 다양한 브라우저에서 보이는 화면을 캡처해주는 서비스를 제공하고 있습니다. 저도 여기를 유용하게 이용했지요. 다만 trial 서비스는 8시간만 이용 가능해서 ID 를 5개 넘게 만들어서 이용했네요.
혹시 왜 맥에서는 인터넷 익스플로러를 사용하지 않을까 피씨 사용하시는 분들이 의문을 가지실까봐 몇자 적습니다. 물론 맥 버전 있습니다. 마이크로소프트는 애플이 사파리를 만들자 얼마 지나지 않아서 그때까지도 피씨버전의 완성도를 따라가지 못한 매킨토시버전의 인터넷 익스플로러 업데잇을 중단했습니다. 저를 포함한 많은 맥유저들이 마이크로소프트와 선의의 경쟁을 기대했는데 실망만 했죠. 그 이후로 대다수의 맥 오에스 텐 사용자들은 사파리를 사용하고 있답니다. 지금 현재 사파리 버전은 1.2.3이고, 내년에 출시될 다음 세대 맥오에스텐인 타이거가 나오기 전까지는 사파리는 그렇게 큰 변화가 없을 것 같습니다.
ul에 기본으로 붙는 여백을 줄이기 위해 W3C 표준을 참조하면서 스타일시트를 고친 적이 있었습니다. 브라우저사진기로 찍어 보니까, 사파리, 불여우에서는 제대로 보였지만 오페라에서는 어긋났고, 인터넷 익스플로러에서는 링크들이 아예 잘려서 보이더군요. 저의 한산한 블로그에도 꾸준히 보시는 피씨 사용자 한분이 있다는 것을 알기 때문에 아예 li를 쓰지 않는 것으로 결론을 본 적이 있지요.
작은 배려가 있기에 아직 세상은 따뜻하구나 다시 한번 생각해 봅니다.
어설프게 만들다만 Microsoft 도 나쁘지만 불쑥 브라우저를 직접 내놔버린 Apple 도 곱게 볼순 없을것 같습니다. OS 를 만드는 회사가 직접 애플리케이션 시장에 뛰어드는것은 반칙행위나 다름없으니까요. 타이거 시연회에서 선보였던 대쉬보드도 그래서 논란이 많았던걸로 기억합니다. Real 과 Apple 의 분쟁을 보면서 Apple 도 결국 Microsoft 처럼 독점적지위를 갈망하는 이익을 추구하는 회사일뿐이구나 라는 생각이 듭니다.
아, ul 태그의 여백문제는 IE 와 모질라간에 width 처리가 달라서 발생하는 문제같습니다. IE 는 width 에 margin 을 포함하지 않거든요. 저도 이문제때문에 많은고민을 하였습니다. 결국 width 와 margin 은 같이 쓰지 않는 방향으로 결론지었지요. ari 님의 블로그에 간단한 팁이 있네요. http://sparcs.kaist.ac.kr/~ari/each/article.each.204.html
LikeJAzz 님은.. 이 블로그 솔루션을.. 공개하라! 공개하라! +_+;
공개하는건 어렵지않은데 공개를 위해 소스를 정리할 생각을 하니 앞이 깜깜합니다 ^^
maybe 공언; (태클아님;)
지적감사합니다. 수정하였습니다.
굿잡.... ㅋㅋ
감사 :D
저도 용기를 얻어 table을 걷어치우고 있는 중입니다. ^^;
오늘 하나를 고쳐 보았는데 IE와 FF에서 다르게 보입니다. 왼쪽메뉴를 float로 정의하는 간단한 two column layout인데 IE에서는 원하는대로 보이는데 FF에서는 float한 메뉴가 테두리밖으로 나가 들어올 생각을 안합니다. 집나간 이 놈 좀 잡아주세요. ㅠㅠ
=> http://soandso.net/blog/about.html
벌써부터 컨설팅의뢰가 들어오다니, 이놈의 인기는 정말 ..
받아서 조금 수정해보았는데 float 는 저도 사용하지 않아서 속성을 이해하기가 힘드네요. 저같은경우는 position: absolute 로 잡고 좌표를 지정하는방식으로 해결하였는데 소소님은 브라우저 사이즈에 따라 좌표가 틀려지니 그 방법은 곤란할것 같네요. 아, 그리고 width 와 margin, padding 은 같이 사용하시면안됩니다. IE 와 모질라간에 width, height 계산방식이 틀리거든요.
http://sparcs.kaist.ac.kr/~ari/each/article.each.204.html
신경쓰게해서 죄송합니다. ^^
일단 집나간 놈은 Ari님의 CSS꽁수로 잡아 넣었습니다. 이젠 가운데 정렬이 안되는군요. ㅠㅠ 아~~~ 멀고도 먼 css
고생많으십니다. 표준이 그리 쉽게 되는건줄 아셨습니까 ? 흐흐
흐음.. 이런 저도 알바가 끝나고 놋북을 사는데로..
홈피 개편 작업을 해야 겠네요...
컴터도 없고.. 회사에선 포트 다 막혔고... ㅡ.ㅜ
손도 못대고 있습니다.. ㅜ.ㅜ
그런데.. 테이블 기반으로 가지 말라고 하는데..
달력 같은건 어떻게 해야 하나요? ㅡ.ㅡ;;;;
달력은 백그라운드를 미리 그려놓고 그 위에 위치를 잡아 날자를 찍어나가는 방식으로 해결할수 있지 않을까요 ?
테이블이라는게 구조적인 데이타를 표현하기 위한것이니 구조적인데이타를 위해서는 테이블을 사용해도 무방할것 같습니다.
노란딱지 붙였습니다!
물론 테이블은 아직 버리질 못해서 반쪽짜리 딱지인 듯한 기분도 들지만, 차차 고쳐나가 볼 생각입니다.
처음에 100개 넘는 에러를 봤을 땐, 정말 막막 하더군요.
표준클럽 가입을 축하드립니다 :)
흠.. 테스트 중인데.. html4.0 과 xhtml1.0 의 차이점중...
xhtml 에서 span 은 높이와 너비를 줄수가 없군요...
테이블을 div 5줄에 span 을 7개씩 넣고 만들려고 했는데...
구조적인 데이타를 표현하는데 굳이 테이블을 거부하고 div 로만 구현할 필요가 있을까요 ? 원래 테이블이 그런 데이타를 표현하기위함이니 꼭 필요한곳에서는 사용해야한다고 생각합니다. span 은 사이즈, 위치등을 지정할수 없습니다. xhtml 에서 변한게 아니라 html 4.0 부터 그랬었어요 ^^
아.. 구지 바꾸려는게 아니고.. 그냥 해보는겁니다.. ^^
HTML4.0 에서는 span에 width 가 먹던데요..
제 블로그에 오시면 확인 하실수 있습니다.. 두개의 소스가 내용은 같은데.. 위쪽 <!DOCTYPE 선언부만 드르거든요...
아 그런가요 ? 저도 잘못알고 있었네요. 한번 다시 살펴봐야겠습니다. 이왕수정하실꺼면 XHTML 1.0 을 추천해드립니다. 최신규격을 적용하는게 좋겠지요.
앗.. 태그가 짤렸군요...
< ! DOCTYPE 태그 내용이 다르다고 썼습니다.. ^^
<!DOCTYPE 같은 문자열이 표현되도록 수정되었습니다. 아울러 http 로 시작하는것은 자동으로 링크가 걸리도록 수정하였습니다.
움.. 이거에 관한 질문은 아니지만 -_-;;;; 이히힛;
재즈님은 링크가 걸린 문서앞에 화살표 이미지가 나오잖아요..
그게 에디터에서 태그를 썼을때도 마찬가지겠죠?
그 구현방법을 가르쳐주실수 있나요? =_= 제가 링크를 많이 이용해서말이에요. 헷;;
음, 일일이 링크앞에 화살표이미지를 달아주셔야합니다. 제 경우는 블로그를 만들때 그런기능을 집어넣었지만 일반적인 설치형블로그는 그런기능을 지원해주지않습니다.
ㅜ_ㅜ 그렇군요. 답변 감사합니당. ^-^