웹표준검사 W3C 웹문서 Markup검사

웹표준검사 W3C


웹표준검사 하는 방법에 대해서 알아봅시다. W3C 웹문서 마크업검사 웹표준검사를 통해서 모든 브라우저에서 재대로 표기가 되는지 자신의 블로그나 사이트를 확인 할 수 있습니다. 특별히 비용이 들지 않고 웹표준검사가 가능하며 에러나 경고가 발생했을 때 해결책도 확인해 볼 수 있습니다. 한글로 표기가 되어서 에러 내용을 쉽게 확인할 수 있습니다. 웹표준은 IE 브라우저의 활용도가 아주 높은 예전에는 크게 문제가 되지 않았지만 이제는 IE 인터넷 브라우저 이외에 파이어폭스, 구글크롬, 오페라, 사파리 등 다양한 브라우저의 활용이 높아지면서 여러 브라우저에서 모두 동일하게 표현되어야할 필요성이 생겼습니다. 티스토리 블로그도 XHTML 규격으로 만들어져 있죠. 때문에 어느브라우저로 보더라도 재대로 확인이 가능합니다. 그런데 이것저것 태그를 추가하다보면 보기에는 재대로 보일지 모르지만 에러가 늘어나고 일부 브라우저에서 재대로 표기가 안되거나 하는경우가 생기게 됩니다. 이럴때 W3C 마크업 검사로 제공하는 웹표준검사 사이트를 통해서 자신의 블로그나 사이트의 오류를 검진하고 해결 할 수 있습니다. 당연 에러의 내용은 다양하기에 모두 제가 설명하지는 못합니다. 다만 자신의 블로그의 웹표준검사를 통해서 자신이 잘못넣어둔 부분을 확인하고 특정 브라우저에서 안뜨는일이 없었는지 확인하는 시간을 가지시기 바랍니다.


웹표준검사 방법


IT, 웹표준검사, W3C, 웹문서, 마크업 검사, 마크업, markup, XHTML, 파이어폭스, 구글크롬, 오페라, 사파리, 티스토리, 블로그팁


http://validator.kldp.org/

위 링크에서 웹표준검사가 가능합니다. 한글로 나오기때문에 크게 어렵지 않게 사용이 가능하죠. 웹표준검사를 해야하는 이유는 스킨을 마음껏 수정이 가능한 티스토리등의 블로그에서 광고나 임의로 넣은 스크립트들이 문제 없이 동작하는지 그리고 모든 인터넷 브라우저에서 문제없이 동작하는지 여부를 확인이 가능하기 때문입니다. 티스토리는 기본스킨을 쓰면 XHTML 1.0 Transitional 에 맞게 제작되어 있습니다. 스킨의 skin.html 파일을 확인해보면 첫부분에 보통 이부분이 선언되어 있죠. 생각해보면 XHTML 문법에 맞게 스킨을 제작했다고 첫부분에 명시를 해놓고 사용자가 광고를 넣거나 태그를 임의로 넣거나 해서 이부분이 맞지 않게 되는경우가 많죠.

제가 블로그 팁을 적을 때 XHTML 과 CSS 를 구분해서 적어두는 이유도 이때문입니다. XHTML 은 호환성에 따라서 Transitional 과 Strict 로 크게 2가지로 나뉩니다. XHTML 1.0 Transitional 는 호환성을 어느정도 갖추고 있기에 <center> 등 몇가지 이제는 없어질 태그들에 대한 호환성을 가지고 있으며, XHTML 1.0 Strict 는 좀 더 엄격하게 XHTML 이 적용되어서 앞으로 없어질 태그들에 대한 내용이 없는 규격입니다. 티스토리는 과거 태그의 호환성을 위해서 XHTML 1.0 Transitional 로 되어있죠.

