현재 지도에 표시되는 각 모서리의 좌표를 가지고 와야한다.

  // kakao.maps.LatLngBounds 
    var bounds = map.getBounds(); 

    // kakao.maps.LatLng 
    var sw = bounds.getSouthWest(); 
    var ne = bounds.getNorthEast(); 

    // 개별 위/경도 
    var swLat = sw.getLat(); 
    var swLng = sw.getLng(); 
    var neLat = ne.getLat(); 
    var neLng = ne.getLng();

가져온 코드 좌표를 Form에 담아서 전송

테이블에 GPS 정보를 저장하는 테이블은  POINT   데이터 형으로 저장되어야한다

gps 필드를 위와 같이 POINT 데이터 타입으로 저장하고 넣어야한다.

$cord =$_GET['swLat']." ".$_GET['swLng'].", ".$_GET['neLat']." ".$_GET['neLng'];
$sql = "SELECT * from 테이블 WHERE MBRContains(GeomFromText('LineString($cord)'), `gps`)"

MBRContains을 활용하여

위와 같이 Query를 날리면 원하는 범위 검색을 할 수있다.

.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript　"></script>
    <script type="text/javascript　">
        $(document).ready(function () {
            //h3요소 모두 가져오기
            var headers = $('h3');
            //반복문을 써서 반복: for문보다는 jQuery의 each문이 사용하기 편리
            for (var i = 0; i < headers.length; i++) {
                alert($(headers[i]).html());
            }

            $('h3').each(function (index) {
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
<h3>제목1</h3>
<h3>제목2</h3>
</body>
</html>

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>제목</title>

<script type="text/javascript" src="자바스크립트파일주소" ></script>


<script type="text/javascript">

자바스크립트 내용

</script>


<link href="css파일 주소" rel="stylesheet" type="text/css"/>


<style type="text/css">


CSS내용

</style> 



<!-- 주석 부분 -->



</head>

<body >


<div id="hello">내용 </div> 


</body>

</html>

동적인 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; } 


            



                            
         

        

                            
        




        




  





  



  



  




    


    

    

  


          
      
          
  

  

    

      
    


    

      
                    





                                                
         

        

                                



            

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

            



                            
         

        

                            
        




        




  





  



  



  




    


    

    

  


          
      

          

          

          
            

              
+ Recent posts

              
    
                
                
    
              

            

          

          


          
        
 
      
 
    
 
  

  
  
  
  
  


  
티스토리툴바