본문 바로가기
유용한_팁/블로그_팁

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

by 씨디맨 2009. 9. 29.
320x100


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


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 공부에 도움될 책들
반응형

'유용한_팁 > 블로그_팁' 카테고리의 다른 글

예전 블로그로 접속 시 새 블로그 주소 알려주기  (49) 2009.10.12
티스토리 블로그 관리자 글쓰기 버튼 정말 필요한가  (42) 2009.10.08
티스토리 카테고리 글 더 보기 배경 꾸미기 - 블로그팁  (31) 2009.09.28
CCL 라이센스 표시 발행된 글에서 CSS팁으로 없애 보자 - 블로그팁  (23) 2009.09.24
블로그 팁 다음뷰 버튼 배경 꾸미기  (145) 2009.09.23

관련글

댓글

티스토리툴바