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


 

            



                            
         

        

                            
        




        




  



  



  



  




    


    

    

  


          
      
          
  

  

    

      
    


    

      
                    





                                                
         

        

                                



            
http://libon.kr/

            



                            
         

        

                            
        




        




  



  



  



  




    


    

    

  


          
      
          
  

  

    

      
    


    

      
                    





                                                
         

        

                                



            
오늘 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

              
    
                
                
    
              

            

          

          


          
        
 
      
 
    
 
  

  
  
  
  
  


  
티스토리툴바