요즘 새로운 레이아웃으로 아이패드를 위한 레이아웃 만들기에 대해 열공하고 있습니다...^^
아이패드는 참 별난놈입니다. 홈페이지가 가로방향 세로방향으로 돌아가기 때문이지요.
"이것을 XE 레이아웃에 적용하면 어떻게 될까?" 새로운 도전과제가 생긴 것이지요.
해외 개발자의 글을 참고하여 본격적인 XE를 위한 아이패드 레이아웃의 기본 틀을 완성해 갈 무렵 "귀신이 곡할 노릇"의 문제가 발생하였습니다. 마지막 푸터의 텍스트 문자열 중에서 한 글자가 밑으로 떨어져 출력되는 것입니다.

Copyright © 2011 XEschool Layout for iPad All rights reserved.
                                          d.

이렇게 말이죠!
"도대체 무엇이 잘못된 것인가?" HTML 소스, CSS 소스를 아무리 뒤져보고, 찾아보고, 뒤집어 엎어보아도 유독 IE6에서만 그런 형상이 발생합니다. 참고로 저는 FF를 기준으로 만들고 IE6에서 버그픽스를 합니다. 이런 오류를 뭐라고 검색해야 하는지도 모릅니다...^^
씨름한지 3시간 째, 우연히 DIV 위에 있던 주석이 지워진 채 확인한 결과 정상출력!

<!-- 푸터 시작 --> // 지워진 주석
<div id="footer">
   <p class="copyright">Copyright &copy; XEschool Layout All rights reserved.</p>
</div>
<!-- // 푸터 끝 -->

이때 나오는 말이 "왜? XE는 주석을 해석하고 알 수도 없는 오류를 만드는 거야!!!"
얼마전 XE 템플릿 문법을 정리하면서 분명 주석은 해석하지 않을 것이라는 믿음을 갖고 있었는제 XE에 문제가 있다고 생각한 것이지요. 그리고 위아래 주석을 제거하고 레이아웃 기본틀을 끝냈습니다.

오늘 우연히 "inline-block은 어느때 쓸까?"를 공부하면서 우연히 링크를 따라가다보니 정찬명님의 글을 발견하게 됩니다.

IE6 : Duplicate Characters Bug.
IE6가 문자를 중복으로 출력하는 버그 입니다. 이 버그는 연속된 float 요소가 존재하는 가운데 마지막으로 float된 요소가 담고 있는 문자의 끝부분을 아무 이유없이 중복으로 출력하여 화면 배치를 깨뜨리게 됩니다. 이 버그는 float된 요소 사이에 ‘화면에 표시하지 않는’ { display:none; } 콘텐츠 또는 <!-- 주석 --> 또는 <input type="hidden" /> 요소 등을 포함하고 있을 때 발생합니다. CSS를 이용한 화면배치 기법을 사용하는 사람이라면 누구나 한번쯤 만났을 법한 버그 입니다. IE6 : Duplicate Characters Bug Demo 데모 페이지를 IE6로 접근하시면 버그를 확인하실 수 있습니다.

정찬명님의 이 글을 보면서 엄한 XE를 탓한것에 대한 죄책감 내지는 한없는 미안함이 밀려옵니다...^^
레이아웃의 모든 DIV가 Float된 상태였습니다. 그리고 늘 그렇듯 주석이 있었지요. 이것이 문제였습니다.

개발자의 노트를 보면서 지식의 나눔과 공유를 통해 진정한 Happy! World Wide Web을 만들고 계신 정찬명님에게 진심으로 감사를 드립니다...^^ 고맙습니다...

관련자료 : http://naradesign.net/wp/2009/01/07/521/