티스토리 블로그 XHTML CSS 오류 잡기

티스토리 블로그 XHTML CSS 오류


티스토리 블로그를 현재 사용 중 입니다. 티스토리는 테터툴즈 기반의 블로그로 XHTML ,CSS 를 따르는 블로그이죠. 티스토리 블로그 팁을 가끔 쓰면서 가끔은 저도 게을러서 제 블로그가 오류가 있음을 알면서도 넘어갈 때 도 있었죠. 웹표준은 W3C 에서 제안하는 내용에 맞춰서 작업을 해야하죠. 자신의 블로그에 오류가 얼마나 많은지 검사를 해보신 분이 있는분도 있을테고 안해보신 분도 계실겁니다. XHTML CSS 오류를 어떻게 잡는지 한번 살펴보고 왜 오류 잡기를 해야하는지 알아봅시다.



티스토리 블로그 오류는 한번 체크를 반드시


티스토리 블로그 오류 체크는 한번씩은 해보아야합니다. 자신이 넣은 코드나 블로그 팁등이 뭔가 어긋나게 안맞게 되어있을 수 있기 때문이죠. 자신이 넣은 코드는 모든 브라우저에서 특별한 경우가 아니라면 모두 일관되게 보여야합니다. 만약 지원을 안한다면 빼버리는 등의 꼼수를 사용해서라도 지켜야하죠.

자신의 블로그에 오류가 많다면 특정 브라우저에서만 잘 보이고 다른 브라우저에서는 레이아웃이 어긋나보이거나 댓글을 달 수 없는 상태이거나, 사용자가 블로그로 들어 왔을때 지연시간이 발생한다던가 여러가지 문제가 생길 수 있습니다.



XHTML , CSS 오류를 검사해보고 자신의 블로그의 에러를 하나씩 잡아나가 봅시다. 완전히 에러를 없애진 못하더라도 심각한 에러는 고쳐둔다면, 만족할만한 성능을 블로그가 내어줄겁니다.



XHTML CSS 오류 보는법




위 XHTML , CSS 오류 검사 링크를 누른 뒤, 자신의 블로그 주소를 입력을 하고 검사를 합니다. Show Source 를 누르면 오류가 발생한 줄도 확인이 가능합니다.




XHTML 검사를 한 모습입니다. Show Source 를 해두면 해당 내용을 바로 볼 수 있습니다. 티스토리 스킨 자체에는 반복되는 부분을 나타낸 치환자 부분과 해석되는 부분등이 있습니다. 그런 부분들이 해석될 때, 나타나는 오류등을 진단을 합니다. XHTML 은 열고 반드시 닫아야한다는 원칙이 있죠. 그 부분을 어기면 위와 같이 오류가 나옵니다. 이 외에도 일일이 다 열거하기 힘들만큼 참 여러가지 오류가 있습니다. 오류가 나타난 줄을 확인 하고 해당 설명을 보면서 오류를 차근 차근 잡아가야합니다.



티스토리 XHTML CSS 오류 잡기위해 포기할 것들


티스토리 블로그를 기본스킨 즉 스킨 자체에는 XHTML , CSS 를 모두 완벽하게 체크를 했더라도 티스토리의 플러그인과 화면나타내는 구성등을 바꾸면 에러가 나는 부분이 있습니다.

댓글 이모티콘

댓글에 나타나는 글쓴이의 이모티콘을 나타나게 하면 해당 부분에 오류가 있습니다. 이부분을 나타나지 않게 하려면 이모티콘이 나타나지 않게 해야합니다.

카테고리 글 더 보기

CSS 에서 오류가 납니다. CSS3 에서는 해당 옵션이 있지만 CSS2.1 에는 없기에 나는 오류입니다. 넘겨도 괜찮은 오류이지만 CSS2.1 기준으로는 오류가 발생합니다.

트랙백 복사 , 글쓰기

환경설정의 트랙백 복사 글쓰기 버튼을 생성하면 이부분에서 에러가 발생합니다. 이부분을 사용하지 않아야 에러가 나지 않습니다.



XHTML CSS 오류 거의 다 잡았지만 뷰애드는




XHTML 검사를 하면서 스킨에 있는 오류는 거의 잡았습니다. 소개, 방명록, 카테고리 등에서 살펴보면 에러가 0 (XHTML 1.0 Transitional) 으로 나오네요.  XHTML 오류를 잡는 작업은 꾀 고되고 번거로운 작업입니다. 여러번 검사를 해보면서 에러를 하나씩 잡아나가야 하기 때문이죠. 마지막 이 녹색줄의 오류검사를 통과했다는 부분을 보면 감동이 밀려오죠.




