Mozilla 한국 커뮤니티

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>ONL</title>
<style type="text/css">

</style>
</head>
<body>
<div id="Wrap">
<div id="Header">topMenu자리</div>
<div id="MiddleBox">
<div id="LeftCol">
<div id="LeftColImg">
<img src="/images/left_top.gif" alt="companyImg" />
</div>
<div id="LeftColMenu">css어려워요ㅡ.ㅡ;</div>
</div>
<div id="RightCol">
<div id="RightColImg">
<img src="/images/img.jpg" alt="subImg" />
</div>
<div id="TitleBox"><span class="PaddingLeft20"><img src="/images/title.gif" alt="title" /></span></div>
<div id="MainContents">
본문내용들어갈 자리입니다.ㅡㅡ;</div>
</div>
</div>
</div>

<div id="FooterWrap">
<div id="Footer"><img src="/images/copyright.gif" alt="copyright" /></div>
</div>

</body>
</html>

#MiddleBox{

background:url("images/big_bg.gif") repeat-y;

#TitleBox{

background:url("images/title_bg.gif");

이미지 경로 요렇게 하고 테스트 하는것이 좋을꺼 같아요 ^^;

#MiddleBox{
width:845px;
background:url("/images2/common/big_bg.gif") repeat-y;
/*질문1 : 백그라운드 y-repeat이 안보입니다. LeftCol과 RightCol을 빼면 보이는데 말이죠 ㅡㅡ; 이문제를 어떻게 해결해야합니다까? 참고로 845px안쪽으로 1px씩 회색라인, 185에 1px 회색라인을 넣고 싶습니다. IE는 보이던데 ....onl*/
}

현재 #MiddleBox 의 높이는 0px 입니다. 왜냐하면 #MiddleBox 내부에 포함된 자식요소들이 모두 float 되어있기 때문입니다. float 된 상자들은 마치 레이어 처럼 화면에서 전혀 영역(너비/높이)을 차지하지 않습니다. 따라서 #MiddleBox 안쪽에는 영역을 차지하는 것이 아무것도 없으므로 높이가 0px 이 되는것이고 그것때문에 배경이 보이지 않았던 것입니다. 그것이 표준 렌더링 방식이 맞습니다. IE에서 배경이 보였던 것은 IE가 #MiddleBox 를 잘못 렌더링 한 것입니다. 해결 방법은 float 된 자식요소들의 높이값을 부모에게 전달해 주면 됩니다.

#MiddleBox 에 overflow:hidden 이나 overflow:auto 를 추가하시면 float된 자식요소들의 높이값이 부모에게 전달되어 이 문제를 간단하게 해결할 수 있습니다. 이 문제는 아래 4번 질문과도 관련이 있으며 4번 문제도 동시에 해결 됩니다.

#FooterWrap{
width:100%;
background-color:#ededed;
clear:both;/* 질문 4: clear:both를 안쓰고 실행하면 위에까지 모두 회색으로 됩니다. 왜그럴까요? */
margin:0
}

#MiddleBox 의 높이가 0px 이었기 때문에 #FooterWrap 이 마치 #MiddleBox 와 겹치는 것처럼 보인 것입니다. 앞서 설명드린대로 #MiddleBox 내의 float 된 자식요소들의 높이값이 #MiddleBox에 전달되면 이 부분에서 clear:both 는 빼도 상관 없습니다. clear:both 는 float 된 요소들이 더이상 아래쪽 상자에 영향을 주지 않도록 float 을 해제시키는 속성입니다. 적절하게 잘 사용하셨지만 1번 문제를 해결했기 때문에 더이상 clear:both 는 무의미 합니다.

/*질문2 : 패딩을 주면 ff브라우저는 padding을 포함하기 때문에 13px만큼 높이가 커집니다. 그런데 IE는 패딩을 포함한 박스를 계산하기 때문에 높이가 맞습니다. 이걸 어떻게 해결할까요?*/

일단 FF가 렌더링 하는 방식이 바른 렌더링이구요. 이 문제는 IE가 Quirk 모드에서 실행될때만 발생하는 것으로 알고 있습니다. Quirk 모드는 DTD가 없거나 문제가 있을 때 IE가 렌더링하는 방식이구요. DTD를 올바르게 적으면 해결되지 않을까요? (저는 현재 집이고 IE7만 깔려있어서 IE6에서 어떻게 렌더링 되는지 테스트 못해봤습니다.) XHTML Transitional 모드로 DTD 변경을 권합니다. 바른 DTD 코드는 아래 참조해 주세요.

Code: Select all

[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"] 
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]

width:auto; /*질문3 : 여기서 오토를 쓰면 나머지를 자동을 계산해서 660입니까?*/

네, 아마도 그럴것입니다. 하지만 width 속성을 적지 않았을 때 블럭요소의 width 는 자동으로 auto 가 됩니다. 즉, 이렇게 따로 적을 필요가 없었다는 뜻이죠.

충분한 답변이 되셨습니까?
이상 웹표준 전문 상담원 정찬명이었습니다. ^^a

#MiddleBox 에 overflow:hidden 이나 overflow:auto 를 추가하시면 float된 자식요소들의 높이값이 부모에게 전달되어 이 문제를 간단하게 해결할 수 있습니다. 이 문제는 아래 4번 질문과도 관련이 있으며 4번 문제도 동시에 해결 됩니다.

