수다닷컴

급해용!! 저 좀 도와주세용!!
제가 구현하고 싶은건... 아래의 네이버 이미지검색 창처럼 첫화면에서 스크롤이 생성되지않고...큰 이미지의 높이너비가 비율대로 줄어들어 화면 전체가 표현되는 겁니다. 그후 창 사이즈에 맞춰 이미지가 축소확대되는겁니다. 요는 이거 css만으로 짤수있는겁니까??

네이버 이미지검색 창
http://imagesearch.naver.com/search.naver?sm=ext&viewloc=1&where=idetail&rev=13&query=%eb%af%b8%ec%88%a0%ea%b4%80§ion=image&sort=0&res_fr=0&res_to=0&start=1&ie=utf8&img_id=dic184437%7c186371_1&face=0&color=0&ccl=0&viewtype=0&aq=0&spq=0&nx_search_query=%eb%af%b8%ec%88%a0%ea%b4%80&nx_and_query=&nx_sub_query=&nx_search_hlquery=&nx_search_fasquery=

그래서 제가 하드코딩하는 사람들 사이트에서 참고하여 아래에서 테스트 중인데...
이미지가 줄지않습니다. 어찌어찌해서 스크롤이 생성되지않더니 또 푸터가 화면에 나타나지 않고... 어설픈 코딩실력 하려니 죽을맛입니다. 제게 팁좀주세용!!

제가 지금 테스트하고 있는 소스
!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
style type=text/css
html{height:100%;}
body { height: 100%; margin: 0; padding: 0; }
#head { height: 50px; background: #ccc; z-index: 1; }
#body { position:relative; height: 100%; width:100%; text-align:center; overflow:hidden; }
* html #body { height: 100%; }
#content-area { display:block; height:auto; width:auto; overflow:hidden; margin:10px auto; border:1px solid #ff6633; position:relative; z-index: 100; }
#foot { height: 50px; background: #ff6633; z-index: 2; }
/style
/head
body
div id=head
요건 100px 높이 헤드
/div
div id=body
div id=content-area
img src=sdc11212.jpg style=height:auto; width: auto;
/div
/div
div id=foot
요건 50px 높이 풋
/div
/body
/html

신청하기