이달 초에 IE 에서 티스토리 포스팅을 할 경우, 본문에 포함된 특정 태그가 유효성 검사에서 에러 및 경고로 표시된다는 내용을 다룬 바 있습니다.

> 참고 : 웹표준(XHTML)을 지키지 않는 IE8 - LiveREX

 그러면서 말씀드린 것이... 유효성 검사에서 에러 및 경고로 표시되지만 사용자가 직접 태그를 수정할 수 없는 몇몇 내용이 있다고 소개를 하면서, 그 중에 다음뷰 추천 버튼 위젯이 있다고 말씀드린거 기억하시나요?

▲ 다음뷰 추천 위젯 모습


 티스토리에서는 플러그인을 통해 위와 같은 다음뷰 추천 버튼을 본문 하단에 추가할 수 있는데 EMBED 태그를 사용하여 웹표준 검사를 하면 에러가 표시됩니다. 얼추 보니 이 위젯 소스 자체에서 7개 정도의 에러를 표시하더군요. 참고로 EMBED 태그는 OBJECT 태그로 묶어서 사용해야 유효성 검사에서 에러가 나오지 않습니다.



그래서 사실 다음측에 관련 해서 소스를 제공하거나 수정할 것인지 여부를 묻는 메일을 보냈는데... 확인 중이라는 답변만 오고 그 이후로 2주 넘도록 답이 없네요.

 사실 이런데 크게 의미를 부여하지 않는 분이라면 상관 없을 수 있겠지만 사람 마음이라는게 에러가 표시되면 찝찝하고, 어떻게든 권장사항이라는 걸 지키고 싶잖아요? ^^;; 그래서 그냥 제가 소스를 변경해 봤습니다. 변경하여 적용한지는 1주일 조금 넘었는데 익스플로러(IE), 파이어폭스(Firefox), 크롬(Chrome)에서 전혀 이상없이 사용 가능합니다.

웹표준(XHTML)에 맞는 다음뷰 추천 버튼 소스

 위에서도 말씀드렸지만 OBJECT 태그를 사용하면 괜찮다는 건 알고 있었는데 수정하다보니 파폭에서는 작동하는데 IE 에서는 안되고, 혹은 그 반대이거나 등의 상황이 발생하더군요. 그러다가 문득 네이트의 블로그독 추천 위젯 소스를 보고 착안해서 수정을 하니 웹브라우저에 따른 문제없이 제대로 작동했습니다. 하지만 그대로 사용하기에는 소스가 너무 길어서 확~ 줄일 수 있는 팁을 찾다가 발견. 그리고는 다시 손봐서 최종적으로 아래 소스를...


▼ 텍스트 파일에 포함된 소스 내용입니다. 노랗게 표시한 부분을 자신의 블로그 주소로 변경하시면 됩니다.



[참고] 위 이미지 혹은 텍스트 파일을 잘 보시면 recombox3 이라고 표시되어 있죠? 왠만하면 다들 아시겠지만 다음뷰 추천 버튼 위젯은 이 recombox 뒤에 붙는 숫자가  1 ~ 3 까지 있습니다. 3 은 제 블로그에 추가되어 있는것처럼 버튼만 있는 거구요. 1 은 위에서 제가 예시로 첨부한 위젯 이미지입니다. 2 는 1 보다 조금 작은 사이즈구요. 만약 다음뷰 추천 위젯 소스를 변경해서 추가하실 경우 그 형태를 원하는 것으로 변경하고 싶다면 1, 2, 3 으로 수정하고 width 와 height 의 수치를 아래 내용을 보고 변경해 주시면 됩니다.

[다음뷰 추천 위젯별 크기]
recombox1 - width : 400, height : 80
recombox2 - width : 400, height : 58
recombox3 - width : 67, height : 80


