어제 오후 이웃 블로거분들과 블로그 운영에 대한 이야기를 주고 받던 중 문득 웹표준(XHTML)에 대한 이야기가 나왔었습니다. 그래서 문득 제 블로그에 대해서  웹표준 유효성 검사를 해보니 에러 130여개를 포함하고 있더군요 ^^;; 자신의 블로그 등의 웹표준 준수 여부를 확인해 보고 싶으시다면... 아래 링크의 사이트를 방문하셔서 주소를 입력하면 결과값과 어느 부분에서 에러가 난건지 표시됩니다.

> 웹표준(XHTML) 유효성 검사 : http://validator.kldp.org/

 130개 정도의 에러를 보고는 그냥 지나칠수가 없어서 위 페이지에서 말하는 부분들을 하나씩 검토하며 수정을 했습니다. 의외로 금방금방 진행이 되더군요. 처음에 목표는 50개 이하로만 잡자였는데 5분 정도 작업하니 어느 순간 40개 정도의 에러만 표시되었습니다. 5분만에 저런 성과(?)를 보니 집착하게 되더군요. 그런데 아무리 해도 고쳐지지 않는 부분이 있었습니다. 결론부터 말씀드리면 10여개는 어쩔 수 없이 에러로 잡히게 되어 있습니다. 예를 들어 XHTML 에서는 embed 를 object 로 묶어서 써야 하는데... 다음뷰 추천 버튼은 embed 태그만 사용하거든요. 이 외에도 스킨상으로는 수정할 수 없는 몇몇 부분이 있습니다.  참고로 아래는 현재 제 블로그의 웹표준 유효성 검사 결과화면입니다. 선방 ㅎㅎ



 각설하고... 나머지 부분은 도대체 뭐가 문제인가싶어 이리저리 파헤쳐보다가 문득 작성했던 포스팅의 HTML 을 IE8 에서 확인했는데 "OMG" 생각지도 못했던 곳에서 황당스럽게 문제를 발견했습니다. 위지윅 모드에서 우측 상단에 있는 HTML 항목을 체크하니 수 많은 태그들이 "대문자" 로 표기되거나 속성값이 ' 혹은 " 로 묶여야 하는데 그렇지 않더군요. 본문의 후반부에 웹표준 문법 중 실수하기 쉬운 부분은 따로 언급하겠습니다.

 그래서 원인을 찾았다고 생각하고 HTML 에서 수정을 한 뒤 아무 생각없이 HTML 체크를 해제. 즉, 위지윅 모드로 돌아온 후 글을 저장했습니다. 그리고는 다시 위 페이지에서 확인을 했는데... "얼라리요?" 

 분명 소문자로 수정한 태그들이 대문자라며 또 오류로 표시되고 있더군요. 혹시 스킨의 소스 중에 문자를 대문자로 표시하게 하는 부분이 있어서 그런가 싶어 관련 부분은 다 제거했지만 역시나 마찬가지... 혼자 고민하다가 씨디맨에게 관련해서 테스트를 부탁, 또 황당스럽게 문제점을 발견했습니다. IE8 이 이 문제의 원인이었습니다. -_- 왜 파이어폭스나 크롬플러스로 테스트할 생각은 못한건지 ^^;; 순간 헛웃음만 나오더군요. 파이어폭스 혹은 크롬플러스 등과 같은 브라우져에서는 이런 문제가 발생하지 않습니다.


웹표준(XHTML)이 지켜지지 않는 IE8

 문제가 발생하는 부분은 이렇습니다. 우선 간단한 예시로 아래 영상을 봐주세요. 보시면 이해가 빠를 듯 합니다.

 

 글자를 굵게, 플러그인에서 '이전 글 넣기', 등록한 서식을 불러와서 사용 등 티스토리 메뉴 자체를 이용하는 경우 이런 문제를 쉽게 확인할 수 있었습니다. 위에서 보여드린 것 외에도...

 <div>, <center>, <span>, <b>, <h2>, <h3> 등의 태그들도 HTML 과 위지윅 사이를 전환하면 '대문자'로 변하더군요. 또한, target="_blank" 처럼 ' 혹은 " 와 같은 인용부호로 속성값이 묶여야 정상인데... 이런 부분이 누락되는 문제도 있었습니다. 얼추 제가 발견한건 이 정도이지만 다른 태그들도 입력해보면 유사한 문제점을 보이는 경우가 분명 더 있을거라 생각됩니다.

 이 내용을 이렇게 포스팅하는 이유는 예약발행시 다음뷰 채널 초기화 문제, 언제까지? 포스팅처럼 티스토리측에 관련 내용을 보내기 위해서입니다. 이미 관련 내용은 보낸 상태구요. 이 문제가 결코 우습게 넘길만한 일은 아니라고 생각합니다. 개인적으로는 다음뷰 채널 초기화 문제보다 훨씬 심각하다고 생각되는데... 관련된 곳에서 좀 더 정확히 문제를 파악하고 조치를 취해주길 바랍니다.