씨디맨의 컴퓨터이야기 블로그를 첫페이지를 검사해보면 7 Errors, 6 warning(s) 로 나옵니다. 이 부분의 에러는 다음의 새로운 수익원인 뷰애드에서 나오는 에러더군요. 그 배너 하나에서 7개의 에러를 뿜어냅니다. 꼭 수정하려면 코드를 강제로 수정해버리면 되긴 하겠지만, 강제로 수정하면 뷰애드 정책에 어긋나니 이부분은 뷰에드에 문의를 해봐야할듯하네요.





뷰애드에서 에러를 내는 부분을 살펴보니 & 를 & 로 쓰지 않아서 나는 오류와 몇몇 지정되지 않은 속성값을 사용한 부분, 중복된 사용값 등이 있네요. 이런 오류까지 모두 잡아볼까 하는 생각이 잠깐 들었지만, 아무래도 뷰애드에 먼저 문의를 하고 하는게 우선일듯해서 문의를 먼저 해볼까 생각중입니다. 이 부분은 뷰애드에서 조금만 수정해주면 해결이 될듯하니까요.


블로그 튜닝은 이뤄져야 한다


블로그를 최적화 하는 작업은 반드시 해야합니다. 자신의 블로그에 수천명이 동시에 들어왔는데 스킨이 무겁거나 오류가 있어서 재대로 보여주지 못한다면 손해겠죠. (X)HTML 부분에 해당하는 skin.html 부분에 <img> 태그의 내용은 스킨을 다시 불러올 때 항상 다시 불러오는 부분도 있습니다. CSS 에 이미지를 지정해두면 한번 불러와진 부분은 로컬 컴퓨터에서 불러오기때문에 속도가 빠르다는 장점이 있죠. 다만 CSS 는 이미지가 수정되었을때 다시 불러오지 않으면 이전 이미지가 보인다는 문제가 있고, (X)HTML 에 지정한건 느리긴 하지만, 항상 새로운 이미지가 뜬다는 장점도 있죠. 이 외에도 IE6 이하 버전에만 해당하는 내용과 브라우저간의 특성. 아직까지는 경계가 애매하여 꼼수등으로 해결하는 부분등 알아야할 부분들이 많이 있습니다. 이미지의 무게 또한 중요합니다. 가볍게 해두어야 보다 많은 사람이 부하없이 가져갈 수 있겠죠. 이런 여러가지를 알아야 튜닝이 가능할겁니다.

제가 이번에 글 쓴 목적은 제가 에러를 거의 다 잡고 뷰애드에 대해서 글을 쓰기 위함과 기록을 하기 위해서이지만, 오류를 어느정도 인지하고 어느정도는 잡아주는게 좋다는걸 알려주기 위함 이었습니다. 오류를 100% 모두 다 잡는건 힘들지도 모릅니다. 다만, 큰 오류를 잡고 잡을 수 있는 사소한 오류들을 모두 다 잡아준다면 블로그를 방문해준 블로거에게 보다 좋은 인상을 심어 줄 수 있을겁니다.


신고

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

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

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

