박스모델에 대하여 질문 좀 있습니다.

[spaceplus]

예전에는 위에 있는 박스 모델에 관한 글을 읽고 별로 다른 생각이 없었는데요..

오늘 직접 사용해보니 웬지 좀 다르네요.. 혼자 어디서 헷갈리고 있는지 아무리 생각해도 안되네요.

윗글에 의하면 웹표준에서 아래와 같이 사용하면 모델 전체 크기가 360으로 된다고 합니다.
방금 제가 해보니.. FF나 IE6.0 에서 모두 360으로 나타나네요.. 왜 이럴가요?
ie에서는 응당 전체 박스 크기가 300으로 나오는거 아닌가요? 내용크기는 240으로 되고...전 이렇게 이해하고 있엇는데 아닌것 같아서요. 아!! 막 헷갈리네요...

Code: Select all

#center2{
	width: 300px;
	border: 10px solid #f00;
	margin: 10px;
	padding: 10px;
	background-color: #FAEBD7;
}

Code: Select all

<div id="center2">자유게시판 title center ex</div>

[hyeonseok]

IE6 는 표준 모드와 호환모드 두가지가 존재 합니다.
페이지가 표준모드로 랜더링 될지 호환모드로 랜더링 될지는 문서 상단의 DOCTYPE 선언으로 구별합니다.

http://msdn.microsoft.com/library/defau ... ements.asp

따라서 IE6 에서 적절한 DOCTYPE 선언을 할 경우 표준으로 랜더링 되기 때문에 Firefox 와 같은 결과를 보이게 됩니다. DOCTYPE 이 없거나 잘못된 경우, IE5.5 이하의 경우와 같이 300px 로 랜더링 되게 됩니다.

[spaceplus]

IE6 는 표준 모드와 호환모드 두가지가 존재 합니다.
페이지가 표준모드로 랜더링 될지 호환모드로 랜더링 될지는 문서 상단의 DOCTYPE 선언으로 구별합니다.

http://msdn.microsoft.com/library/defau ... ements.asp

따라서 IE6 에서 적절한 DOCTYPE 선언을 할 경우 표준으로 랜더링 되기 때문에 Firefox 와 같은 결과를 보이게 됩니다. DOCTYPE 이 없거나 잘못된 경우, IE5.5 이하의 경우와 같이 300px 로 랜더링 되게 됩니다.

웬지 박스모델에 대한 설명이 틀리지 않았나 의심스럽네요.
오늘 테스트 해본 결과입니다.

Code: Select all

IE6.0 과 FF 에서 모두 360px로 표시됩니다. 
IE3.0 아예 배경색을 읽지를 못하네요. 그래서 사이즈를 재지 못햇음.
IE4.01에서는 320px로 표시됩니다.
IE5.01에서도 320px로 표시.
IE5.5에서도 320px로 표시.

다른 한가지 질문 있는데요.. 오늘 이걸 테스트 하다가 발견하였느데.

아래와같은 코드에서 FF와 IE에서 다르게 해석하더라구요.. 예전엔 발견 못하였느데.

Code: Select all

/*초기화*/
*{
	margin: 0px;
	padding: 0px;
	border: 0px;
}
/*웹표준 박스 전체크기를 표시하기 위한 설정*/
#cc{
	background: #C0C0C0;
	width: 360px;
	height: 160px;
}
/*실제 사용할 박스*/
#center2{
	background: #9ACD32;
	border: 10px solid #FFE4E1;
	margin: 10px;
	padding: 10px;
	width: 300px;
	height: 100px;
}

Code: Select all

<div id="cc">
<div id="center2">gggg</div>
</div>

이렇게 하면 IE6.0에서는 두개 박스가 웹표준에서 말하는 CSS모델을 보듯이 잘 포현되는데요. FF에서는 두 박스가 동일한 위쪽 마진을 가지더라구요. 바깥 박스는 마진, 패딩, 보더가 초기화되어 있는데 말이죠. 안쪽 박스의 마진이 왜 외부로 상속할가요?
위에서 아래로 상속하는거 아닌가요. 이제껏 이렇게 생각햇는데 오늘 보니까 FF에서는 그렇게 해석안하네요.

[hyeonseok]

웬지 박스모델에 대한 설명이 틀리지 않았나 의심스럽네요.
오늘 테스트 해본 결과입니다.

Code: Select all

IE6.0 과 FF 에서 모두 360px로 표시됩니다. 
IE3.0 아예 배경색을 읽지를 못하네요. 그래서 사이즈를 재지 못햇음.
IE4.01에서는 320px로 표시됩니다.
IE5.01에서도 320px로 표시.
IE5.5에서도 320px로 표시.

음...이상하군요..제가 가지고 있는 IE5.01 과 IE5.5 에서는 MSDN 에 있는 설명과 동일하게 둘다 300px 의 폭으로 나옵니다. 어떻게 테스트 하셨나요? 저는 stand-alone IE 를 같은 Windows XP SP2 OS에서 테스트 했습니다. 간혹가다가 개별 OS에 설치된 IE와는 다르게 작동한다는 얘기가 있기는 합니다.

