----------[원문 소개]----------
안녕하세요?
...

[CSS] make flexible width(example)

[배경]
웹기획자나 웹디자이너라면,
웹페이지 `가로폭(width)' 설정에 대해서 한번쯤은 고민해 보셨을 겁니다.

즉,

- 절대 가로폭을 사용했을 경우(예:800px):
사용자 스크린 가로폭이 800px 보다 작은 경우에는 가로 스크롤바가 생겨서
좀 보기가 안 좋고, 아주 큰 스크린 폭을 가진 사용자라면 상대적으로 작아보여서
역시 모양새가 안 나오죠.

반면,
- 상대 가로폭을 사용했을 경우(예:90%):
너무 큰 스크린 폭을 가진 사용자라면 가로로 길게 흩어져(?) 보이기 때문에
역시 모양새가 안 나오죠.

[제안]
위의 두개의 중간 형태를 한번 생각해 보았는데, mysql.com 같은 페이지가
바로 이런 경우이더군요.

즉 최소폭, 최대폭을 절대값으로 설정해두고, 나머지 그 중간 스크린은
모두 100% 나 95% 이상으로 설정하면 위의 두가지 단점을 어느 정도 극복할 수
있습니다.

[CSS 예: 최소650px, 최대:900px, 나머지 100%]
#fwidth, .fwidth
{
width:expression(
document.body.clientWidth <= 650 || document.body.clientWidth >= 900
? (document.body.clientWidth <= 650 ? '650px' : '900px' )
: '100%'
);
width:100%; min-width:650px; max-width:900px; /*** Mozilla ***/
}

CSS 의 expression 은 MSIE 에서 작동하고 그 다음줄은 Mozilla 에서 작동하는
예제입니다. 즉 위의 경우는 MSIE, Mozilla Firefox 둘다 정상 작동합니다.

[적용 예]
http://linuxchannel.net/gaggle/fwidth.php

위의 URL 창을 가로로 움직여 보세요.
사용자 스크린이 900px 이상되면 900px 로 고정됩니다.
----------[원문 소개 끝]----------

----------[적용]----------
1. 제 사이트(G4 적용)의 head.sub.php에 </head> 태그 전에 아래의 스타일 태그를 추가했습니다.

/* make flexible width
* san2@2005.01.05
* reference:
*   - http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths
*   - http://www.mysql.com/common/css/my_pie.css
*/
#fwidth, .fwidth
{
	width:expression(
	document.body.clientWidth <= 760 || document.body.clientWidth >= 960
	? (document.body.clientWidth <= 760 ? '760px' : '960px' )
	: '100%'
	);
	width:100%; min-width:760px; max-width:960px; /*** Mozilla ***/
}

2. 주요 테이블 태그에 다음을 추가하였습니다.
<TABLE ID='fwidth' ......... >
여기에서 ID='fwidth'의 추가가 중요합니다.
----------[적용 끝]----------

----------[결과]----------
1. 저는 항상 "고정 폭"과 "가변 폭" 때문에 고심을 했습니다. "고정 폭"으로 하자니, 너무 좁고, "가변 폭"으로 하자니 화면을 키웠을 때 너무 느슨해지고.......
세로 스크롤은 일반적인데, 홈페이지가 좁아서 가로 스크롤을 해야만 한다면, 꼴 사납지요.
2. 지금 제 사이트는 최소 폭(760 pixel)과 최대 폭(960 pixel) 사이에서 "가변 폭"입니다. 최소 폭과 최대 폭의 범위를 어떻게 주는가는 개인의 자유입니다.
3. 직접 방문해서, 넓히거나 줄여 보십시오. 800x600사용자도 화면에서 가로 스크롤이 일어나지 않고, 1024x768사용자도 충분히 보실 수 있도록 스스로 폭을 맞춰줍니다.
----------[결과 끝]----------