Mozilla 한국 커뮤니티

안녕하세요.
그동안 웹사이트 레이아웃을 Table로만 작성해오다가 이번에 DIV로 작업하려고 하는데, 난관에 봉착했습니다.

다름이 아니라 DIV태그에 대한 IE와 FF의 해석이 전혀 다릅니다. 아니면 제가 DIV를 제대로 못쓴건가요?
DIV태그를 이용해서 하나의 틀을 만들고 그 안에 배경 등을 넣어줬습니다. 다시 DIV태그를 넣어주었습니다. 흔히 테이블 안에 테이블을 넣는것처럼 말이죠...
별다른 속성을 적용하지 않았을 때, IE와 FF는 똑같은 화면을 보여줍니다. 그런데, 여백에 대한 속성을 넣었더니 완전히 화면이 다르네요.

http://myd.new21.net/zboard/data/pds/snap_639.jpg

A라는 DIV를 만들고, 그 안에 B라는 DIV를 넣었습니다. B이름을 가진 DIV에는 margin-top:15px 속성을 넣어주었죠. A DIV의 태그와 태그사이에 B DIV의 태그가 들어갑니다.
IE에서는 A DIV 영역의 위에서부터 15픽셀 부분에 B DIV가 위치합니다.
FF에서는 A DIV 영역을 벗어나, 페이지 맨 위에서부터 15픽셀 부분에 B DIV가 위치합니다.
한마디로 IE에서는 DIV안에 DIV가 들어간 걸 인식했는데, FF에서는 DIV안에 DIV가 들어간걸 인식 못하고 전혀 별개로 치는것 같더군요. 화면이 완전 다릅니다.
이걸 어떻게 해결해야 할지... 아니면 DIV안에 DIV넣는게 잘못된건가요? 아님 별도의 속성값이 필요한가요? 정말 답답하네요 휴..

kidno wrote: 한마디로 IE에서는 DIV안에 DIV가 들어간 걸 인식했는데, FF에서는 DIV안에 DIV가 들어간걸 인식 못하고 전혀 별개로 치는것 같더군요. 화면이 완전 다릅니다.
이걸 어떻게 해결해야 할지... 아니면 DIV안에 DIV넣는게 잘못된건가요? 아님 별도의 속성값이 필요한가요? 정말 답답하네요 휴..

DIV안에 DIV의 사용은 잘못된 것이 아닙니다.

이 문제(?)는 margin의 통합에 따른 정상적인 동작으로써 오페라에서도 불여우와 같은 동작을 보여줍니다.

이 부분에 대해서는 아래의 링크를 참고하세요.
http://trio.co.kr/webrefer/css2/box.htm ... ng-margins
'수직마진은 통합된다. 수평마진은 절대 통합되지 않는다.' 라는 글이 있습니다.

님이 작성하신 소스의 바깥 DIV에 border: 1px solid #000; 스타일을 줘보세요.
다른 동작을 보여주게 될 겁니다.

글을 읽기만 해서는 이해가 쉽게 되지는 않으실 겁니다.
여러가지 방법으로 테스트 해보시면 margin의 특성에 대해서 알 수 있습니다.

CSS로 페이지 작성중 익스와 불여우의 화면이 다르면 불여우가 정답이라고 생각하시고 작업하시면 좋습니다.
그래도 의심이 가시면 오페라와 같이 테스트 해보시면 더욱 좋습니다.

http://trio.co.kr/webrefer/css2/box.html#collapsing-margins wrote: CSS2에서 수평 마진들은 절대로 통합되지 않는다.

수직 마진들은 박스들사이에서 통합될 수 있다:

* 정상 흐름(normal flow)에서 블럭(block) 박스들의 두개이상의 인접 수직 마진들은 통합된다 그 결과 마진 너비는 인접 마진 너비들의 최대로 된다. 음수 마진의 경우, 음수 인접 마진의 절대값 최대를 양수 인접 마진들의 최대로 부터 뺀다. 만일 양수 마진이 없으면, 음수 인접 마진의 절대 값 최대를 0(zero)로 부터 뺀다.
* 유동된(floated) 박스와 다른 박스의 수직 마진들사이에서는 통합이 이루어 지지 않는다.
* 절대적으로와 상대적으로 위치된 박스의 마진들은 통합(collapse)되지 않는다.

수직 margin은 통합되고 수평 margin은 통합되지 않는다니 -ㅁ-
전혀 상상도 못했던 일입니다.
아무튼 덕분에 문제점이 무언지 알 수 있었습니다.
저의 경우에는 이것저것 해보다가...
가장 밖에 위치한 div의 padding값을 줘서 해결해버렸습니다...;;
하루빨리 IE도 표준을 지켰으면 좋겠네요. 사용자는 제일 많으면서 표준은 제일 안지키고..쩝
아무튼 감사드립니다.