[ 여백, 공백, 마진 문제 ]

초보자분을 위해 글을 남깁니다. 저도 도데체 이것 때문에 몇 시간을 허비한지 모르겠습니다. 뭐... 저도 초보라서 초보적 관점에서 글을 적으니 초보님께는 정말 유용한 정보가 되리라 생각됩니다. 다양한 테스트를 통해 알게 되었네요.

알수 없는 여백(공백,마진)이 생기는 경우가 발생하면 CSS를 찾아보기 시작합니다. 아니면 layout.html 파일등을 뒤져보기 시작하겠지요.. 하지만 그래도 해결이 안되면 어찌해야 할까요... 마땅한 답이 없더라구요. 그래서 테스트를 시작했습니다.

정말 엉뚱하게도 <P> 태그가 원인이였습니다. 웹에디터를 사용하게 되면 이미지 삽입(기타 여러가지 등등)시 아래와 같이

<p><img src="파일경로/파일명" border="0"></p>

를 기본으로 자동 생성하게 됩니다. 바로 이것이 문제였네요. 그냥

<img src="파일경로/파일명" border="0">

이렇게 처리해야 합니다.

※ 드림위버 제외, 나모웹에디터 구버전부터 ~ 나모웹에디터 2008 버전까지...
나모웹에디터의 경우 <p>이미지</p> 처리를 하지 않을 경우 웹에디터상의 미리보기에서는 공백이 생깁니다. 편집은 그대로 하시되 최종 올릴때에는 울트라 에디트등에 소스를 복사해서 이미지 태그에 물려있는 <p>와 </p>를 제거해주면 되겠네요.

익스플로러7을 사용하시는 분은 아무 문제가 없었기에 갸우뚱.. 하실 수도 있겠습니다. 제가 익스플로러8 을 주로 사용하는데 이 <P> 태그가 익스7 과 익스8 에서 다르게 뷰를 합니다. 그리고 익스8의 [호환성 보기]에서도 여백처리가 다르네요.

익스7은
<p><img src="파일경로/파일명" border="0"></p>
되어도 정상적인 뷰를 보이지만 익스8은 여백이 생기는쪽으로 적용됩니다. 그래서 원하지 않던 테이블이 모두 밀려버려서 디자인이 엉망이 되죠. XE 에서만 생기는 문제네요.

익스7과 익스8 에서 모두 정상적으로 뷰를 시키려면
<img src="파일경로/파일명" border="0">
로 하셔야합니다. 결국 웹에디터로 작성하신 후에 자동으로 생성된 HTML에서 쓸모없는 <P>, </P> 를 모두 제거해주셔야 하네요.

고수님들은 메타태그를 이용하시는 것으로 알고 있습니다. 이거저것 여기저기 글들을 읽으며 다양한 노하우를 읽었지만 근본적인 원인의 제거가 가장 좋을것 같습니다.