CSS 가변 레이아웃 넓이 지정

#CSS 수식 사용

CSS3에는 레이어의 넓이를 계산할 때 많이 사용하는 calc() 함수가 있습니다.

※보석같은 CSS3 함수 calc() http://techbug.tistory.com/215

그러나 아직 우리나라에서 보편적으로 사용하기는 무리가 있습니다. 

왜냐면 우리가 많이 사용하는 IE의 8 이하에서는 지원을 하지 않기 때문인데요,

아직까지는 웹을 제작할 때 IE6은 몰라도 적어도 IE7, IE8 정도는 고려해야한다고 봅니다.

IE9를 바라기에는 아직 WindowsXP를 사용하는 사용자가 많고, MS에서는 XP에서 IE9가 설치되지 않습니다.

Elkha님이 만드신 Gray Style 레이아웃 코드를 보면 다음과 같이 CSS 안에 마이너스(-) 기호를 사용한 것을 확인할 수 있습니다.

Elkha - Gray style ver.1.4.5 layout.html (제작 : 2010년 4월)

전문적이 아는 것이 아니지만 아마 2010년에 제작되었으니깐 IE 구버전에서도 작동이 되나 봅니다. 

IE9 개발자 모드에서 확인해본 바 IE7에서도 무리가 없네요.

간단하게 설명드리자면 사용방법은 다음과 같습니다.

<style>

{@

$tmp = 100;

}

#contentWrapper { background-position:{(940-$tmp)}px top;background:black;float:left;}

#content { width:{(940-$tmp)}px; float:left; background: red;}

#widget {background: blue;float: right;width:{$tmp}px; }

</style>

<div id="contentWrapper">

<div id="content">content</div>

<div id="widget">widget</div>

</div>

$tmp 에서 설정한 값에 따라 #content의 넓이가 변하게 됩니다. 설정한 값만큼 전체 940에서 마이너스가 되는 거죠.