댓글 입력 폼

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

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

  1. 이전 댓글 더보기
  2. 머 걍 2010.06.28 09:20 신고

    얼마전에 rss 오류로 한동안 글 수집이 안되는 경우가 있었는데,
    그때 이런거 알았으면 좀 도움이 됬을지도 모르겠네요.
    근데 오류가 났다는걸 알아도 수정할 능력이 안된다는게 또 문제긴 하네요.^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.28 23:47 신고

      저도 오류 부분을 설명해보려고 했는데 경우 수 가 너무 많더라구요. 다 일일이 설명할 수 도 없고, 그렇다고 제가 수정을 해주겠다고 덜컥 못말하겠더라구요. 제꺼도 이렇게 시간이 걸리는데 다른분들것도 하려면 시간이 엄청나게 들어갈거같다는 ㅠ

      perm. |  mod/del. |  reply.
  3. 한성민 2010.06.28 10:46 신고

    블로그도 홈페이지와 마찬가지로 로딩속도 및 오류가 없어야 되요...
    전 로딩속도가 너무 느리면 전 그냥 확 꺼버리더든요...
    각 오류 및 로딩속도도 체크가 필요한 듯 합니다....^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.28 23:48 신고

      네 맞아요. 저도 가능한 이미지 갯수를 줄이고 아니면 CSS 에 넣어두고 이미지 크기가 큰건 모두 색수를 줄여서 크기를 줄였거든요 ㅋ

      perm. |  mod/del. |  reply.
  4. 재아 2010.06.28 13:03 신고

    좋은정보 감사합니다.~

    perm. |  mod/del. |  reply.
  5. 용의자 2010.06.28 14:28 신고

    티스토리 우수블로거 뱃지, 유투브도 잡히더라구요..^^;
    네이버추천이웃 위젯도 달았다가 걸려서 떼버렸어요.
    블로그아이콘은 좀 고쳐주면 좋을텐데..없애고 나니까 좀 허전한 것 같아요..ㅠㅠ

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.28 23:50 신고

      유튜브도 잡히는군요 ; 그러고 보니 다음팟도 좀; 우수 블로그 뱃지는 저는 그냥 그림으로 넣어버렸어요. 방법이 없더라는 ; 블로그 아이콘은 없애고 나니 좀 허전하긴 한데 대신 닉네임을 더 잘 볼 수 있어서 이것도 괜찮기도 한거같아요. 근데 좀 고쳐주면 좋겠다는 ㅠ

      perm. |  mod/del. |  reply.
  6. UO런치패드 2010.06.28 14:40 신고

    트랙백 복사,글쓰기 설정하면 오류나오나요? 저는 안나는 것 같아서요.
    티에디션을 사용해도 오류가 나오더군요.
    현재는 XHTML만 오류 수정해서 테스트 통과했고, 카테고리 글 더보기는 꼭 있어야하는 기능이라서 CSS는 그냥 오류있는 채로 사용중입니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.29 00:03 신고

      저도 오류 다 잡은줄 알았는데 트랙백 부분에서 오류가 나더라구요. 버튼을 누르면 클립보드로 값을 넣어주는 부분에서 에러가 나더라구요. 그래서 없앴다는.. ㅠ

      카테고리 더 보기의 에러는 CSS2.1 에서만 오류이고 CSS3.0 에는 적용되는 내용이니 두셔도 될듯해요.

      글도 보내셨군요. 글 잘 봤습니다. ^^

      perm. |  mod/del. |  reply.
  7. 쿠쿠양 2010.06.28 17:11 신고

    오류잡기 사이트도 있다니...이런것도 있었군요+__+
    항상 오류가 뜨면 골치만 썩히게되구요 ㅠ..ㅠ

    perm. |  mod/del. |  reply.
  8. mahoraga 2010.06.28 19:01 신고

    댓글 이모티콘은 댓글을 숨기기로 해놓은 다음 사용하면 웹표준 테스트 통과 합니다.

    단 그런식으로 통과를 한다 해도 방명록에선 에러가 발생되구요. :)

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.29 00:06 신고

      그렇군요. 보이지 않아서 통과는 되지만 펼치면 다시 에러군요. 이걸 다른쪽으로 좀 응용해봐야겠네요 ㅋ

      perm. |  mod/del. |  reply.
  9. 세민트 2010.06.28 22:30 신고

    잘보고 가요~

    perm. |  mod/del. |  reply.
  10. PiPS 2010.06.28 23:42 신고

    음.. 글 더보기 같은 것들은 CSS에서 display:none;만 해주면 되나요?
    아 그리고 포스팅을 할때 자동으로 <div id=""> 처럼 아무런 내용도 없는 div나 div속에 id="" 처럼 필요없는 옵션이 나오는데... 이를 자동으로 없앨 방법은 없나요?

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.29 00:08 신고

      글 더 보기는 안쓴다면 플러그인에서 아예 꺼버리는것도 방법인듯해요. div 가 임의로 들어가는건 박스를 만들고 공간을 늘리다가 닫으면 임의로 다른곳이 닫혀서 남아버리는 경우가 생기더라구요. HTML 수정 눌러서 수정하는 방법 뿐인듯해요.

      perm. |  mod/del. |  reply.
  11. 라라윈 2010.06.29 02:34 신고

    씨디맨님 정말 대단하심.. +_+
    에러를 다 잡으셨네요....

    perm. |  mod/del. |  reply.
  12. beat™ 2010.06.29 12:52 신고

    헉... 전 755개 ;; ㄷㄷㄷ;;; 얼렁 잡아야겠네요

    perm. |  mod/del. |  reply.
  13. rinda 2010.06.30 00:42 신고

    저 지난번에 크롬이나 IE에서는 보이는데, 파폭에서는 사이드바가 안 보여서 난감했어요 ^^;
    카테고리 글 더 보기, 트랙백, 뷰애드에서 걸리겠지만, 한 번 해봐야겠네요.
    좋은 정보 감사합니다 ^^

    perm. |  mod/del. |  reply.
  14. 오브젝트태그 2010.06.30 12:34 신고

    플래쉬를 표시할 때 object 태크를 사용하지요!
    doctype을 XHTML 1.0 Strict 로 해서 validation을 하면 아래와 같은 오류가 발생합니다.
    그런데, XHTML 1.0 Transitional 로 하면 Pass 됩니다.

    document type does not allow element "object" here;
    missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag

    …pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="53">

    문제는 반드시 doctype을 XHTML 1.0 Strict로 해야 한다는 것입니다.
    이럴경우 validation을 통과할 수 있도록 object 태그를 어떻게 사용할 수 있을까요?

    perm. |  mod/del. |  reply.
  15. 애버그린 2010.07.01 16:06 신고

    차후에 한번 해봐야겠습니다.
    저도 오류가 너무 많은듯 하네요

    perm. |  mod/del. |  reply.
  16. Seollem 2010.07.09 19:05 신고

    못잡겠다 깨꼬리~~ >< 휴..

    perm. |  mod/del. |  reply.
  17. 마이다스의 세상 2010.07.21 11:36 신고

    ㅡㅡ;; 143개의 오류와 205개의 경고들이 뜨는군요 ㅠㅠ 후우.. 게다가 전 이걸 수정할 능력이 없네요 ㅠㅠ 수수방관할 수밖에;;

    perm. |  mod/del. |  reply.
  18. 니뽄 2010.09.12 18:40 신고

    오류잡다가 .. 스킨만 몇번 날려먹는지 모르겠네요 ! 헤헤 ... ㄷ

    perm. |  mod/del. |  reply.
  19. 대두 2012.10.14 16:40 신고

    현재 댓글 오류때문에 미치겠습니다. 혹시 해결 방법 아십니까?
    증상은 댓글은 써지는데 댓글쓰기 버튼이 안눌려서 쓰기가 불가능합니다.


    commentWrite

    잘못 된 값 : font Lexical error at line 572, column 46. Encountered: "\ub098" (45208), after : "" 나눔고딕, "Malgun Gothic", "맑은 고딕", Dotum, 돋움;



    573



    알 수 없는 비정규 요소 또는 비정규 클래스 :uppercase



    573

    text-transform

    잘못 된 값 : font해석 오류 uppercase;



    576

    #nonEntry .commentWrite h3

    잘못 된 값 : font해석 오류 [:1px; } .commentWrite h3]



    578

    #nonEntry .commentWrite h3

    잘못 된 값 : font Lexical error at line 578, column 19. Encountered: "\ub098" (45208), after : "" 나눔고딕, NanumGothic, "Malgun Gothic", "맑은 고딕", Dotum, 돋움;



    583



    잘못 된 값 : font해석 오류 [:url(./images/banner1.png) no-repeat; width:146px; height:18px; } .commentWrite p]



    634

    .commentWrite p.secretWrap

    잘못 된 값 : font Lexical error at line 634, column 32. Encountered: "\ub098" (45208), after : "" 나눔고딕, "Malgun Gothic", "맑은 고딕", Dotum, 돋움;



    635

    .commentWrite p.secretWrap

    잘못 된 값 : font해석 오류 }



    866

    #copyright

    잘못 된 값 : font Lexical error at line 866, column 32. Encountered: "\ub098" (45208), after : "" 나눔고딕, "Malgun Gothic", "맑은 고딕", 돋움, Dotum;



    867



    알 수 없는 비정규 요소 또는 비정규 클래스 :uppercase



    867

    text-transform

    잘못 된 값 : font해석 오류 uppercase;



    874



    잘못 된 값 : font해석 오류 [:0px; text-align:left; color:#777; line-height:160%; float:left; } #copyright a]

    라고 뜨는데 ㅠㅠ

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.10.14 16:46 신고

      음 제생각에는 스킨에 원소스가 있을텐데요. 원소스에서 추가하신 부분을 따로 코드를 빼놓으시구요. 원소스로 돌린뒤 다시 적용하는 방법으로 적용하시는게 훨씬 에러잡기도 빠르고 해결하시는 속도도 빠를겁니다. 지금 그리고 제가 소스를 봐야알수가 있는것이구요. 제가 지금 소스보기를 통해서 보는것은 해석되어진 코드이니 정확히 알수가 없습니다. 치환자나 또는 자바스크립트 부분에 에러가 생겼을것으로 추측되지만, 가능하시면 위에 방법대로 해결하시는게 제일 빠릅니다.

      perm. |  mod/del. |  reply.
    • 대두 2012.10.14 16:50 신고

      한번 다시 스킨을 편집에 보겠습니다. 감사합니다.

      perm. |  mod/del. |  reply.
  20. 가람빛 2013.07.22 02:47 신고

    좋은 정보 감사합니다^^

    perm. |  mod/del. |  reply.
  21. 오디세이5 2014.11.18 14:16 신고

    안녕하세요. 티스토리 개설하고 몇일 꾸미다가 오늘 클릭몬 설치해본다고 html/css편집 만졌다가 블로그 자체 오류가 나버려서 클릭몬 스크립트 넣었던거 다시 뺐는데도 블로그가 이상하길래
    알아보던차에 들르게 되었는데요. 오류 검색해보니까 에러가 957개나 되는데;;;;
    에러나 워닝을 찾긴 찾아도 이걸 다 어떻게 해결을 해야하는건지.. 막막하네요

    블로그주소입니다.ㅠ

    http://odyssey5.tistory.com

    :(

    perm. |  mod/del. |  reply.
    • 씨디맨 2014.11.18 15:49 신고

      지금 상태에서 다시 원래대로 수정하는건 오히려 시간이 걸리구요. 먼저 티스토리 기본 스킨으로 돌려놓은 뒤

      이미 잘 만들어진 티스토리 스킨이 상당히 많습니다. 텍스트큐브 사이트에가도 정말 잘만들어진 스킨이 많구요. 그것을 적용 후 그전에 적용시켜두셨던 코드들을 차례대로 천천히 넣어보세요. 그게 더 빠릅니다.

      그리고 수정시에는 온전한 상태의 스킨을 스킨 저장을 통해서 저장 후 하시기 바랍니다. 그래야 이전상태로 돌릴 수 있으니까요.

      perm. |  mod/del. |  reply.
    • 오디세이5 2014.11.18 17:11 신고

      감사합니다 덕분에 일단 깨졌었던 블로그 메인은 스킨 재적용해서 쉽게 고치긴?했는데요.. html검사로 찾아낸 900개가 넘는 이 오류들을 어떻게 고쳐야될지... 해결방법을 알려줘도 어떻게 손대는지 모르겠네요 워낙 초보라..;; 블로그 다 뒤져봐도 오류찾을수있는 사이트만 알려줄뿐이지 대충 예로 고치는 방법까지는 상세하게 나온 포스팅이 없는지라.. 이거 어디를 참고해야 일일이 다 고칠수가 있을가요? 자꾸 물어서 지송;;

      에러가 900개가 넘는데 이거 그대로 블로그생활하면 지장있는거져;;

      perm. |  mod/del. |  reply.
    • 씨디맨 2014.11.18 17:37 신고

      900개 에러가 실제로 900개는 아닐겁니다. 반복되어서 나오는 부분은 한 부분만 잡아도 400개 200개 이런식으로 에러가 줄거든요.

      수정방법이 자세히 적힌게 없는 이유는 다 건건마다 다르기 때문이겠죠. 그보다는 XHTML 코딩 방법을 배우는게 더 먼저이구요. 그것을 알면 반대로 문법에 대입하듯 넣으면서 틀린 옵션들을 지우거나 XHTML에서는 허용하지 않는 구문을 지우는 순으로 해결할 수 있거든요.

      perm. |  mod/del. |  reply.
    • 씨디맨 2014.11.18 17:37 신고

      추가로 한페이지에 1개의 post 만 나오도록 하시는게 좋습니다. 환경설정에서 변경가능하시구요.

      perm. |  mod/del. |  reply.
    • 오디세이5 2014.11.18 19:07 신고

      오옷 안그래도 그거 설정하고싶었는데 조언 감사합니다^^

      perm. |  mod/del. |  reply.