저도 이 문제 때문에 골치였는데, 감사합니다. ^^
역시 해결방법이 있었군요.

그런데, 불여우와 오페라에서는 dece24님 말씀대로 overflow:auto 를 추가하니까
해결되는데, IE6에서는 안되더군요..

그래서,

Code: Select all

#엘리먼트ID {
  overflow: auto;
}

* html #엘리먼트ID {
  height: 최소높이;
  overflow: visible;
}

이렇게 일단 해결했네요.

감사합니다. ^^

k1님, IE 에서 제대로 렌더링 되지 않은것은 아마도 너비값이 없었기 때문일 껍니다. 물론 다른 브라우저는 너비값이 없어도 제대로 렌더링 해주지만 IE는 고딴식으로 꼭 사람을 피곤하게 하곤 하죠 ^^a

overflow:auto 사용에 대한 추가팁을 더 적어봅니다. 이어서 봐주세요.

너비/높이 가운데 어느 한쪽이라도 고정된 상태에서 overflow:auto 를 사용하게 되면 자식요소의 너비/높이가 부모의 너비/높이를 초과하게 될 때 부모요소에 스크롤바가 생기게 됩니다. 요기까지는 다들 아실껍니다.

이런 경우 때문에 저는 보통 overflow:hidden 을 사용하고 있습니다. 그런데 이렇게 되면 자식이 부모를 초과하게 될 때 초과되는 영역의 콘텐트는 보이지 않는 문제가 생기게 되므로 overflow:hidden 은 자식요소가 부모를 절대로 초과하지 않는 경우이거나 또는 초과하는 영역까지 보여줄 필요가 없을 때에만 사용하기에 적절합니다.

하지만 부모를 초과하는 자식요소를 모두 보여주어야 한다고 가정하면 overflow:auto 를 사용하는 것이 적절하고 부모요소에 다음과 같은 코드를 추가하면 이것에도 적절하게 대응이 가능 합니다. IE 전용속성을 이용한 기법 입니다.

Code: Select all

{ overflow:auto; display:table; table-layout:fixed; overflow-x:visible; overflow-y:visible; width:600px; }

display:table 이라는 속성은 overflow:auto 로 인하여 생겨나는 스크롤바를 생기지 않도록 하는 역할을 해줍니다. 한편 IE라는 브라우저가 세상에 없다면 아래처럼만 코딩해도 됩니다.

Code: Select all

{ overflow:auto; display:table; table-layout:fixed; width:600px; }

그런데 IE는 display:table 이라는 속성을 지원하지 않기 때문에 박스모델(div)의 기본값인 display:block 상태로 렌더링 될 것이고 한편 table-layout:fixed 속성은 지원하기 때문에 부모를 초과하는 영역은 보여주지 않게(hidden) 됩니다. 따라서 별도의 overflow-x:visible; overflow-y:visible 이라는 IE 전용속성을 추가하여 IE 에서도 부모를 초과하는 자식요소의 모습을 보이도록 만들어 주는 겁니다.

물론 다른 브라우저에서는 IE 전용속성을 무시하며 오류를 유발하지 않기 때문에(FF, OP, SF..)에서도 동일한 렌더링 결과를 보장 합니다.

간단하게 설명하려고 했는데 글이 길어졌네요. 좀 복잡하죠?^^; 이해가 되실런지 모르겠는데 한번 테스트 해보시고 필요하면 추가질문 주세요. 시간날 때 A/S 해드리죠 뭐 ^^;

일단 overflow:hidden이 정상적으로 작동하는 상황이라면 IE든 FF든,
{width:845px;overflow:hidden;} 이면 충분하것이 아닌지요?
폭은 고정되고, 높이는 내용물만큼 늘어나고.
table-layout:fixed;가 굳이 필요한 것이지요?

overflow:hidden 은 자식요소의 크기가 부모를 초과할 때 부모상자의 바깥쪽으로 초과되는 영역은 숨겨서 보여주지 않게 됩니다.

그러나 overflow:auto 는 자식요소의 크기가 부모를 초과하였을 때 부모보다 초과된 자식요소의 영역을 모두 보여주는 차이가 있습니다.

zzz 님이 말씀하신 table-layout:fixed 는 부모상자의 overflow 속성이 auto 일 때 부모상자의 크기가 자식요소의 너비/높이에 따라서 변하는 것을 방지하기 위한 코드입니다.

테스트 해보시면 아시겠지만 그것을 넣거나 넣지 않는 경우에는 명백한 차이가 존재합니다.

모두의 답글 감사합니다.
clear:both;랑
overflow에 대해 명확히 알게되었습니다
그리고 float의 속성도요..
고마운 분들의 답글에 힘입어 열심히 해야겠습니다!
새해 복많이 받으시고 건강하세요^^;

Mozilla 한국 커뮤니티

background이미지로 라인주기

background이미지로 라인주기

Re: background이미지로 라인주기

DTD 와 float 해제가 문제 입니다.

오홋! 감사합니다.

더 추가하면 이렇습니다.

차이가 존재합니다.

답글 감사합니다(__)(^^)