오늘의 삽질보고서 : CSS Box Model

오늘은 회사일이 한가로워서 이런 삽질을 했다.

사실 시작은;
회사일을 하면서 div를 이용해 layout을 해놓은 것들이 있는데, 개발실에 넘기고 나서 나중에 확인을 해보면 브라우저의 크기를 가로로 줄일 경우 우측에 있는 div가 자꾸 하단으로 내려가는 현상이 발생했다..
ie와 ff의 렌더링 차이로 인해서 margin 이나 padding 때문에도 그런일이 생기곤 하는데 CSS 초보인 난 아무것도 모르겠고 해서..
큰 div안에 sidebar와 contents를 넣는 방법 밖에는 모르겠어서! 그에 대한 연습을 하기로 한것이다.
(원래 넣어야 하는건데 내가 몰라서 여태 안넣고 쑈한것 같기도 하다~)

회사일이란게 워낙 1px에 목숨거는 일이라 확실하게 width에 대해 알아보려고 Grid BG까지 만들어서; 배경에 깔고..
여기저기에 CSS에 대해 공부해 보면 거의 초반에 접하는게 ie와 ff의 padding, margin에 대한 렌더링 차이 일것이다.
나도 글을 여기저기서 많이 봤고 대충 기억은 하는데, 직접 겪어보지 않으면 맨날 공부하고 까먹고가 반복 될 것 같아서 오늘 확실히 체험해보려고 한당..
자, 오늘 참고 한 곳은 [CSS] box model hack for IE. (via 5pix.com)
근데 아쉽게도 실험해보니까 나는 ie6라서 실험하나마나 였다 -_-);
그래서 렌더링 차이에 대해서는 접어두고; 기냥 고정된 width에서 padding을 넣을 경우 이것저것 어떻게 조정해야 하는 가에 대해 연습해 보기로 했다.
한마디로 그냥 초보삽질연습이당;
이런거 해볼라구 한당..

div_ex_01

위는 FireFox 1.0.4
아래는 InternetExplorer 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 -_-;
우선, 모든 padding과 margin을 0으로 하고 원하는 사이즈를 적어줬다.
(body에는 기본적으로 10의 padding을 줬다.)
여기서 한가지 의문점.
젤 겉의 녀석에 padding이 없을 경우.. FF에서는 보이지 않는다. @_@;
그녀석에게 적용된 width는 분명히 적용되어 있는데 background가 보이지 않는다..
왤까?

div_ex_02

위 그림을 보면 위에 있는.. FF로 렌더링된 아이는 background가 보이지 않고 있다.
이걸 보면 FF가 얼마나 깐깐한 녀석인지 알 것 같다.
지금 상태는 전체를 싸고있는 container안에서 Sidebar와 contents부분에 float:left;를 해준 상태이다.
FF에서는 그 아래에 또다른 div에 clear:both;를 해줘야 둘러 싸고 있는 Container가 제대로 보인다.
IE에서는 clear해주지 않아도 둘러싸고 있는 container를 그냥 보여준다.
아무튼 시작해보자. 위 그림의 소스.

body {
	margin: 0;
	padding: 10px;
}
#container {
	width: 410px;
	margin: 0;
	padding: 0;
	background: #CC6;
}
#sidebar {
	float: left;
	width: 90px;
	background: #FFC;
	padding: 0;
	margin: 0;
}
#contents {
	float: left;
	width: 300px;
	background: #FFF;
	margin: 0;
	padding: 0;
}
<div id="container">
    <div id="sidebar">
        sidebar
    </div>
    <div id="contents">
        <h3>test</h3>
        contents goes here
    </div>
    <div style="clear: both; height: 0px;"><img alt="" height="0" /></div>
</div>

/* 요 마지막 div말인데 IE에선 안보이게 할 수 없는건가? 내 멋대로 height만이라도 줄여볼라고 삽질했당.. */
제일 처음의 그림과 똑같은 사이즈로 지정해줬다.
자 이제 #container 안쪽의 여백을 위해 padding: 10px을 줘보자.

div_ex_03

우측의 연두색이 조금 넓어진 것이 보일까?
원래의 width는 410px인데 padding: 10px로 인해 사방으로 10px이 더해져서 연두색의 container는 430px이 되어 버렸다.
의심이 가는 사람은 배경의 pixel을 세어보자; (한칸=5px)
원래 의도 한 것은 전체의 width가 410px이니까
현재 설정된 width에서, padding으로 추가된 양쪽의 10px씩을 빼줘야 겠다.
{width - (2 x padding)}

#container {
	width: 390px;
	margin: 0;
	padding: 10px;
	background: #CC6;
}

 
 
div_ex_04

#container의 width가 410px이 되었다.
자, 이제 좌측 sidebar에 padding을 10px줘보자.

div_ex_05

어라..
우측에 잘 있던 contents box가 옆으로 내려왔다.
sidebar의 width 90px에 padding:10px이 더해져서 sidebar전체의 width가 110px이 되었고, 더불어 sidebar와 contents의 width를 합친 값이 container의 값보다 커지면서 contents가 자리가 좁다고 옆으로 내려와 버렸다.
어차피 sidebar는 90px로 만들려고 했었으니까, 아까 container에게 해준 것 처럼 늘어난 padding값 만큼을 sidebar의 width에서 빼주자.

#sidebar {
	float: left;
	width: 70px;
	background: #FFC;
	padding: 10px;
	margin: 0;
}

#contents에도 똑같은 방식으로 padding을 주고 width값을 조정해주면 내가 원했던 결과물을 얻을 수 있다.
margin을 적용할때도 뭐 마찬가진것 같다. -_-)
얼렁뚱땅 실험 끝.

이쯤에서 알게된 것 한가지
sidebar에 float:left를 주고 contents에는 float값을 지정해주지 않으면 둘 사이에 여백이 생긴다.
일몰님이 포스팅 한 걸 보니 3px의 여백이 생긴다고 하던데, 내가 본게 이게 아닌가 싶다.
일몰님 말대로 margin-left:-3px;을 해주던지
우측의 div에 float값을 지정해 주면 괜찮아진다. (left, right 둘다 여백은 없어진다. 물론 right는 크기가 정확하게 맞아야만 여백이 없겠지 )

이쯤에서 알게된 것 또 한가지
container안에 있는 sidebar에게 margin을 주면 left margin은 2배로 적용이 된다.
해결법은 display:inline; The IE Doubled Float-Margin Bug 참고
아래 그림을 보자

div_ex_06

둘다 sidebar에 margin:10px;을 해준 상태인데 , 둘중에 위에건 좌측에 연두색이 20px로 나타난다. 아랫건 문제를 해결한 후 좌측 10px이 된 상태.
이렇게 해결하자.↓

#container {
	width: 410px;
	margin: 0;
	padding: 0;
	background: #CC6;
}
#sidebar {
	float: left;
	width: 90px;
	background: #FFC;
	padding: 0;
	margin: 10px; /* margin을 주고 */
	display:inline; /* 이것으로 해결 */
}
#contents {
	float: left;
	width: 300px;
	background: #FFF;
	margin: 0;
	padding: 0;
}

* 회사에서 삽질보고서 준비해뒀는데, 집에 와서 봤더니 일몰님이 거의 똑같은 내용의 글을 쓰셔서 깜짝 놀랬닷.. ㅎㅎ 일몰님은 깔끔한 정리고, 난 삽질 한 내용 적은거 .. 키키
ps. 이거 다 읽은 사람 박수 쳐준다;;;;;