XHTML 웹표준 틀리기 쉬운 문법들



블로그 스킨을 수정하면서 틀리기 쉬운 부분에 대해서 이야기를 해볼까합니다. 어렵지 않으니 외워보죠 ^^
어려운 부분은 넘기시고 붉은색 글자부분은 자세히 보세요!


XHTML 을 선언해놓고 규칙을 어긴다 ?


skin.html 의 윗줄 일부분

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


티스토리 스킨의 DOCTYPE 선언 부분입니다. 여러 브라우저에서 다 잘 보이게 하기위해서 "이 문서는 뭐에 맞춰서 만들어졌어!" 라고 알려주는 부분입니다. XHTML 을 선언해놓고 HTML 을 쓰면 안되겠죠.

DTD 에는 3가지 형식이 있습니다. strict, transitional, frameset 인데요. 크게 구분하면 Transitional , Strict 가 있습니다.
Transitional 는 호환성을 어느정도 준것이고, Strict 는 엄격하게 XHTML 규칙을 정의한 것 입니다.
때문에 보통 스킨은 호환성때문에 Transitional 로 되어있습니다. Strict 로 해놓으면 에러가 엄청나게 나겠죠.

XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다. HTML이 SGML의 응용인 데 반해, 매우 유연한 마크업 언어인 XHTML은 SGML의 제한된 부분집합인 XML의 응용이다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다. XHTML 1.0은 2000년 1월 26일, W3C의 권고안이 되었다.

즉, HTML 를 알고있듯이 쓰면 안된다는 소리입니다. 이게 무슨 소리냐 할텐데 아래에서 알아보죠.



실수하기 쉬운 XHTML 문법 - img 태그


<IMG src=./images/test.gif>   (XHTML 에 맞지 않음) 

<img src="./images/test.gif" width="30" height="20" alt="테스트 문자 입니다" />   (XHTML 1.0 Strict DTD 에 맞음)

차이점을 찾아보죠.

먼저 처음 img 태그가 대문자로 되어있네요 여기에서 틀렸습니다 (모든 요소 및 속성은 소문자여야한다)
그다음에 보면 "(따옴표) 가 없군요. (모든 속성값은 '' 또는 "" 로 닫혀야한다)
alt 태그가 없군요 ? (img 태그에는 alt="대체문자" 속성이 있어야한다)
끝에 닫는 부분이 좀 다르군요 ? (태그는 항상 닫혀야 한다.)

XHTML 그다지 어렵지 않습니다.

쏭군님, easyone님 의견입니다. (댓글 참조) Strict DTD 에서는 width , height 도 포함해야 완벽한 구문이 된다고 합니다.

실수하기 쉬운 XHTML 문법 - a 태그


<a href="http://daum.net" target="_blank">클릭하세요</a>   (XHTML Strict DTD 에 맞지 않음)

<a href="http://daum.net" onclick="window.open(this.href); return false">클릭하세요</a> (XHTML Strict DTD 에 맞음)

보통 위에것과 같이 많이 쓰죠. 따옴표도 다 했고 잘 알듯이 태그를 익숙하게 적었지만, Strict DTD 에 맞춰본다면 틀렸습니다.
a 태그에서 이제 더이상 target 를 지원하지 않기 때문이죠.

당연 transitional 에서는 target 를 허용합니다. 호환성을 가지고 있으니까요. 다만 Strict 를 대비한다면 이제부터 쓰지 않아야겠죠.
대신 onclick="window.open(this.href); return false" 를 쓰면 새창으로 띄울 수 있습니다.


실수하기 쉬운 XHTML 문법 - &


http://search.allblog.net/?keyword=CDMANII&type=100&sort=1&page=1&view=issue (XHTML 에 맞지 않음)

http://search.allblog.net/?keyword=CDMANII&amp;type=100&amp;sort=1&amp;page=1&amp;view=issue  (XHTML 에 맞음)


