css 이미지 자르기

모바일웹 프로젝트 하면서 전국 날씨보기 페이지가 있었는데 그때 구현한 실제 css 내용입니다.

퍼포먼스와 관리를 위해서 이미지 한장을 로드한 후 css 로 잘라서 많이들 사용하는데요 css 조금 보실 수 있

으시분은 아래 소스만 보셔도 쉽게 아실듯..? 무책임한.....

사실 블로그가 남에게 알리는 용도 1% 제 소스 정리가 99% 목적이라 ㅎㅎㅎ

아래 처럼 자른 후 <span class='city10'></span> 이런식으로 사용합니다.

ul 이나 div 로 영역을 정한 후  class='weathersBox' 이렇게 하면 되겠죠

.weathersBox{ background:url(../../images/m_sbs/common/bg_line2.gif) repeat-x 0 bottom; padding-bottom:5px;}
.weathers{ position:relative; width:320px; margin:0 auto;}
.weathers p{ position:absolute; left:180px; top:40px;}
.weathers p strong{ display:block;color:#076b9d;}
.weathers p span{ display:block;}
.weathers .city{position:absolute; left:12px; top:12px;color:#076b9d; font-weight:bold;}

.weathersBox2{ background:url(../../images/m_sbs/common/bg_line2.gif) repeat-x 0 bottom; padding-bottom:5px;}
.maps{ position:relative; width:320px; margin:0 auto;}
.maps span{ display:block; width:40px; height:38px; background:url(../../images/m_sbs/weather/bg_box.gif) no-repeat 0 20px; text-align:center; padding:0 0 0 0; font-size:11px; color:#F00; height:65px; line-height:11px}
.maps strong{ color:#333;}
.maps span img{width:25px; height:20px; display:block; margin:0 auto; padding-top:13px;}
.maps .city1{ position:absolute; left:100px; top:20px;}
.maps .city2{ position:absolute; left:150px; top:10px;}
.maps .city3{ position:absolute; left:200px; top:20px;}
.maps .city4{ position:absolute; left:100px; top:90px;}
.maps .city5{ position:absolute; left:150px; top:80px;}
.maps .city6{ position:absolute; left:200px; top:90px;}
.maps .city7{ position:absolute; left:90px; top:170px;}
.maps .city8{ position:absolute; left:150px; top:140px;}
.maps .city9{ position:absolute; left:210px; top:180px;}
.maps .city10{ position:absolute; left:50px; top:60px;}
.maps .city11{ position:absolute; left:250px; top:20px;}
.maps .city12{ position:absolute; left:30px; top:160px;}