▼ 위 소스를 스킨에 추가하셨다면 관리자모드의 플러그인 메뉴에서 Daum View 의 view on 박스 설정을 [표시하지 않음]으로 변경하여 저장하고 사용하시면 됩니다. 안그럼 본문에 추천 위젯이 2개 표시되니까 주의하세요.



▼ 제 블로그의 경우 상단의 참고글을 보시면 아시겠지만, 이전까지 10여개의 에러가 고정적으로 표시되었었는데요. 지금은 이렇게 수정한 후 2개의 에러만 표시됩니다. 뭐가 문제인지 알면서도 수정하지 못하는 이 찝찝함 ^^;;;



 자신의 블로그 혹은 홈페에지가 웹표준(XHTML) 유효성 검사에서 몇개의 에러를 포함하고 있는지 확인하고 싶은 분들은 아래 링크를 이용하시면 됩니다.

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

 웹표준에 대한 관심도도 그렇고 태그를 직접 수정한다하면 막연하게 어렵다고 느껴서 포기하는 분들이 많다보니... 많은 분들이 변경하진 않으실 듯 하네요. 그래도 웹표준에 관심갖고 블로그 관리에 임하는(?) 분들을 위해 소개 했습니다 ^^

[추가] 혹시 블로그 글 주소를 숫자 형식이 아닌 문자 형식으로 사용하시는 분들은 아래 소스를 적용하시면 됩니다. 참고로 숫자 형식이더라도 아래 소스를 사용하셔도 되니 무슨 의미인지 잘 모르겠다는 분들은 아래 소스를 변경해서 사용하세요~ ^^

<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" width="67" height="80">
<param name="movie" value="
http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" /></object>

