동적인 Footer을 위해 이제껏 스크립트 언어를 이용하여 레이아웃을 짯지만

CrossBrowsing문제나 웹 로딩 속도에 문제를 가져오는 등 완벽할 수 없었다.

분명히 CSS로 가능 할 것 같아 이리저리 생각해보고

이론적으로 가능하게 완성시켰지만

정작 적용시에 제대로 이루어 지지 않았지만

그 것은 나의 지식이 부족하여 이루지 못한 것.

찾아낸 CSS 문이다.

 

* {

	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/ 




물론 이것은 http://ryanfait.com/

 
예전에는 롤오버 이미지를 구현하기 위해 스크립트를 이용하였다.

아주 보기 싫고 지저분하다.

CSS 그 얼마나 깔끔하고 위대한 것인가!!!

아래와 같은 소스를 이용하자.

CSS삽입 부분

#menu a img.menuon {

display: none;

}

#menu a img.menuoff {

display: inline;

}

#menu a:hover img.menuon {

display: inline;

}

#menu a:hover img.menuoff {

display: none;



본문 적용 부분

<img src="일반 이미지" class="menuoff">
<img src="롤오버 이미지 주소" class="menuon">



 


div id가 center일 경우 CSS에  다음과 같이 작성하명 센터 정렬이 가능 하겠다.

하지만 크롬이나 FF IE9일 경우 본문 스크롤 생성 시 

본문 가로영역의 변화로 포지션 위치의 변화를 가져 올 수 있다.



body { text-align:center; }

#center {margin:0 auto; text-align:left;} 



+ Recent posts