웹마스터 팁
알수없는 여백(공백,마진)이 생기는 문제 해결법 - 초보님용
2011.07.23 01:06
[ 여백, 공백, 마진 문제 ]
초보자분을 위해 글을 남깁니다. 저도 도데체 이것 때문에 몇 시간을 허비한지 모르겠습니다. 뭐... 저도 초보라서 초보적 관점에서 글을 적으니 초보님께는 정말 유용한 정보가 되리라 생각됩니다. 다양한 테스트를 통해 알게 되었네요.
알수 없는 여백(공백,마진)이 생기는 경우가 발생하면 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> 를 모두 제거해주셔야 하네요.
고수님들은 메타태그를 이용하시는 것으로 알고 있습니다. 이거저것 여기저기 글들을 읽으며 다양한 노하우를 읽었지만 근본적인 원인의 제거가 가장 좋을것 같습니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] | 제로시오 | 2008.07.04 |
레이아웃 상단에 공백,여백이 생길때 (css,html 등으로도 해결안되는 문제) [7] | Gnee | 2010.01.24 |
페이지 모듈 사용시 여백 관련한 팁! | sejin7940 | 2010.08.02 |
[Siren]페이지 여백 없애기 [8] | 세이렌 | 2002.07.31 |
[스타일시트] 페이지 여백 없애기2 ^^ ↓ 아래글을 보충합니다. [8] | ZipShin | 2002.07.31 |
알수없는 여백(공백,마진)이 생기는 문제 해결법 - 초보님용 [1] | 주영수 | 2011.07.23 |
Sketchbook5 게시판 스킨 본문 부분 여백 없애기 [7] | 짤막한글 | 2013.08.01 |
사용자정의 중 전화번호 형식을 쓰는경우 - 사이에 한칸씩 여백이 생기는 걸 없애는방법 [1] | sejin7940 | 2015.01.23 |
엇. 콘텐츠에서 자꾸 이미지사이에 여백이 생기길래 뭔가 했더니 <p>태그였네요.ㅠㅠㅠㅠ
익스10호환성에서는 여백없이 뜨긴 하는데
어째서인지 크롬과 파폭에서는 계속 여백이 있게 뜹니다.
이 문제는 제가 다시 찾아봐야할것같네요. ㅠㅠ
초보자를 위한 쉬운 글 설명 감사합니다! 2011년글인데...
까마득하네요. 하하