실수하기 쉬운 웹표준(XHTML) 바로잡기

 블로그를 운영하는 분들의 스킨을 살펴보면 아마 대부분 아래 사진과 같은 문구가 상단에 적혀 있을겁니다.



 XHTML 웹표준을 준수하겠다고 선언하는 내용인데요. 도대체 웹표준은 무엇이며, 이를 준수할 경우 장점 등이 궁금하신 분은 여기를 참고하세요. 지금부터 웹표준에 어긋나는 사항을 바로잡고자 하는 분들을 위해 몇몇 내용들을 소개하겠습니다. 저도 많이 그리고 깊이 하는 지식이 아닌지라 에러로 표시가 많이 되는 부분들 중심으로 몇가지 다룰게요~

태그는 정확하게 중첩되어야 함!

<div><li>...</div></li> (X)
<div><li>...</li></div> (O)

※ 위 예시처럼 태그가 중첩될 때는 그 순서에 주의하셔야 합니다.

모든 태그와 속성은 '소문자' 로!

<STRONG>...</STRONG> (X)
<strong> ... </strong> (O)

모든 태그의 속성값은 ' 혹은 " 로 묶어야 함!

<div ... align=center> (X)
<div ... align="center"> (O)

종료 태그가 없는 경우 반드시 '/' 로 닫아야 함!

<meta name="Location" content="South Korea"> (X)
<meta name="Location" content="South Korea" /> (O)

& 대신 &amp; 를 사용해야 함!

...type=100&sort=1&page=1&view=issue... (X)
...type=100&amp;sort=1&amp;page=1&amp;view=issue... (O)

script 와 style 태그에는 type 속성이 포함되어야 함!