링크를 걸다보면 여러가지 주소를 활용하게 되는데요. 주소에 파라미터 때문에 & 가 쓰이는 경우가 있습니다.

& 는 XHTML 에서도 인식을 하기 때문에 & 를 그대로 쓰면 해석을 해버립니다. 그래서 이렇게 위와 같이 쓰면 안되죠.
& 는 &amp;  로 바꿔줘야합니다. 이렇게 해야 XHTML 유효성 검사에서도 통과하게 됩니다.



실수하기 쉬운 XHTML 문법 - 각주 주석


(틀린 예)
<!---주석--->   가장 많이 틀리는 예
<!---------- 주석 -------->
<!--주석 -->
<!-- 주석-->

(옳은 예)
<!-- 주석 -->   가장 많이 쓰는 방식
<!-- //주석// -->
<!-- 주석 입니다 -->
<!-- ========== 주석 ========== -->
<!-- ************ 주석 ***************** -->

설명 :
<!--(공백)주석(공백)-->

주석은 많이 쓰죠. 어느부분에 뭔가를 넣어놓고 다음에 확인하기 위해서도 많이 씁니다. 그런데 주석에서도 규칙이 있습니다.
<!-- 다음에 공백이 1개 있어야하고 --> 전에도 공백이 1개 반드시 있어야하죠.

주석부분을 틀려도 별 문제가 없을진 모르지만 간혹 틀린 주석때문에 또는 주석이 교차하는것 때문에 웹표준을 따르는 브라우저에서
그대로 노출이 되어버리는 경우도 간혹 있습니다. 꼭 지켜줘야겠죠.

연관 링크들


2009/09/28 - [Useful Tips] - 티스토리 카테고리 글 더 보기 배경 꾸미기 - 블로그팁
2009/09/23 - [Useful Tips] - 블로그 팁 다음뷰 버튼 배경 꾸미기
2009/09/22 - [Useful Tips] - 블로그 광고수익 모델 CPC 광고 다음 애드클릭스 팁
2009/09/20 - [Useful Tips] - 파이어버그로 티스토리 스킨 미리 수정하기
2009/09/11 - [Hardware/Tuning/Lab] - 블로그 스킨 수정해 드립니다.
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편
2009/07/23 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 둘째편
2009/02/12 - [Useful Tips] - 더블클릭으로 블로깅을 편하게


