웹페이지의 레이아웃이 다를 때 - DOCTYPE 선언의 중요성

일단 웹프로그래밍을 하면서 새로 만드는 JSP 파일에 DOCTYPE을 신경쓰지 않은 점 깊이 반성합니다..ㅎㅎ

.....

거참 2년 넘도록 웹개발하면서 브라우저 종류나 버젼에 따라 레이아웃이 달라지는거땜에 고생한적은 있어도

DOCTYPE을 선언하지 않아서 쿼크모드로 렌더링되는거 땜에 레이아웃이 다르게 표시될거라고는 신경도 안쓰고 있었는데...

며칠전 이거땜에 무려 반나절을 삽질 했네요...ㅋㅋㅋ

매번 복사해서 써버릇하다보니 DOCTYPE 선언에 대해 신경 못쓰고 있었지요..ㅠ

위에서 잠깐 언급했듯이 DOCTYPE 을 선언하지 않으면 각각의 브라우저는 지들 나름대로의 기준으로

알아서 렌더링 해버린답니다. 그게 바로 쿼크모드 렌더링이라는거구요..

위키내용 인용하자면..

웹 브라우저는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만 문서 형식 선언이 있는 HTML 문서를 표준 모드로 렌더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다.

직접적으로 예를 들면

요런 놈들이 문제가 됐었는데

DOCTYPE 미선언 시 요소의 높이가 28px,

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

요런 DOCTYPE 선언 시 요소의 높이가 16px

이렇게 다르게 렌더링이 되더란 말입니다.

항상... 무슨 일이던지.. 기본을 잘 지킵시다! ㅎㅎ

자세한 DOCTYPE 설명은 아래에서...

인트라넷 SSL 인증서 오류 해결 (0)	2015.07.29
[CSS] IE8 에서 zoom 변경 시 높이 지정 삽질 해결 (0)	2015.07.29
[android studio 오류 해결] Unable to start the daemon process 오류 해결 (0)	2015.07.16
[Eclipse 에러] Specified VM install not found 오류 해결 (0)	2015.07.15
[Android Studio 오류 해결] sdk manager error - peer not authenticated (0)	2015.07.10

소림사의 홍반장!