CSS 박스 모델

벼리 · Post by 벼리 » 2004 12 01 20:28 38

DIV중첩일 경우의 박싱모델일경우 간단한 샘플페이지를 만들어서 테스트했는데.. IE랑 Mozila랑 차이가 많이나는 군여.. 우선 어느것이 맞는지 알고 싶구여..
IE에서 표현된거 처럼 표현되게 공통스타일을 작성하려면 어떻게 하는것이 좋을까요

참고페이지: <a href="http://fivewind.x-y.net" target="_blank">여기</a>

제목 바꿉니다. (빛알갱이)

소프트원트 · Post by **소프트원트** » 2004 12 01 22:57 09

W3C의 박스모델을 따르지않는 게, IE죠

W3C의 제안은 width값에 Border+Padding+Margin값을 추가합니다.
그러나 IE는 이들 값을 width값에서 뺍니다.

그러니 Border+Padding+Margin 이들 값을 설정한 박스모델에서는 비IE계열 브라우저와 IE가 웹페이지를 다르게 표시됩니다. 어그러지는 이유가 생기게 됩니다.

예를 들면 이렇습니다.

width=100으로하고 Border=10 Padding=10 Margin=10 이라고하면, 그런데 이들 값은 좌우측이 존재하니 아래와 같습니다.