XHTML 이라고 해서 크게 어려운게 아닙니다. 우리가 보통 알고 있는 태그에 열었으면 꼭 닫아야 한다는 절대적인 규칙이 적용되며, 구조와 스타일이 구분되어야한다는 것이 조건입니다. 크게 문제가 될만한 부분들을 생각해보면 <br> 태그는 <br /> 로 써야하고 , <span> <div> <p> 태그에 스타일을 넣으면 안된다는 점. & 를 &amp; 로 바꿔놓아야한다는점 등이 있죠. 대부분 티스토리 스킨에는 반복되는 부분이 많기에 몇몇 에러만 잡아주어도 에러를 많이 잡을 수 있죠.



IT, 웹표준검사, W3C, 웹문서, 마크업 검사, 마크업, markup, XHTML, 파이어폭스, 구글크롬, 오페라, 사파리, 티스토리, 블로그팁


씨디맨의 컴퓨터 이야기 블로그의 XHTML 에러를 검사해봤습니다. 에러 0 으로 모두 잡혀 있는 모습이네요. 근데 최근에 티스토리에 사이드바의 모듈을 저장하는게 생겼는데 이부분에 & 가 원래대로 돌아가는 문제가 있네요. 때문에 에러를 모두 잡아 둔 상태에서 사이드바의 다른 항목 수정시 이부분이 원상태로 복구가 되어서 에러가 다시 생기곤 하네요. 티스토리에 이건 건의를 해봐야할듯하네요. 에러를 다 잡은 모습을 보니 뿌듯하기도 하고 앞으로 글을 적을 때 조금 더 신경을 써서 적어야겠다는 생각도 드네요. 웹표준검사를 미뤄두셨던 분들은 한번씩 검사를 해보시고 심각한 ERROR 부분은 꼭 체크해서 수정을 해보시기 바랍니다.

경고 같은 경우는 그냥 넘겨도 되는 경우도 있기에 크게 걱정은 안해도 되지만, 에러 같은 경우에는 해결 할 수 있으면 해결을 하는게 좋겠죠. 대부분 반복되는 내용이 많기에 몇개의 에러만 해결해도 에러가 확 줄어드는걸 볼 수 있습니다. 에러가 나는 부분이 뷰애드나 몇몇 수정을 하지 못하는 부분에서 나는경우 해결을 할 수 없습니다. 그렇다고 해당 코드를 내려버릴 수 는 없으니까요. 하지만 에러가 어디에서 나타나는지 알고 있는 상태에서 에러가 나는것과 에러가 왜 나는지 모르는 상태에서 에러가 나타나는건 상당히 큰 차이가 있습니다. 자신의 블로그를 꾸미는것도 중요하지만 올바르게 꾸미는 방법에 대해서도 많이 습득하시기 바랍니다.

