DOCTYPE 에 따른 Table 다르게 표현되는 현상 정보
DOCTYPE 에 따른 Table 다르게 표현되는 현상
관련링크
본문
일반적으로 사용하는 DTD 형식은 다음과 같습니다.
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 5
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.1
XHTML 1.1
XHTML Mobile 1.0
위의 2개의 HTML 화면이 있습니다. Tabel 로 구성된 HTML 문서이며, DTD 형식이 다릅니다.
DTD 사용시 표현방법에 따라서 아래와 같이 오류와 정상으로 표시되는 것을 정리했습니다.
그외의 것들은 Table 이 아닌 DIV 를 사용해서 화면 구성해야만 의도한 모습으로 표현이 되니 사용이 주의가 요합니다.
1) < 정상 > HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
2) < 오류 >HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
3) < 오류 > HTML 5
<!DOCTYPE html>
<html lang="ko">
4) < 정상 >XHTML 1.0 Transitional
<!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">
5) < 오류 >XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
6) < 오류 >XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
7) < 오류 >XHTML Mobile 1.0
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
이것에 대한 해결방법이나 이유를 아시는분 코멘트 부탁드립니다.
추천
1
1
댓글 6개
테이블 하고 css 소스를 봐야 답변이 달릴듯합니다.
독타입에 따라 다르게 표현되는거 맞아요
CSS 아무리 적용해도 독타입때문에 오류 생기기도 하더라구요
무조건 1px의 귀신사이즈가 생김. margin border padding 없에도 오류있는 독타입은 문제가 많아요
CSS 아무리 적용해도 독타입때문에 오류 생기기도 하더라구요
무조건 1px의 귀신사이즈가 생김. margin border padding 없에도 오류있는 독타입은 문제가 많아요
테이블 하고 css 소스를 봐야 답변이 달릴듯합니다. 2人
테이블이 깨지는 현상은 CR/LF 코드를 특수문자로 인식할 때 나타났습니다. 브라우저 마다 소스코드 편집기에서 붙게 되는 개행문자를 무시하는 것도 있고 인식하는 것도 있었습니다.
편집기에서 엔터를 쳐서 줄바꿈을 하면 문자열 끝에 이런 개행 문자가 붙는다는 건 자료구조 시간에 다 배우는 것이니...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
두 개의 독타입을 봤을 때 xhtml 규정을 loose, transitional로 엄격하지 않게 적용했을 때 테이블이 깨지지 않는 걸로 봐서 css 보다는 브라우저 종류와 버전에 영향이 있는 거 같습니다.
CR/LF를 특수문자로 해석해서 브라우저에 송출했을 때 table 태그를 해석 할 때 이것을 무시하느냐 그대로 브라우저에 출력하느냐에 차이가 있는 거 같습니다. loose나 transitoinal은 그렇게 까다로운 독타입이 아니니 아마도 태그 해석 할 때 특수 문자(눈에는 보이지 않지만 저장 했을 때 바이너리 코드 형태로 존재하는)는 무시하는 게 아닐까 싶네요.
약 2,3년 전에 이런 테이블 개행문자 인지로 인한 테이블 깨짐 현상을 접했는데 물론 제가 틀렸을 수도 있습니다. 코드를 봐야 알겠지만 당시에는 <tr><td> 태그를 개행하지 않는 걸로 해결을 봤습니다.
편집기에서 엔터를 쳐서 줄바꿈을 하면 문자열 끝에 이런 개행 문자가 붙는다는 건 자료구조 시간에 다 배우는 것이니...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
두 개의 독타입을 봤을 때 xhtml 규정을 loose, transitional로 엄격하지 않게 적용했을 때 테이블이 깨지지 않는 걸로 봐서 css 보다는 브라우저 종류와 버전에 영향이 있는 거 같습니다.
CR/LF를 특수문자로 해석해서 브라우저에 송출했을 때 table 태그를 해석 할 때 이것을 무시하느냐 그대로 브라우저에 출력하느냐에 차이가 있는 거 같습니다. loose나 transitoinal은 그렇게 까다로운 독타입이 아니니 아마도 태그 해석 할 때 특수 문자(눈에는 보이지 않지만 저장 했을 때 바이너리 코드 형태로 존재하는)는 무시하는 게 아닐까 싶네요.
약 2,3년 전에 이런 테이블 개행문자 인지로 인한 테이블 깨짐 현상을 접했는데 물론 제가 틀렸을 수도 있습니다. 코드를 봐야 알겠지만 당시에는 <tr><td> 태그를 개행하지 않는 걸로 해결을 봤습니다.
개행으로도 재미 볼 수 있고요...
font-size:0px;
을 넣어주시면 원하는 사이즈로 변경 됩디다..
font-size:0px;
을 넣어주시면 원하는 사이즈로 변경 됩디다..
폰트 사이즈를 0 으로... 오..
테스트 해봐야겠네요. 감사합니다.
테스트 해봐야겠네요. 감사합니다.