CSS 공부에 도움될 책들




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

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

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

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 이전 댓글 더보기
  2. 윤초딩 2009.09.29 11:58

    으흐흐 이런거 저런거 다 신경쓰면 머리 터저 죽어요 ^^
    이까이꺼 대충~~ ㅋㅋㅋ

    perm. |  mod/del. |  reply.
  3. kimatg 2009.09.29 12:03

    좋은 글 잘 읽고 갑니다. ㅎ

    정말 저도 스킨 다 만들고 웹표준 테스트 통과하려고 dog고생한 기억이... ㅋㅋㅋ

    perm. |  mod/del. |  reply.
  4. 좋은사람들 2009.09.29 14:16

    갈 길이 아직 멀군요 -_-;;~
    타겟 블랭크가 편했는데;; 이건 너무 기네요.~;;
    onclick="window.open(this.href); return false";;

    스킨 좀 다시 손봐야 겠습니다.;

    perm. |  mod/del. |  reply.
  5. 이런 2009.09.29 14:21

    타겟이 블랭크가 아닌 특정 프레임(프레임도 표준이 아니던가요?기억이..^^;)등 특정타겟이 있을때는 어떻게 줘야 하는지요?

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.29 14:42 신고

      onclick="window.open(this.href, '_blank'); return false;"

      (_blank 는 타겟네임) 이렇게 넣으시면 됩니다 ^^

      perm. |  mod/del. | 
  6. gemlove 2009.09.29 15:18

    ㅎㅎ 요즘 혼자 독학 하고 있는데 너무 어려워요 TT

    perm. |  mod/del. |  reply.
  7. 쏭군 2009.09.29 15:38

    좋은글 잘 보았습니다.

    처음에 사용해주신 예시에서 잘못된 부분이 있는데요.
    <img src="./images/test.gif" alt="테스트 문자 입니다" />
    width와 height까지 넣어줘야. 온전한 문법이 됩니다^^

    좋은 하루 되세요~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.29 16:23 신고

      width , height 는 #IMPLIED 라서 생략가능한걸로 알고 있어요. 제가 조금 잘못알고있다면 좀 더 상세 설명 부탁드립니다. XHTML 은 자세히 파고들면 복잡하네요 ㅠ;

      perm. |  mod/del. | 
    • easyOne 2009.09.30 13:34

      쏭군님 말씀처럼 width와 height를 넣어야 XHTML STRICT에 맞습니다. Trasitional에서는 생량해도 되지만, 가능하면 넣기를 권하고 있습니다. 짧은 시간이지만, 브라우저에서 폭과 높이 계산하는 시간을 줄일 수 있다고 하네요.

      perm. |  mod/del. | 
    • 씨디맨 2009.09.30 15:05 신고

      아 그렇군요. 두분 말 씀 너무 감사합니다 ^^ 본문 수정해둘께요 ^^

      perm. |  mod/del. | 
  8. 스트링 2009.09.29 16:57

    a태그는 이제까지 몰랐는데 조심해야겠네요.
    좋은 정보 감사합니다~

    perm. |  mod/del. |  reply.
  9. demun 2009.09.29 20:36

    질문드린거 답변고맙습니다. 덕분에 속시원히 해결봤습니다.
    정말 고마워요.

    상세한설명 정말 고마웠습니다.
    넘 잘 가르쳐주시니 궁금한거 있으면 또 와서 물어보고 싶은 욕심이 나네요^^;

    주석에도 여러표현이 있군요.
    예전에 주석을 잘못넣어서 스킨이 이상하게 나온적이 있었는데....
    주석에서도 배우고 갑니다.

    rss등록후 관심있게 보겠습니다.
    좋은글 잘 봤어요.

    perm. |  mod/del. |  reply.
  10. 대구사랑 2009.09.29 21:05

    앙, 머리야... 머리에 쥐나겠어여.^^

    perm. |  mod/del. |  reply.
  11. 2009.09.29 21:08

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  12. 행복박스 2009.09.30 05:53

    하하하하~그냥 웃지요~^^
    아직은 저에게는 너무 어려운 얘기...
    씨디마니님 지난번 답변 너무 감사드려요.
    감사인사가 너무 늦었죠..
    제가 말일이 다가오면 정신이 없어요..ㅎㅎㅎ

    perm. |  mod/del. |  reply.
  13. 2009.09.30 06:33

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.30 07:51 신고

      알려주신 부분의 코멘트는 아래와같이 바꿔보세요.

      .commentWrite textarea {
      width:/*@post-width:-45=*/ 635px /*@*/ ;
      overflow: auto;
      padding:5px;
      margin:0;
      color:#666;
      }

      그 한줄을 통째로 지우신뒤, 위에 저걸 복사한뒤 붙이면 됩니다. 그럼 원하는대로 처음에는 스크롤이 없다가 글을 쓰면 나타나게 될거예요.

      그리고 방명록쪽에 입력폼도 수정해줘야할듯해요.
      제가보기에는

      #guestWrite textarea {
      height:110px;
      overflow:hidden;
      padding:5px;
      width:635px;
      }

      이렇게 보이지만 이것도 실제 코드는 1줄로

      #guestWrite textarea { height:110px; overflow:hidden; padding:5px; width:635px; }

      이런식 비슷하게 되어있을겁니다. 다른건 신경쓰지 마시구요 여기 한줄에서 hidden 을 auto 로만 바꿔주세요 다른건 건드리지마 시구요.

      그럼 원하시는대로 될겁니다 ^^ 그리고 꼭 높이를 제어해야한다면 height: 150px; 이런식으로 넣어주면 높이를 직접 제어가능합니다. 추석 명절 잘 보내세요 !~ ^^

      perm. |  mod/del. | 
  14. 넷테나 2009.09.30 08:00

    아.. 타겟은 당연히 맞는줄알았는데 그것조차 모르고 있었던거군요.
    감사합니다. 앞으로 좀 더 신경써야겠어요

    perm. |  mod/del. |  reply.
  15. 2009.09.30 08:59

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.30 10:07 신고

      모두 LG 제품이네요. 삼성은 가끔 패널 섞어 쓰기를 하지만 LG 는 우리나라에서 보통 대부분 패널을 만들죠. 품질은 좋은편이예요. 해상도는 아무래도 1920 x 1060 또는 1920 x 1200 이 좋겠지만, 해상도가 올라가도 22인치 이하에서는 글자가 좀 작아보이는게 있긴합니다.

      최적으로 쓰려면 1920 x 1200 해상도 이상에 26인치 이상 모니터일테구요. 가격도 덩달아 많이 오르겠지만요 ^^

      적어주신 모니터는 모두 패널이 거의 같습니다. 너무 고르지 않으셔도 될듯해요. 가격과 생각해서 구매하시면 될듯하구요.

      제가 써봤던걸로보면 다 그런건 아니겠지만 보통 대기업에서 쓰는건 수명이 길구요. 패널도 그렇겠지만, AD 보드 때문에요.
      TN 패널들은 명암대비는 높지만, 색재현에서는 IPS 계열보다는 떨어지지만, 만드는 공정이 간단해서 가격이 저럼하고 그리고 발열이 적죠. 저도 TN 패널 쓰는중이구요. TN 패널은 쓰래기이니 버리라는 말도 좀 그렇구요. TN 도 많이 발전했거든요. 정말 모니터 색같은걸 정확히 봐야하고 그렇다면 에이조같은 모니터를 사야겠죠. 저도 아직 그정도는 아니지만;

      22인치 모니터보다는 개인적으로는 24인치 모니터 구매하실걸 권합니다. 그리고 가능하다면 26인치로 ^^
      모니터가 22인치면 충분하지 라고 생각하실 지 모르지만, 실제로 24인치 쓰다가 22인치 쓰면 답답하다는 생각이 듭니다. 제가 24인치 쓰지만 24인치도 좀 작다는 느낌이 들거든요.

      perm. |  mod/del. | 
  16. Grace* 2009.09.30 17:52 신고

    오 +_+ 좋은 포스팅 감사합니다. ^^ 아직도 타겟은 예전 방식대로 쓰고 있었는데,
    strict를 대비해 점점 고쳐야겠어요. 그런데 참.. 길군요. ㅠ_ㅠ

    perm. |  mod/del. |  reply.
  17. BLUEnLIVE 2009.10.10 01:33 신고

    a 태그는 깊이 파고들수록 넘 어려워요...
    실컷 target 못 쓰게 하고는 다시 window.open... OTL

    perm. |  mod/del. |  reply.
  18. LiveREX 2009.12.30 01:42

    잘 보고 적용해 본다고 했는데 역시 웹표준을 준수하려는 자의 귀차니즘이랄까요 ㅎㅎㅎ

    perm. |  mod/del. |  reply.
  19. 대구사랑 2010.03.19 08:34

    아, 유용한 내용이네여. 전 아직 이런 문법에는 거의 왕초보인데...
    이번 기회에 씨디맨님에게 제대로 배워볼까 생각해봐여.
    한단계 한단계 배우고 싶어여.
    날씨가 화창합니다.
    활기찬 하루 되세여.

    perm. |  mod/del. |  reply.
  20. 2010.03.19 08:37

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  21. 디자이너스노트 2010.06.28 14:40 신고

    주석에 관한 사항은 몰랐는데...잘보고 갑니다. :D

    perm. |  mod/del. |  reply.