웹마스터 팁

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

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

알수 없는 여백(공백,마진)이 생기는 경우가 발생하면 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> 를 모두 제거해주셔야 하네요.

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

제목 글쓴이 날짜
상담게시판 바로 글쓰기 이동하기 팁.. [3] 만쓰별(정만) 2009.02.05
XE 1.7 에서 닉네임 클릭시 홈페이지나 블로그 등이 새창으로 안 뜨는 버그 수정법 [1] sejin7940 2013.10.07
1.7 이상 기본레이아웃, ie9에서 1차메뉴 깨짐 현상... [3] uoou 2013.10.07
기본 URL 설정 팁 [4] EvangelineA.K.Macdowell 2013.10.25
익명 게시판을 사용중일때 이미지 썸내일표시. 말똥이 2013.10.27
기본 url 을 공란으로 둔 경우 `잘못된 요청입니다' 메시지 [6] samsara 2013.02.24
웹사이트 최적화 방법론 [4] 다크진 2013.09.17
스케치북 1.7.2.1 게시판 닉네임 짤림 오류 임시 수정법 귀머거리하늘 2013.10.21
스케치북 1.7.2.1 게시판 상단 내용 오류 수정 방법 귀머거리하늘 2013.10.21
.htaccess 에서 캐시 설정(?) [1] socialskyo 2013.10.20
썸네일 생성이 되지 않을시 확인할 내용.. [4] 또나아빠 2008.06.17
특정 확장변수값이 포함된 글의 총 개수를 출력하는 함수 [3] sejin7940 2012.08.07
알수없는 여백(공백,마진)이 생기는 문제 해결법 - 초보님용 [1] 주영수 2011.07.23
오래된 게시글에 댓글포인트 안주기 [6] Xiso 2013.05.04
영문 스팸 방지 [13] 스토리웨이 2013.09.16
페이북 좋아요 버튼 애드온 [2] file 똑디 2013.10.11
소스에서 php short tags 제거하기 [1] file 토우코 2007.11.24
게시판에 다른 테이블 값 직접 가져오기 [1] 똑디 2013.10.11
XE 팝업모듈과 애드온 : XE_Popup_Borderless [7] file 우진홈 2013.05.17
[PHP 동영상강의] 41. 추천사이트(북마크)프로그램 만들기 [4] 서기 2006.02.27