※ 제 블로그 주소로 표시된 부분은 자신의 블로그 주소로, 샾샾은 ## 으로 변경하시면 됩니다!
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon demun 2010.06.07 08:38 신고

    좋은글을 이제야 보네요...잘 봤습니다.

  3. BlogIcon demun 2010.06.07 09:00 신고

    아 정말 궁금한것이 있습니다. 블로그 하단에 올블로그아이콘 밑에 글들이 주르룩~~ 있짠아요. 그게 티스토리 카테고리 글 더보기....그거입니까?
    혹시 그거 관련한 포스팅이 잇나요?
    좀 살펴보고 싶은데요..

  4. BlogIcon 공학코드 2010.06.20 09:59 신고

    130개 에러.. 96개의 경고라.. 그냥 전 웹표쥰 포기해야하겠는데요..

  5. BlogIcon 재아 2010.06.28 19:07 신고

    수정했네요!!... 왜 안될까 하루종일 고민하다 해결했습니다.

  6. BlogIcon 이슈맨 2010.07.09 17:29 신고

    이상하게 글을 올리고나서 버튼이 안 보이는 경우가 많아서, 올리신 글대로 추가해 봤습니다. 감사합니다.

    제가 완전 초보인지라 잠시 헤메이긴 했네요...

    혹시나해서 저같은 초보분들을 위해 몇자 남길게요 ㅋ

    기본적으로 버튼이 왼쪽으로 치우치게 되어 있더군요 (저만 그런걸지도..)

    작은 버튼을 쓰실 게 아니라 큰 버튼을 쓰실거라면, 가운데 정렬을 하셔야 하니..

    그런경우에는 <p align="center"> 요걸 LvieREX님이 주신 소스앞에 부치고 하심 되요..

    그리고 width와 height 고치시는 거 잊지마시구요~~ 무식해서 헤메였습니다. ㅠㅠ

    좋은 팁을 주신것 정말 감사드려요~~

  7. BlogIcon 백투더네트 2010.08.20 00:16

    에고 댓글도 저 밑에 달아 버렸어요 ㅠ.ㅠ 저 이거 플로그인 네이버 블로그는 어디서 찾는거죠?

  8. BlogIcon 어세즈 2010.10.19 23:18 신고

    포스트 보면서 처음으로 유효성 검사했는데, 에러가 250개 넘개 뜨는군요 -ㅅ-;;;

  9. BlogIcon 리더韓 2010.12.18 12:04 신고

    안녕하세요. 좋은 정보 감사합니다.
    그런데 저는 소스받아서 제 블로그 주소로 변경하여
    원하는 곳에 붙여 넣었는데...

    추천버튼이미지는 노출되지만
    카운터가 활성화 되지 않습니다. 왜일까요?

    혹시 발행에서 주제 분류를 설정하지 않아서인가 하는 생각이 들어
    확인해 보았는데 발행 주제 분류도 다 제대로 되어있는데 말이죠...

    도움글 주실 분 혹시 계시나요?
    부탁드리겠습니다~

  10. 2010.12.24 10:45

    비밀댓글입니다

  11. 2010.12.27 16:55

    비밀댓글입니다

    • BlogIcon LiveREX 2010.12.27 17:29 신고

      정확하게 소스를 넣으신대로 복사해서 알려주신거라면...
      '샵샵_article_' 부분에 샵이 띄워쓰여져있네요
      그리고, 마지막 태그가 끝나는 부분에
      </object> 도 빠져있네요~

  12. 2010.12.27 20:15

    비밀댓글입니다

  13. BlogIcon 리더韓 2010.12.28 00:13 신고

    전에 어디선가 본 것 같은데...

    혹시 게시물 주소가

    숫자형식일 때와
    문자형식일 때에

    적용하는 소스가 다르다고 얼핏 떠오르는데요...

    그런 문제가 아닐까요?
    다른 분들은 댓글에 문의가 없는 것으로 보아
    정상적으로 반영되고 있는 듯 한데...

    이것 참.

    바쁘실텐데도 댓글에 답글 감사합니다.

    • BlogIcon LiveREX 2010.12.28 13:15 신고

      네~ 그것도 생각해봤는데...
      숫자형식이시지 않나요??
      그럼 위 소스 그대로 사용하셔도 괜찮거든요 ^^

      정 신경쓰이신다면...

      nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" 와 같은 방식으로 바꿔서 넣어보세요~ 이건 숫자, 문자 상관없어요~

  14. BlogIcon webde 2011.01.09 03:41 신고

    한참을 찾다 너무 반가운 글을 보고 지금 적용하고 있습니다. 블로그에 유익한 내용이 많은거 같아 잠도 안자고 보게 되네요^^
    블로그 초짜라 이거저거 어려움이 많아도 렉스님같은 분들 덕에 쉽게쉽게 가는거 같습니다.
    감사합니다.

  15. BlogIcon webde 2011.01.09 04:12 신고

    이상하네요;; 분명 남겨주신 소스 그대로 적용했는데 손모양만 나오고 그 안에 숫자는 안나오네요 클릭해봐도 반응도 없고요..
    소스보기 해보니까 블로그 뒷부분 주소를 가져오지 못하고 있습니다.
    뭐가 문제일까요..ㅡ;
    익스8입니다.

    • BlogIcon LiveREX 2011.01.09 11:35 신고

      이상하네요.. 다른분도 그렇다는 의견이 있던데..
      아래 소스로 해보세요.
      저는 아래 소스를 적용해서 현재 사용중이거든요~

      블로그 주소는 webde 님 주소로 샾샾 부분은 ## 으로 고쳐주시면 되겠네요~ ^^

      <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" width="67" height="80">
      <param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" /></object>

      혹시 모르니 플러그인에서는 다음뷰를 사용함으로 설정하되 표시되지 않음으로 저장해서 해보세요~

  16. BlogIcon webde 2011.01.09 14:53 신고

    본문에 링크걸려있는 파일에는 ##_article_rep_id_## 라고 되어 있는데 코멘트 주신 글에는 ##_article_rep_link_##로 되어있네요?

    헌데 이것도 안되네요;;

    티스토리 홈페이지 스킨가이드에서 치환자를 찾아봤더니
    ##_article_rep_id_## 는 댓글주소고
    ##_article_rep_id_## : 보호글의 고유주소라고 나오는데

    이거와는 상관이 없는 문제일까요??

    답변감사합니다.^^

  17. BlogIcon 유턴금지 2011.01.24 12:56 신고

    좋은 정보 감사합니다~
    그런데 저도 윗분 (webde)과 같은 현상입니다.

    익스플로러
    -손그림은 나오지만, 숫자가 나오지 않습니다.

    크롬
    -박스 자체가 나오지 않습니다.

    저는 글을 쓸때 서식으로 저장해서 쓰려는 목적이라, html 소스에 직접 추가하지는 않았고, 포스팅 글쓸때 html 모드에서 추가했습니다.

    그건그렇고..
    크롬에서는 다음애드뷰가 레이아웃을 먹어버리네요...쩝..

    • BlogIcon 유턴금지 2011.01.24 13:14 신고

      방금 skin.html 에 추가해봤는데, 됩니다.
      이게보니, 소스에 직접 추가하는 건 되는데,
      저와 같이 포스트 작성할때 html 모드에서 넣는 건 안되나보네요.

      혹시 좋은 방법 없을까요?

    • BlogIcon LiveREX 2011.01.24 14:53 신고

      아하~ 그런 문제가 있나요?
      저도 스킨상에서 소스를 추가하고 활용하다보니 몰랐네요.

      매 글마다 소스를 추가하는데 안된다면 다른 방법을 차장봐야겠네요..

    • BlogIcon 유턴금지 2011.01.24 17:22 신고

      네,
      article 안쪽 영역의 플러그인 순서를 설정할 수만 있으면 뭐 모든게 해결될테지만,
      그럴수가 없으니, 가끔 답답하네요.

      저는 지금 제 블로그 최근글 처럼 제목을 처리하고 싶어서 알아보던 중에 여기에 왔습니다. ㅎㅎ
      일단 뭐 귀찮아도 수동작업을 하긴 해야 할 것 같애요.
      skin.html 에 박으려고 시도했는데, 본문의 제목위치가 광고 위로 올라가버리는 현상이 있어서 일단 포기했거든요.ㅎㅎ

      감사합니다~

  18. BlogIcon Hodie  2011.10.11 22:33 신고

    어째서 정리하는칸에 자꾸 일시적인 오류라고 뜰까요
    그래서 임시로 플러그인 으로 달았는데 어떻게 해야될지 모르겠어요 ㅠㅠ

  19. BlogIcon Canal 2011.11.10 20:10

    유용한 정보입니다.
    다음뷰를 마음대로 이용할수 있겠어요

  20. BlogIcon DrugGhanzi 2012.03.15 15:30 신고

    오...유용한 정보 감사합니다. 웹쪽 개발자는 아니지만 요즘 취미로 웹 공부하는게 재미지네요 ㅎㅎ

  21. BlogIcon 지냄이 2013.01.06 00:40 신고

    좋은 정보 감사합니다. 덕분에 웹표준을 검사 해주는 유용한 사이트도 알게됬네요
    저도 지금 한창 스킨 제작 중이라 검사 해보니 에러가 51개 씩이나 -.-a
    그나마 희망적인건 유형별로 보니까 7개 밖에 없다는거네요,
    시간 될 때, 수정 할 수 있는건 꼭 수정해야 겠습니다.

    근데 지금 웹표준보다 시급한건 다음뷰ㅠ.ㅠ
    저도 위에 webde님 처럼 손가락만 나오고, 손가락 안에 카운팅이 안됨니다
    (유턴금지님과는 증상이 다르네요 저는 스킨상에서 작업중인데 안되거든요)
    소스보기 해보니까 역시나 주소를 못 불러오고 있습니다.
    어째서 치환자가 제기능을 안하는 걸까요?

댓글을 남겨주세요 :)




submit