에러 해결에서 너무 어려우면 저에게 질문도 해주시구요. 글 읽어주셔서 감사합니다.
신고

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 쿠쿠양 2011.02.04 19:17 신고

    오 좋은 사이트네요+__+
    정보 감사드려요~

    perm. |  mod/del. |  reply.
  2. kimatg 2011.02.04 21:52 신고

    ㅎㅎ 한때 이것때문에 골치아팠었는데 역시 한번 제대로 손 봐놓고 글 작성할때마다 XHTML문구 신경써주면 valid상태 유지하는것도 그리 어려운 일은 아니죠 ㅎ

    저도 오늘 이 글 본 덕분에 올만에 체크해보고 에러 하나 나는거 잡았네요 :)

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.02.05 12:49 신고

      kimatg 님 블로그 너무 디자인 이뻐요. 볼때마다 감탄한다는 새해 복 많이 받으세요. ^^

      perm. |  mod/del. |  reply.
  3. UO런치패드 2011.02.05 17:17 신고

    티스토리는 오류를 잡을 생각이 없는 것 같아요.
    http://dis1.tistory.com/237 고객센터에 두 번이나 문의를 했는데, 안 고쳐져요.

    스킨을 다른 걸로 바꾸고 싶은데, 바뀐 스킨을 다시 웹표준에 맞추려면 생고생을 해야해서 망설여져요.:

    perm. |  mod/del. |  reply.
  4. 2011.02.08 00:23

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.02.08 01:18 신고

      간단히 설명드릴께요.

      물론 XHTML 로 모두 잡는게 간단한 작업은 아니지만 이해를 해두시면 생각보다 쉬울 수 도 있어요.

      모든 태그는 소문자로 쓰여야한다.
      모든 태그는 반드시 닫아야한다.
      모든 태그의 속성은 반드시 존재해야한다 (필수속성)
      모든 속성값은 따옴표로 묶여 있어야한다.

      이정도일듯해요. 이것만 지켜도 에러를 거의 다 없앨 수 있어요.

      예를 들어볼께요 실제로 블로그의 에러 첫줄인데요.

      <table border=0 width=100% cellspacing=0 cellpadding=0>

      이부분에서 잘못된 부분은 border=0 ,width=100%, cellspacing=0 , cellpadding=0

      이부분이예요. HTML 상으로는 크게 문제될 부분은 아니지만 XHTML 에서는 잘못된 부분이예요.

      <table border="0" width="100%" cellspacing="0" cellpadding="0">

      이렇게 해주셔야해요. 그리고 좀 더 깊히 들어가면 table 를 꼭 써야하는 부분이 아닌 이상은 div 로 만들어주시는게 좋아요. 테이블처럼 틀인 형태인 경우에는 div 로 하면 오히려 번거로울 수 있고 이럴때는 table 태그를 써야하지만 그렇지 않은 경우는 div 로 해결되기 때문이죠.

      <br> 은 <br /> 로 해주셔야하구요.

      <br/> 보다는 <br /> 가 좋습니다. 공백을 중간에 넣은 이유는 하위 브라우저의 호환성 때문입니다.

      이외에 <P> 이런건 <p> 이렇게 소문자로 모두 수정해주시면 되구요.

      지금 에러가 대부분 그런 에러입니다. 이런부분만 잡아도 에러를 1자리수로 줄일 수 있을겁니다.

      그 이외에 잡을 수 없는 에러로는 뷰애드박스 에러가 있어요. 이건 광고 자체에서 나는 에러라서 잡지 못하실거예요. 저는 떼어버려서 해결했지만..

      근데 꼭 떼어내지 않고도 해결하는 방법이 있긴합니다.

      사실 모두 다 하려면 상당히 시간이 걸리는 작업이니 하루에 1개 정도씩만 잡아보세요. 대부분은 반복문 안에 들어가는 내용이기에 몇개만 잡아도 에러가 많이 줄어드는걸 볼 수 있으실겁니다.

      perm. |  mod/del. |  reply.
  5. 윈컴이 2011.03.19 13:03 신고

    저는 너무 오류가 많은 듯하네요 --;
    한번 고쳐야하는데 엄두가 안나군요..;;

    perm. |  mod/del. |  reply.
  6. sadasd 2011.09.03 21:27 신고

    사장님 스톰 입니다 (20방/50방/100방 다 있음)
    ★★ k7426.com★★사장님 안녕하세요
    저의가 新 오픈한 스톰2 입니다 .
    가입시 체험은 당연히 가능 하구요
    다이는 20원방 50원방 100원방 세종류로 나뉘어져 있구요 ...

    실게임 하시면 20%추가 드립니다.
    주말 마다 평일마다 다양한 여러 가지 이벤트도 합니다.
    저의 사이트는요 ★★ k7426.com★★ 여기로 가입 하시면

    감사 합니다!

    perm. |  mod/del. |  reply.
  7. 씨디맨 2015.04.13 17:25 신고

    에러 언제 둘번 잡아드릴까요?

    perm. |  mod/del. |  reply.
  8. 쿠쿠양 2015.06.27 06:23 신고

    오 줗은 사이트네요+ㅡ+
    정보 감사드려요~

    perm. |  mod/del. |  reply.