웹마스터 팁
알수없는 여백(공백,마진)이 생기는 문제 해결법 - 초보님용
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> 를 모두 제거해주셔야 하네요.
고수님들은 메타태그를 이용하시는 것으로 알고 있습니다. 이거저것 여기저기 글들을 읽으며 다양한 노하우를 읽었지만 근본적인 원인의 제거가 가장 좋을것 같습니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML] 글자태그 [4] | 태엽감는새 | 2002.02.26 |
[HTML]링크 클릭시 표시되는 테두리 점선 없애기 [3] | Shyos | 2002.02.26 |
[HTML]글자로 된 하이퍼링크의 밑줄 없애기 [9] | Shyos | 2002.02.26 |
▩폼 필드 예쁘게 꾸미는 법
[2]
![]() | ▩윤미 | 2002.03.02 |
아주!!간단한 나갈때인사말띄우기-_-
![]() | 란즈 | 2002.03.02 |
특수문자 사용하기
![]() | 란즈 | 2002.03.02 |
▩이미지가 너무많아 로딩할때 나오는 표시 [7] | ▩윤미 | 2002.03.03 |
▩배너링크할때 쓰면 정말 편한 것. [2] | ▩윤미 | 2002.03.03 |
마퀴(Marquee)태그를 애플릿처럼 부드럽게 움직이기!! [4] | 지진;) | 2002.03.04 |
▩마우스만 갖다대면 알아서 예쁜 새창이뜨고 때면 사라진다!! [10] | ▩윤미 | 2002.03.04 |
▩마퀴태그 이용한 플래쉬효과 내기 [3] | ▩윤미 | 2002.03.08 |
▩서서히 진해지는 그림 <예제포함> | ▩윤미 | 2002.03.08 |
특수문자 몇백개!! [2] | 포터시네마 | 2002.03.08 |
아름지기식 홈페이지만들기1 [4] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지만들기2 [1] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지 만들기3 [6] | 아름지기 | 2002.03.09 |
홈페이지 만들기 ① ▶계정 만들기◀ (아름지기님과 다름) [6] | 냠냠 | 2002.03.09 |
프레임 만들기
[6]
![]() | 냠냠 | 2002.03.10 |
▩마우스 따라다니는 정렬된 예쁜 글자들 [1] | ▩윤미 | 2002.03.11 |
아름지기식 홈페이지 만들기4 [14] | 아름지기 | 2002.03.12 |
엇. 콘텐츠에서 자꾸 이미지사이에 여백이 생기길래 뭔가 했더니 <p>태그였네요.ㅠㅠㅠㅠ
익스10호환성에서는 여백없이 뜨긴 하는데
어째서인지 크롬과 파폭에서는 계속 여백이 있게 뜹니다.
이 문제는 제가 다시 찾아봐야할것같네요. ㅠㅠ
초보자를 위한 쉬운 글 설명 감사합니다! 2011년글인데...
까마득하네요. 하하