동적인 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/

 
오늘 jquery의 매력에 푸욱~ 빠졌다 ㅎ

웹표준을 준수한다는 점과 크로스브라우징으로 모든 브라우져가 가능 하다는 점(심지어 IE6도~!!!!!) 



45가지네비게이션 메뉴 튜토리얼
http://www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html
  



38가지 서브메뉴 네비게이션  튜토리얼

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/


여러 디자인의 서브메뉴

http://apycom.com/
 


다양하고 신기한 Jquery  예제 튜토리얼 사이트

http://tympanus.net/codrops/category/tutorials/ 

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

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

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;} 



아직 나의 테크닉과 노하우가 부족한 탓에 
div의 position이 relative을 경우 top 0px left 0px를 주어도 
본문 자체에 여백이 있어 꽤 고생을 하였다.

기본적으로 css에 다음과 같은 스타일 시트를 붙혀넣어주자. 

body {
margin: 0;
  padding:0; } 


내가 티스토리 블로그를 시작한지 어언 7년전....

2004년에 테터툴즈라는 설치형 블로그로 시작하여

군대를 다녀온 이후로 부터 몇달에 한번씩 간간히을 글을 올렸다.

글도 안쓰고 관리도 안하고있었기에

별 신경을 안썻는데....

10년지기 친구로부터 초대장을 부탁받아

관리페이지를 열어보았더니....

한달에 방문자가 300명이라니....

한달에 글이 올라올까 말까 하는 블로그에 

무슨일로 오시나 싶어 봤더니

FASOO 이녀석 때문에 다들 말썽이 많은가보다...

지식인에 누군가 내 블로그 링크도 걸어주시고 감사할따름이다~

게다가 보험설계사분도 ㅎㅎ

뭐 하여튼 방문자가 늘어나는것은 좋은일이지~

영리적인 일에는 별로 신경 안썻는데

나도 블로그 광고나 실어볼까 고민 중....;

블로그도 이제 슬슬 살려볼까....? 

(망할 귀차니즘이 날 잡지않기를 ㅠ) 
<script language="JavaScript1.2" type="text/javascript">
<!--
var slideshow_width='960px' //가로크기
var slideshow_height='530px' //세로크기
var pause=2000 //장면전환시간 (2000=2초)
var fadeimages=new Array()
    fadeimages[0]="/img_intro_001.jpg"
    fadeimages[1]="/img_intro_002.jpg"
    fadeimages[2]="/img/img_intro_003.jpg"
    fadeimages[3]="/img/img_intro_004.jpg"
    fadeimages[4]=/img/img_intro_005.jpg"
    fadeimages[5]="/img/img_intro_006.jpg"
    fadeimages[6]="/img/img_intro_007.jpg"
var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
        preloadedimages[p]=new Image()
        preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
        document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
    if (curpos<100){
        curpos+=10
    if (tempobj.filters)
        tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
        tempobj.style.MozOpacity=curpos/101
    }
    else{
        clearInterval(dropslide)
        nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
        tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
        tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
        nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
        var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
        tempobj2.style.visibility="hidden"
        setTimeout("rotateimage()",pause)
    }
}
function rotateimage(){
    if (ie4||dom){
        resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.style.zIndex++
        tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
        dropslide=eval(temp)
        curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
        document.images.defaultslide.src=fadeimages[curimageindex]
        curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
        crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
        crossobj.style.MozOpacity=curpos/101
}
function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
        rotateimage()
}
if (ie4||dom)
    window.onload=startit
    else
        setInterval("rotateimage()",pause)
//-->
</script>

크로스 브라우징을 하다보면 크롬이나 FF에서는 문제가 없는데 IE에서만 표안의 이미지에 여백이 생기는 경우가 있다.

그래서 임시 방편으로 DIV 잡아넣고 overflow:hidden 을 넣어줬는데

구글링 해보니 간단히 해결하는 방법이 있었다.... ㅠ

img  {vertical-align:bottom;}

이걸로 해결.
http://www.jasko.co.kr/src/20020102/email_check_2.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>

</HEAD>

<BODY>

<!---- [1단계] 아래의 방법으로 원하는 위치에 복사 해 넣으세요 ------------------>

<form name="validation" onSubmit="return checkbae()">
이메일 주소 :<br>
<input type="text" size=18 name="emailcheck">
<input type="submit">
</form>

<script language="JavaScript1.2">
var testresults
function checkemail(){
var str=document.validation.emailcheck.value
var filter=/^(w+(?:.w+)*)@((?:w+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i
if (filter.test(str))
testresults=true
else{
alert("유효한 이메일 주소가 아닙니다")
testresults=false
}
return (testresults)
}
function checkbae(){
if (document.layers||document.getElementById||document.all)
return checkemail()
else
return true
}
</script>

+ Recent posts