(Border=10)*2+(Padding=10)*2+(Margin=10*2=60.

따라서 W3C의 박스모델의 크기는 100+60=160이 됩니다.

IE는 빼기라고 했죠.

100-60 = 40이 됩니다.

여기서 160과 40은 정보가 담기는 공간의 크기가 됩니다.

이 문제를 해결하는 방법은 또하나의 박스를 추가하는 것입니다.

두 브라우저 모두 [Border+Padding+Margin]을 주지않으면, 동일하게 표시됩니다. 즉 Width값만 있는 경우... 브라우저에서 동일하게 표시한다는 것입니다.

그래서 상위 레벨에서 하나의 박스를 더 추가하시면 됩니다.

박스크기를 300으로 잡기로 했다면 이렇게 하면 됩니다. 그리고 Border=10 Padding=10 Margin=10를 주기로 했다면

<div style="width:300px;"> --- 추가한 박스입니다.
<div style="margin:10px;padding:10px;border:10px;">
내용입력
</div>
</div>

이렇게 하면, 두 브라우저 모두, 300px크기로 박스모델을 형성하게 됩니다.

박민권 · Post by **박민권** » 2004 12 01 23:01 36

일단 파폭이 정상이며 드림위버도 제대로 알고 있는 것입니다.

IE는 워낙 CSS 버그가 많습니다. ㅡㅡ;

IE의 CSS 버그만 모아놓은 사이트도 있습니다.
http://www.positioniseverything.net/explorer.html

님의 문제에 대해 제가 답변을 드리겠습니다.

일단 span은 div 처럼 블럭스타일로 적용되지 않습니다.
div 사용시 두개의 div가 한줄에 오지 못한다는 것은 님도 아시리라 봅니다.
그건 div가 block스타일이라서 그렇습니다.

block스타일이 아닌 span은 width와 height가 먹지 않습니다.
span에 display: block를 하면 먹히게 되지만 이렇게 쓸 바에는 차라리
div를 쓰시는게 낫습니다.

block스타일의 div는 한줄에 올 수가 없기 때문에 님의 의도대로 나타내려면
div에 float: left; 속성을 주시기 바랍니다. 이것은 자기 다음 div등이 올때
자신의 위치를 어디로 둘 것인지를 뜻합니다.

<div style="width:100px; float:left;">1번박스</div>
<div style="width:100px; float:left;">2번박스</div>

두개의 div가 한줄로 나란히 되는걸 보실 수 있습니다.
저렇게 되면 다음 div를 밑으로 내리고 싶을때 좀 난감해집니다.

<div style="width:100px; float:left;">1번박스</div>
<div style="width:100px; float:left;">2번박스</div>
<div style="width:100px; clear:left">한줄박스</div>

clear:left를 사용해서 float:lleft를 마치는 것입니다.

clear:both 는 left와 right를 둘다 없애줍니다.

아래 예제를 파폭에서 돌려보시고 어떤 차이가 있는지 유심히 보시기 바랍니다.
저는 아래 clear:both를 따로 .clear{clear:both} 선언해서 수시로 쓰고 있습니다.

예제1
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
<div style="clear:both"></div>
</div>

예제2
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
</div>

예제2번에서는 빨간 테두리의 div가 아래 div들을 감싸지 못하는걸 보시게 될겁니다.

W3C문서 및 구글에서 해외 예제 샘플을 보시면 파폭이 규정을 준수하고 있고 IE가

비표준이라는걸 아시게 될겁니다. CSS를 익히는데는 많은 삽질이 필요합니다.

단 그 삽질을 파폭에서 하셔야지 IE에 맞춰서 하시면 그건 비표준 사이트를 만드시게

되는 것입니다. 표준만 준수하면 IE에서도 거의 잘 돌아가고 표준을 준수했는데도

IE에서 깨지는건 IE의 CSS 처리미숙 입니다. 그 부분에 대해서는 해외의 많은 사이트

에서 CSS Hack 라는 이름으로 해결방법들이 올라와 있습니다.

규정만 지키면 되는걸 IE 때문에 웹개발자들이 Hack찾으면서 고생하는 것이죠.

CSS 처음에 힘들고 파폭이랑 IE둘다 적용하는게 힘들더라도 포기하지 마시고
표준에 준수한 사이트를 개발하시기 바랍니다.

테이블이 하나도 없는 Only 레이어 사이트도 가능합니다. 힘내세요. 화이팅!

소프트원트 · Post by **소프트원트** » 2004 12 01 23:23 00

박민권님이 설명하였으니, 달리 말할 것은 없내요.

박스모델에 [블록:Block]과 [인라인:Inline]이 있습니다.

Block: 구간/구역이라고 하잖습니까? width에 의해 지정된 것이죠. 여기에는 div, table, p 등이 포함됩니다.

Inline: 풀어쓰면 줄 내부, 구간/구역의 내부정도라고 할 수 있죠. 말한대로 span, img, br 들이 있죠. 그래서 서식을 적용하면, width가 아니라 글이 입력된 범위안에서만 적용됩니다. img의 경우 전구간을 다 차지않죠.

사이트에 예제가 설명한대로 입니다.

소프트원트 · Post by **소프트원트** » 2004 12 01 23:39 53

수정권한이 없어서.. 다시 씁니다.

위에 잘못 썼기에.. [width에 의해 지정된 것이죠] 이 부분이..

글을 보고 생각했는 데, 블록과 인라인을 단순하게 정리하면 이렇게 생각하시면 됩니다.

width값을 주지않아도, 현재 라인을 다 차지하는 태그 정도로 하면 쉽지않을까 싶내요.

이렇게 설명하면 왜 table, p, div가 블록인 지를 쉽게 이해할 수 있을 것같내요.

배경색 지정해보면, 웹문서의 한 라인을 다 차지하잖아요..

CSS에 관심을 가지는 사용자가 늘어나는 것 같내요.. 좋은 현상... ^^

벼리 · Post by 벼리 » 2004 12 02 09:48 58

제가 사용하는 방식은 <DIV/>는 문단 태그 <SPAN/>은 문장태그로 구분해서 사용하고 있습니다... 사용성에서 봤을때는 IE방식이 더 좋게 보이는데요

IE에서의 랜더방식에 대해 오류라는 표현을 쓰시던데.. 제가 보기에는 확장이란 표현이 적합할 거 같은데..

Post by **hyeonseok** » 2004 12 02 10:35 23

벼리 wrote:제가 사용하는 방식은 <DIV/>는 문단 태그 <SPAN/>은 문장태그로 구분해서 사용하고 있습니다... 사용성에서 봤을때는 IE방식이 더 좋게 보이는데요

문단 태그는 p 태그가 있으니 문단에 div 를 사용하시면 안됩니다.

div 와 span 에 대해서 설명을 덧붙이자면...
div 와 span 은 둘다 html 의 구조를 추가하는 grouping 태그 입니다.

div 는 block level group
span 은 inline level group

입니다. id 나 class 가 필수적으로 따라오게 됩니다.

문서의 구조에만 관련된 태그이기 때문에 다른 용도로 사용하시면 안됩니다.

사용성 관련해서는...저도 처음에는 IE 가 더 직관적이지 않나...싶었습니다.
하지만 스펙에서 왜 그렇게 정의를 했는 가를 생각해보면 보다 더 합리적입니다.

width 는 사용자가 화면에서 보는 block 의 너비가 아니라 "컨텐츠가 들어가는 영역의 너비" 입니다. 그리고 block 의 너비는 width + padding + border 입니다. 그리고 이 block 과 다른 block 과의 거리가 margin 입니다.

table 에 익숙해져 있어서 IE 의 width 계산 법이 더 맞는 것 같지만 직접 CSS로 레이아웃을 제작하다 보면 표준이 더 합리적이라는 것을 느끼실 것입니다.

박민권 · Post by **박민권** » 2004 12 02 10:44 01

벼리 wrote:제가 사용하는 방식은 <DIV/>는 문단 태그 <SPAN/>은 문장태그로 구분해서 사용하고 있습니다... 사용성에서 봤을때는 IE방식이 더 좋게 보이는데요

IE에서의 랜더방식에 대해 오류라는 표현을 쓰시던데.. 제가 보기에는 확장이란 표현이 적합할 거 같은데..

오류가 맞는 이유는 W3C 규정과 틀리기 때문에 오류라고 말 할 수 있습니다.

만약 block과 inline스타일에 대해서 W3C가 IE의 방식을 규정으로 했다면 IE의

방식이 오류가 아니겠죠. 규정이 있는데 규정을 어긴다면 그것을 오류가 아니라고

할 수는 없습니다. 확장이라고도 할 수 없습니다. 이유인즉 확장이라 함은 차라리

<span style="IE확장:ok"> 이런 식으로 기능을 추가해야지 span 태그의 기본적인

inline 스타일의 처리방법을 변형한것은 비표준이며 오류입니다.

워낙 많은 사람들이 IE의 오류를 정상으로 알고 작업을 하고 있으므로 IE의 방식이

편할 뿐입니다. 규정에 준수하던 사람은 규정이 편합니다.

저희 회사에서도 사이트 만들때 IE의 버그 때문에 삽질 무지 하고 있습니다.

<table align="center"><td>
<table>
<td>환장하겠네 가운데 정렬되서 ㅡㅡ;</td>
</table>
</td></table>

오늘 발견한 버그는 XHTML DTD 선언한 문서인데 위처럼 위 테이블의 align이

아래 테이블까지 영향을 주는 바람에 이유를 몰라서 삽질한 버그입니다.

이 밖에도 div를 플로팅해서 썼을때 생기는 더블테이크 버그는 항상 발생하고 있습니다.

분명히 margin-left: 10px 를 해주더라도 플로팅한 div는 20px이 됩니다.

이게 과연 확장일까요? 확장은 확장이네요. 두배확장 ㅡㅅㅡ

Post by **hyeonseok** » 2004 12 02 10:46 31

소프트원트 wrote: W3C의 제안은 width값에 Border+Padding+Margin값을 추가합니다.
그러나 IE는 이들 값을 width값에서 뺍니다.

제가 이해를 잘 못해서 인지는 모르지만 이러한 방법으로 인식하는 것은 잘못 된 방법입니다.

표준 block 은 width + padding + border + margin 으로 되어 있는데
IE 는 width + margin 으로만 되어 있습니다.

IE 는 padding 과 border 가 전체 block 의 너비에 영향을 미치지 않습니다. 그래서 IE 에서 작업을 하실때에는 padding 과 border 를 width 와 함께 사용할때 주의 하셔야 합니다.

IE6 에서는 !DOCTYPE 선언으로 표준과 같이 작동하게 할 수는 있습니다.

또는, CSS Hack 을 사용하셔도 됩니다만...별로 추천하지는 않습니다.
div.my-block {
width: 100px;
padding: 10px;
border: 1px solid #000;
margin: 10px;
}
* html div.my-block {
width: 122px; /* width + padding*2 + border*2 */
}

하시면 동일한 결과를 얻게 됩니다.

* html ~~ selector 는 IE 에서만 인식을 합니다. html 상위에 element 가 있을리 만무한데 IE 에는 보이지 않는 그 무엇인가가 있고 그래서 위와 같이 select 해도 인식이 됩니다.

박민권 · Post by **박민권** » 2004 12 02 10:51 34

hyeonseok wrote: 표준 block 은 width + padding + border + margin 으로 되어 있는데
IE 는 width + margin 으로만 되어 있습니다.

IE 는 padding 과 border 가 전체 block 의 너비에 영향을 미치지 않습니다. 그래서 IE 에서 작업을 하실때에는 padding 과 border 를 width 와 함께 사용할때 주의 하셔야 합니다.

IE6 에서는 !DOCTYPE 선언으로 표준과 같이 작동하게 할 수는 있습니다.

IE의 저런 문제 때문에 저는 항상 XHTML DTD 선언과 더불어 XHTML 문법에
준수한 코딩을 하고 있습니다. 그나마 XHTML DTD선언 해주면 IE도 많은 부분이
규정과 맞춰지더라구요. 하지만 더블테이크 버그는 ㅡㅡ;
해외 사이트에서 CSS Hack을 찾지 못했으면 무지 고생했을 겁니다.
어제도 한개, 오늘 아침에도 1개. 이틀사이에 2번이나 발생했는데 우연히 어제
CSS Hack을 찾아내서 쉽게 고쳤답니다.
아직도 국내의 웹관련 자료는 너무나 열악한것 같습니다.

Post by **hyeonseok** » 2004 12 02 10:58 58

박민권 wrote: 이 밖에도 div를 플로팅해서 썼을때 생기는 더블테이크 버그는 항상 발생하고 있습니다.

이미 아시리라고 생각 되지만 (전에 사이트주소를 올리셨던 분이지요? ^^ ) http://positioniseverything.net/ 의 모든 IE 버그를 읽어 보시고 작업하시기를 권장해 드립니다.

저는 초기에 저러한 정보를 몰라서 거의 1년 넘께 삽질을 했습니다. ㅜㅜ
제가 추천할 만한 사이트는 저 사이트와 http://www.quirksmode.org/ 입니다.

아..그리고 double-margin 은 display: inline 하시면 해결 된다는 것 아시지요?

스펙에 보면...float 된 element 는 display: none 이 아닌 한 display 속성이 무시된다고 나와 있습니다. IE 는 display: inline 을 인식하고 버그가 수정되는 기염을 토합니다. 다른 표준 브라우져는 어짜피 display 가 무시되니...상관 없고요.

이러한 것은 거의 포지션에브리씽 사이트에 다 나와 있습니다. 저 사이트 하나만 있으면 CSS 로 사이트를 구축하는데 어려움이 없으실 것입니다.

화이팅~

박민권 · Post by **박민권** » 2004 12 02 12:03 05

hyeonseok wrote:
이러한 것은 거의 포지션에브리씽 사이트에 다 나와 있습니다. 저 사이트 하나만 있으면 CSS 로 사이트를 구축하는데 어려움이 없으실 것입니다.

화이팅~

inline으로 처리하는 것은 버그 사이트를 통해서 알고 있었습니다. ^^

표준을 준수하신지 1년이상 되셨다니 저는 올해 초까지만 해도 IE신봉자였는데

모질라를 만나고 부터 새롭게 다시 태어났습니다. ^^;

좋은 사이트를 추천해주신 보답 및 표준에 힘쓰시는 님을 위해 한가지 드리고 싶은게
있습니다.

최근에 자바스크립트로 구현한 것인데 select 태그를 읽어들여 div레이어로 구성된
콤보박스 및 메뉴로 변형시켜 주는 스크립트 입니다.

세이클럽의 메인 페이지에 보이는 select 태그인듯 비슷한 콤보박스라고 생각하시면
됩니다.

세이클럽 콤보박스는 익스전용에 비규정이지만 이번에 제가 만든 것은 최대한 규정을
준수하여 만들었습니다.

각 부분별로 css를 적용하여 원하는 스타일로 자유자재로 꾸밀 수 있습니다.

세이클럽 콤보박스는 스타일이 스크립트에 삽입되어 있어서 하나의 스타일 밖에
적용이 안되지만 css를 따로 완벽히 분리함으로 스크립트의 수정 없이도 한페이지에
여러가지 스타일의 콤보박스를 생성할 수 있습니다.

저희회사 디자이너들을 위해서 만들었는데 따로 배포하고 있지는 않습니다.

디자이너를 위해서 만들었기 때문에 프로그래밍 못하는 디자이너도 쉽게 적용하고
쓸 수 있도록 만들었습니다. CSS 응용력에 따라서 원하는 콤보디자인이 가능합니다.

따로 배포안하는 이유인즉 div레이어와 css로 구성되어 있어서 많은 국내 개발자들
에게 비탄을 받을것 같기에 차라리 배포를 포기하고 있습니다.
"차라리 테이블로 만들어라, 이게 뭐냐" 이런 소리들을 바에는 배포하기 싫습니다.

5일 밤낮을 밤새며 고생해서 만들었는데 웹표준을 준수하고 노력하시는 분들에게
배포하고 싶었습니다.

이 외에도 사각형 div의 테두리에 스크립트를 이용해서 라운딩 효과를 주는 것도
만들었는데 표준이 80%정도만 준수되어서 추후 수정할 계획입니다.

님 같은 분이라면 제가 아낌없이 소스를 공개해 드리겠습니다.

msn 메신저 ani2life@hotmail.com,
이것 보다는 네이트온 ani2life@nate.com
으로 친구등록 해주시면 제가 소스를 드리겠습니다.

연락주세요.

지나가다 · Post by **지나가다** » 2004 12 03 17:49 31

표준을 지키려는 모습이 보기 좋습니다

화이링~

Post by **Channy** » 2004 12 03 19:45 08

지나가다 wrote:표준을 지키려는 모습이 보기 좋습니다

화이링~

CSS레이아웃이란 기존의 TABLE로 문서의 배치를 짜던 것으로
라는 영역을 지정하여 좌우상하 배치를 하는 것을 말합니다.

간단하게 몇 가지 레퍼런스를 알려 드리면요.
http://www.macromedia.com/kr/devnet/mx/ ... ayout.html
http://www.thenoodleincident.com/tutorials

임프레스에서 출간한 월간 웹 2월호 강좌에 CSS 레이아웃 및 Hack 기초에 대한 강좌도 있으니 참고하십시오.

빛알갱이 · Post by **빛알갱이** » 2005 02 22 13:46 11

이 글타래도 끈적이 붙여서 위로 올리면 좋겠네요. 차니님, 해 주세요..

눈팅 · Post by 눈팅 » 2005 07 30 22:59 23

예제1
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
<div style="clear:both"></div>
</div>

예제2
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
</div>

먼저 board 가 아니고 border 이더군요...

왜 빨간 박스가 안 나올까 한참 고민 했습니다....-.-;

그리고 예제 1 과 예제 2가 IE 에서는 잘 나오지만
FF 에서는 예제 1은 잘 나오고, 예제 2는 잘 안나옵니다.

그런데 이론(?)상으론 예제 2가 맞는 것 아닌가요?

Post by **hyeonseok** » 2005 07 31 01:59 45

overflow: auto;

를 이용하면 Firefox 에서도 나옵니다.

float 를 이용하게 되면 공간을 차지 하지 않기 때문에 나오지 않는 것이 맞고 이것은 CSS2.1 스펙에 예시까지 보여주면서 잘 설명되어 있습니다.

rockbest · Post by **rockbest** » 2006 02 07 15:08 21

박민권 wrote:
예제1
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
<div style="clear:both"></div>
</div>

예제2
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
</div>

머리가 굳어서인지 왜 1번이 맞는 것인지 모르겠군요.
비슷한예제로 파폭해서 실험중이었습니다.

<div style="width:120px; board: 1px solid red;" clear:both>
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
</div>
<div>3번 박스</div>

제 의도는 1,2번 박스는 나란히,
3번 박스는 그 아랫줄에 놓는 것이었는데 자꾸 3번 박스가 2번 옆에 붙더군요.
이 글을 보고서 해결은 했지만 여전히 이해가 안됩니다.

상위 엘리멘트가 하위 엘리먼트의 프로퍼티에 영향을 받는 꼴이잖습니까.

Post by **hyeonseok** » 2006 02 07 16:04 16

rockbest wrote:머리가 굳어서인지 왜 1번이 맞는 것인지 모르겠군요.
비슷한예제로 파폭해서 실험중이었습니다.

<div style="width:120px; board: 1px solid red;" clear:both>
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
</div>
<div>3번 박스</div>

제 의도는 1,2번 박스는 나란히,
3번 박스는 그 아랫줄에 놓는 것이었는데 자꾸 3번 박스가 2번 옆에 붙더군요.
이 글을 보고서 해결은 했지만 여전히 이해가 안됩니다.

상위 엘리멘트가 하위 엘리먼트의 프로퍼티에 영향을 받는 꼴이잖습니까.

상위 엘리먼트가 하위 엘리먼트의 영향을 받는 것이 아니라 float된 하위 엘리먼트가 상위 엘리먼트의 영향을 받지 않는 것입니다. float된 엘리먼트는 상위 엘리먼트의 영역에 영향을 미치지 않습니다.

원하시는 대로 하려면 1번과 같이 빈 div 로 clear시켜줄 필요는 없고

Code: Select all

<div style="clear: left;">3번 박스</div>

하시면 됩니다.

제가 재대로 이해 했나요? -_-a

zhato · Post by **zhato** » 2006 03 27 05:15 22

그런데...
MS에 있는 DHTML 관련 문서처럼...

WEB Standard 도 일목요연하게...
정리된...그런 문서는 없을까요?

여기 파폭 웹 개발자 기술지원 문서도...

다 여기 저기 흩어져있구...

어떤 css attribute가 어떤 HTML Element 들에 사용이 가능한지 가능 안한지...

이렇게 정리되어 있지 않구...

그리구...ff가 표준을 100% 지원한담 모르겠지만...

그렇지 않다면...

ff가 지원하는 내용의 문서를 별도로 제작해줘야 하지 않나요?

ㅡ.,;... 어려워...

Mozilla 한국 커뮤니티

CSS 박스 모델

CSS 박스 모델

답은 이렇습니다.

오류가 맞습니다.

Re: 오류가 맞습니다.

Re: 오류가 맞습니다.

Re: 답은 이렇습니다.

Re: 답은 이렇습니다.

IE가 표준을 잘 못지키구 있는 부분이 많죠.

Who is online