이렇게 하면 IE6.0에서는 두개 박스가 웹표준에서 말하는 CSS모델을 보듯이 잘 포현되는데요. FF에서는 두 박스가 동일한 위쪽 마진을 가지더라구요. 바깥 박스는 마진, 패딩, 보더가 초기화되어 있는데 말이죠. 안쪽 박스의 마진이 왜 외부로 상속할가요?
위에서 아래로 상속하는거 아닌가요. 이제껏 이렇게 생각햇는데 오늘 보니까 FF에서는 그렇게 해석안하네요.

normal flow block 상하의 margin 은 collapse 됩니다. 자세한 내용은 CSS2 스펙에 있습니다.

http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins

IE 는 width 나 height 를 설정안해줘서 dimemsion 이 없을 경우 (layout이 없다. 라는 말로도 표현 합니다.) 표준대로 margin-collapse 가 일어나지만, dimemsion 을 설정할경우 collapsing 이 일어나지 않습니다.

[spaceplus]

음...이상하군요..제가 가지고 있는 IE5.01 과 IE5.5 에서는 MSDN 에 있는 설명과 동일하게 둘다 300px 의 폭으로 나옵니다. 어떻게 테스트 하셨나요? 저는 stand-alone IE 를 같은 Windows XP SP2 OS에서 테스트 했습니다. 간혹가다가 개별 OS에 설치된 IE와는 다르게 작동한다는 얘기가 있기는 합니다.

제가 가지고 있는 IE3.0 ~ 5.5 를 가지고 직접 테스트 햇습니다. 운영체제는 2000 pro구요. Mac OS 면 몰라도 윈도우 OS들마다 또 다르게 표현된다면 표준이 어떻게 시행될수 있을가요? 후흣~~

normal flow block 상하의 margin 은 collapse 됩니다. 자세한 내용은 CSS2 스펙에 있습니다.
http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins

이 말은 서로 수직으로 배열되는 박스들의 수직마진이 통합된다는 말인것 같습니다.
내부에 있는건 부모를 참조하면서 생성되는걸로 알고 있엇는데요....
W3C에 이런 말이 있더라구요..

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.
2. For other elements, unless the element is absolutely positioned, the containing block is formed by the content edge of the nearest block-level ancestor box.
3. If the element has 'position: fixed', the containing block is established by the viewport.
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way:
1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
1. If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
2. If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.

참고주소: http://www.w3.org/TR/REC-CSS2/visudet.h ... ck-details

여기 말대로 하면 내부에 있는 박스는 부모를 참조 하면서 생성된다고 합니다.

아!!!!!배우면 배울수록 헷갈리는 웹표준...................
아직 너무 일찍한건 아닌가하는 생각도 해봅이다..요즘은..ㅎㅎㅎ

[hyeonseok]

제가 가지고 있는 IE3.0 ~ 5.5 를 가지고 직접 테스트 햇습니다. 운영체제는 2000 pro구요. Mac OS 면 몰라도 윈도우 OS들마다 또 다르게 표현된다면 표준이 어떻게 시행될수 있을가요? 후흣~~

동일한 디자인적인 적용도 중요하지만 본질적으로 표준을 적용하는 가장 큰 이유는 동일한 디자인을 보여주려는 것이 아니라 어떠한 환경에서도 최소한의 접근성을 보장하는 것입니다. 이것은 CSS가 나오기 이전의 낡은 브라우져에서의 접근성도 포함을 하고 있지만 그러한 브라우져에서 동일하게 디자인이 적용되어야 한다는 말은 아닙니다. 따라서 디자인이 모든 브라우져에서 다르게 적용된다고 해서 표준을 시행 할 수 없다는 확대 해석은 하지 마시기 바랍니다.

그리고 왜 spaceplus님이 가지고 계신 브라우져에서 그렇게 나오는지는 알 수 없지만 이미 전세계의 많은 사람들이 IE의 box모델과 표준랜더링의 차이를 확인했으므로 MSDN에 나온 설명이 정확한 것입니다.

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.
2. For other elements, unless the element is absolutely positioned, the containing block is formed by the content edge of the nearest block-level ancestor box.
3. If the element has 'position: fixed', the containing block is established by the viewport.
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way:
1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
1. If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
2. If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.

여기 말대로 하면 내부에 있는 박스는 부모를 참조 하면서 생성된다고 합니다.

margin-collapse 는 normal flow 박스에서 발생합니다. 인용하신 내용은 position 속성에 대한 설명이고 position 이나 float 을 적용한 박스는 normal flow 가 아닙니다.

[박민권]

동일한 디자인적인 적용도 중요하지만 본질적으로 표준을 적용하는 가장 큰 이유는 동일한 디자인을 보여주려는 것이 아니라 어떠한 환경에서도 최소한의 접근성을 보장하는 것입니다.

현석님 말씀처럼 가장 중요한 것은 접근성입니다.
통이미지를 올려서 디자인 한다고 하더라도 텍스트 브라우저로 접근시 디자인은 모두 사라지고 맙니다.
표준은 CSS 레이아웃이 아니라 웹접근성 입니다.
CSS 레이아웃을 사용하는 이유는 XHTML로 구조적인 문서를 작성시 문서의 구조를 깨지 않고 디자인을 입힐 수 있기 때문입니다.