DOCTYPE
Language/HTML 2011. 9. 28. 16:06xhtml 작업 중 documnet.body.clientHeight 가 잘못 나올 때가 있다.
(scrollTop, scrollLeft, offsetHeight 등등..)
이유는 바로 선언된 DOCTYPE.. 헤더를 보면 아래와 같이 DTD가 명시되어 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이 DTD만 삭제하면 된다고 하나, DTD가 없으면 각 브라우저는 자신들만의 방식으로 코드를 해석하기 때문에 같은 내용이라도 브라우저별로 다르게 보일 수도 있다.
그렇다면 해결방법은??
document.documentElement.clientHeight
document.body 대신 document.documentElement 를 사용하면 된다.
document.documentElement 는 document 엘레먼트를 읽기전용으로 반환하는 DOM 프로퍼티라고 한다.
아래와 같은 내용도 있으니 참고 할 것..
document.body : 일반(호환)모드
document.documentElement : 엄격모드
document.documentElement 의 또 다른 사용예가 있으니 가히 놀랍다하지 않을 수 없다.
"자바스크립트(Javascript)로 동적으로 생성한 HTML 소스보기"가 가능하다는 것!!
document.documentElement.innerHTML
간단하게나마 alert()을 통해 보면 innerHTML로 넣은 소스도 확인할 수 있고, 변경된 image의 URL도 확인이 된다.
자세히 보려면 textarea에서 확인해 보면 되겠다.
// 참고1. DTD(Document Type Definition)에 따른 문서 형식 // =================
출처 : http://blog.naver.com/jujiwan83/10086841325
HTML 4.01 호환모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능
HTML 4.01 엄격모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부tag가 적용안됨, 가장 이상적인 문서작성시 사용.
XHTML 1.0 호환모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1999년 12월 24일 확정된 프레임문서. frameset(프레임셋) 사용가능. 하지만 netscape.. ff쪽의 frame은 작동 안됨
XHTML 1.0 엄격모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// 참고2. HTML 4.x와 XHTML 1.x에서 기본적으로 지켜야 할 사항 // ================
출처 : http://blog.naver.com/jujiwan83/10086841325
- 문서 타입 명시
- <html> 태그에 xmlns, lang, xml:lang 속성 추가
예) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
- <html> 태그는 DOCTYPE 다음에 오는 맨 처음 태그
- 모든 엘리먼트는 소문자
- 시작태그와 종료태그를 항상 함께
예) <br />, <img src="..." />
- 모든 속성값은 큰따옴표로 둘어싸야 하며, 값이 있어야 함
- HTML 컨텐트에 & 사용금지 & 로 사용, 다른 특수 분자도 엔티티로 변환
// 참고3. xhtml 기본 세팅 // =================
출처 : http://www.actrun.com/bbs/board.php?bo_table=tip_html&wr_id=94&page=4
xhtml문서를 작성하기 전에 기본적으로 꼭 들어가야 할 요소들을 살펴보도록 합시다. xhtml은 대소문자를 구분하며, 열어준 태그는 반드시 닫아야 합니다.되도록 소문자로 작성하는 것을 장려합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD 선언을 해줍니다. DTD는 Document Type Definition 의 약자로서 문서형식을 정의해주는 것입니다. DTD가 없으면 각 브라우저는 자신들만의 방식으로 코드를 해석하기 때문에 같은 내용이라도 브라우저별로 다르게 보일 수 있습니다. 여기서는 일반적으로 많이 쓰이는 XHTML 1.0 호환모드인 XHTML 1.0 Transitional 로 정의했습니다. 다른 DTD는 XHTML 1.0 엄격모드 , HTML 4.01 호환모드, HTML 4.01 엄격모드 등이 있습니다만 잘 사용하지 않으므로 자세한 설명은 검색해보시면 나옵니다; 이왕 할꺼 [XHTML 1.0 엄격모드]로 하지!! 라는 분들도 계십니다만;; 제약사항이 좀 있는관계로.....;;;
2. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"></html>
html 처음부분이죠! 문서의 시작을 나타냅니다. xmlns="http://www.w3.org/1999/xhtml"는 본 문서가 xhtml로 작성되었음을 나타내는 것입니다. 일반 html문서는 <html>로 시작되지만 xhtml문서는 <html xmlns="http://www.w3.org/1999/xhtml">로 시작합니다.
lang="ko", xml:lang="ko" 각각 한국어를 사용할거라고 알려줍니다.
3. <head></head>
웹 페이지의 내용을 보여주기 전에 head 태그를 먼저 해석하기 때문에 head안에 들어가는 내용은 최소화 할수록 좋습니다. 꼭 필요한 정보들만 기입하도록 합시다. <meta> , <title> , <link> , <script> 와 같은 태그들이 들어갑니다.
4. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
본 문서에서 사용할 문자셋을 지정해 줍니다. 우리는 ecu-kr을 사용할 것이므로content="text/html; charset=euc-kr" 이렇게 지정해 주었습니다.
5. <meta name="description" content="저의 사이트입니다." />
본 문서의 간략한 설명을 적어줍니다. 또한 메타태그의 문자는 가급적 200자를 넘기지 않도록 하는것이 좋습니다.
6. <meta name="keyword" content="XHTML 스타일시트 웹표준" />
검색엔진 로봇은 컴마(,)를 무시하므로 키워드를 구분할 때는 한칸을 띄워주면 됩니다.
7. <title>웹표준을 지키자</title>
본 문서의 제목을 써줍니다.
8. <link href="css/default.css" rel="stylesheet" type="text/css" />
스타일 시트를 가져옵니다. 03편에서 미리 만들어둔 default.css 파일을 css폴더안에 넣고 연결시켰습니다.
9. <body></body>
<body> 와 </body> 사이에 본문 내용이 들어가면 되겠죠 ^-^?
'Language > HTML' 카테고리의 다른 글
| border-collapse (0) | 2011.05.12 |
|---|---|
| input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0) | 2010.11.10 |
| Div속성 (0) | 2010.10.20 |
| 메타(META)태그 (0) | 2010.10.07 |
| cellpadding, cellspacing (0) | 2010.09.29 |