make flexible width(example)
작성자 : 단국강토
등록날짜 : 2009.02.10 10:08
[배경]
웹기획자나 웹디자이너라면,
웹페이지 `가로폭(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 로 고정됩니다.
웹기획자나 웹디자이너라면,
웹페이지 `가로폭(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 로 고정됩니다.
자료출처 : http://phpschool.com/
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|