<script>...</script> (X)
<script type="text/javascript"> ... </script> (O)

 위 내용들 외에도 훨씬 다양한 표준 문구들이 있습니다. 검색을 해보시면 관련된 문구를 더 많이 접하실 수 있을겁니다. 여러분이 운영하는 공간은 웹표준 유효성 검사에서 어느 정도의 결과값을 보이나요? ^^ 조금씩 틈틈히 수정해 보세요~
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 유쾌한 인문학 2010.05.06 06:14 신고

    아악 전 52개 오류에요..

    근데 밑에 보니.. 음... 전.. 링크 걸어놓은것들이 다 오류로 나와요.. ㄷㄷㄷㄷㄷㄷ

    에이 수정따윈 포기 하겟씀..ㅋㅋㅋ

  3. BlogIcon *저녁노을* 2010.05.06 06:21 신고

    ㅎㅎ감사히 보고 갑니다.

  4. BlogIcon 악랄가츠 2010.05.06 06:23 신고

    깍! 오늘은 제가 약한 부분이네요! ㄷㄷㄷ
    맨날 사용하는 간단한 명령어만 쓰다보니,
    더이상 발전이 없는 거 같아요! ㅜㅜ
    좀 더 공부해야되는데 흑흑..

    457 Errors, 46 warning(s)
    이건 싸우자는 건가요? ㄷㄷ

  5. BlogIcon 펨께 2010.05.06 06:34

    저도 한번 체크해봐야 할 사항이네요.

  6. 2010.05.06 07:16

    비밀댓글입니다

  7. BlogIcon 카라의 꽃말 2010.05.06 07:47 신고

    아공.. 전 무슨 말인지...ㅋㅋㅋ
    시간날때 체크해볼게요^^ 즐거운 하루 되시고요! 파이팅^^

  8. BlogIcon NoSyu 2010.05.06 08:15

    반갑습니다. 밸리를 타고 왔습니다.
    이 검사의 한국어 버전이 있어 소개합니다.
    http://validator.kldp.org/

  9. BlogIcon MastmanBAN 2010.05.06 08:52 신고

    IE가 웹표준을 지키지 않는것은 어제오늘에 일이 아니죠. 그냥 그려러니 하고 사용합니다. ㅋ

  10. BlogIcon 희주 2010.05.06 09:36

    xhmtl만이 웹표준은 아니지요.
    xhtml에서 태그는 소문자로 써야하는것이 맞습니다 xml의 문법을 따르기때문인데요
    일반 html모드에서는 대문자로쓰든 소문자로 쓰든 상관하지 않습니다.
    html5에서도 마찬가지구요. 속성을 따옴표로 묶는것도 권장사항이죠.
    참고로 target="_blank" 같은것도 xhtml strict모드에서는 경고가 나오죠.

    • BlogIcon 희주 2010.05.06 11:23 신고

      그러니깐 이건 무조건 IE의 문제가 아니란겁니다. (굳이 따지자면 IE에서는 HTML을 파싱하면서 태그를 처리할때 대문자로 처리하긴 합니다.. xhtml권장사항과는 반대가 되긴하죠.)
      웹표준은 권장사항이지 100%지키라는게 아닙니다. 단순 일반문서라면 100%에 가깝도록 해야겠지만 크로스브라우징이랄지 최신기술이나 웹프로그램을 위해선 포기해야 할부분도 있는거죠~
      웹표준은 문서구조에 의미있는 적절한 마크업을 하여 시멘틱한 문서를 만드는것이 큰 목적이지 이렇게 대소문자나 속성에 연연할 필욘 없다고 생각해요.

    • BlogIcon LiveREX 2010.05.06 16:04 신고

      어이쿠~ 좋은 말씀 감사합니다 ^^

      대/소문자만 가지고 말씀드린건 아니예요~
      대표적으로 저런게 있더라고 적은거죠 ㅎㅎ
      권장사항이라도 지키고 싶은게 사람마음이잖아요~

    • BlogIcon 씨디맨 2010.05.06 18:22 신고

      IE8 잘못이 아니라고 하긴 하지만 그래도 소문자로 나오거나 대문자로 나오는걸 설정할 수 있는 부분이 옵션으로 제공되었으면 어땟을까 생각은 들어요.

      그리고 이지웍모드에서 <B></B> 대신 <strong></strong> 으로 된다거나 하면 더 좋을듯하구요. 근데 이지웍모드에 볼드꾸미기 버튼을 눌러보면 <span style="font-weight: bold;"> 이렇게 들어가버리네요. 티스토리 글 꾸미기 버튼 부분도 좀 개선이 되면 좋겠어요. 갑자기 이야기하다가 다른이야기로 마무리 해서 죄송해요 ㅋ

  11. BlogIcon G-Kyu 2010.05.06 10:51 신고

    오옷....배워야지 배워야지 하고 미뤘던 html부분이네요!
    마지막에 좋은 팁 얻어 갑니다 &&

  12. 4천만 2010.05.06 10:54

    와우. ms 이거 참...
    갈수록 신뢰도가...
    하긴 뭐 초창기 html 쓰던 부터,
    기준 않지키기로 유명한 브라우져 였지만...
    가끔 생각 합니다.
    독점이 문제인가?
    그걸 인정하고 따르라는 멍청이들이 더 문제 인가?
    전 급 오페라로 답글 달고 있습니다. 쿨럭 ㅡㅡ;

  13. 불여우도 잡히는데요 2010.05.06 11:02

    티스토리 블로그인데도 20개가 잡히면 티스토리가 안 지키는건가요??
    &, >._ ," 등에서 에러가 나오는데 정작 어떻게 고쳐야하는지는 몰라서.. --;
    어... 근데 전 티스토리 블로그를 처음부터 불여우로 했는데 왜 에러가??

    • BlogIcon LiveREX 2010.05.06 16:02 신고

      님의 블로그 스킨에 해당 되는 내용이 포함된 것 중 제대로 지켜지지 않는 부분이라면 수정하시면 되구요

      본문에서 12개 표시되는것도 파폭에서 검사한겁니다.. 사용자가 수정할 수 없는 부분도 있어요~

  14. BlogIcon 밋첼™ 2010.05.06 12:25 신고

    이런 저런 것들이 싫어서도 언제부턴지 IE를 거의 안쓰고 있답니다.
    유독 대한민국에서는 IE 를 쓰게하는 페이지들이 있는데...
    그것 또한 마음에 안드네요.

  15. BlogIcon 유아나 2010.05.06 15:03 신고

    오 덕분에 이전글 삽입이라는 플러그인도 알게 됐어요. 그거 어떻게 하는 건지 궁금했는데
    이런 분이 인문학을 전공하셨다니 오

  16. 2010.05.06 15:17

    비밀댓글입니다

  17. BlogIcon andgoon 2010.05.06 18:17 신고

    잘 읽었습니다.~ 저도 한번 확인해 봐야겠네요...

  18. BlogIcon andgoon 2010.05.06 22:40 신고

    이럴수가..ㅠㅠ 파이어폭스로만 블로그 수정을 확인하고 접속했었는데 오늘 LiveREX 님의 글을 보고 IE8로 접속해봤더니.. 메인페이지에 오류가 떡하니 떠있네요... 아...이런..그래도 지금이라도 알게되서 다행인거 같습니다.!

  19. BlogIcon 둥2와 딸Ki 2010.05.12 20:53 신고

    정작 회사작업은 그리도 신경쓰면서 제꺼를 할려니 왤케 귀찮은것일까요. ㅠ

  20. BlogIcon liquidus 2010.05.24 15:18

    '85 에러, 36 경고' 라고 나오네요! 이럴수가 근데 봐도 전부 제가만든게 아니기때문에 어디서 잘못된건지

    모르겠네요.. ㅎ

  21. BlogIcon quarker 2012.02.08 22:22 신고

    오 포스팅할때 유용하겠네요 ㅎㅎ 크롬도 약간씩 이런 오류가 있더라구요. html 웹표준 안되는 건 빼고 수정해서 오류 5개 나왔습니다만... CSS 유효성 검사 해봤더니 얼마나 노가다 해야하는건지... 오류가 385개가 나오네요. 허걱....

댓글을 남겨주세요 :)




submit