콩콩한 하루

//공식 var lon = Number(x); // var lat = Number(y); // var xx = lon * 20037508.34 / 180; // var yy = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / // 180); // yy = yy * 20037508.34 / 180; 구글좌표계 transform("EPSG:4326","EPSG:900913")

카카오맵이든 구글맵이든 API를 활용하면 보통 4단계로 나뉜다. 1단계:API 키 발급(API키는 지도를 불러올때 사용하는 고유식별키 정도로 인식하면 된다.) 구글맵 API 발급처:https://developers.google.com/maps?hl=ko 카카오 API 발급처:https://developers.kakao.com/ 2단계:API 스크립트 참조 구글맵 예: 3단계:View단(HTML)에서 지도들어갈 div 추가 구글맵 예: 4단계:자바스크립트 지도 function 추가 구글맵 예: function mapStart(){ var mapLatlng = new google.maps.LatLng(37.040957, 128.338503); // 좌표값(위경도) var mapOption = {//옵션 zo..

참고: http://bernii.github.io/gauge.js/ guege.js를 사용. 옵션에 따라 눈금의 설정,시침설정,그래프 모양설정 등등을 옵션으로 지정할 수 있다. HTML 0% javascript var opts = { angle: 0, // The span of the gauge arc lineWidth: 0.4, // The line thickness radiusScale: 1, // Relative radius pointer: { length: 0.6, // // Relative to gauge radius strokeWidth: 0.035, // The thickness color: '#000000' // Fill color }, staticLabels: { font: "10px s..

save함수를 탈때 validation체크를 해서 리턴값이 true이면 다음 단계로 진행 false이면 진행되지 않는다. //저장 함수 function save(param){ if (validation(param)) { if (!confirm("저장하시겠습니까??")) { return false; } } else { return false; } } //유효성 체크 function validation(param) { if (parseFloat(param)

' 대신 &quot 를 사용한다. 예) var html = ""; var year=2020; var month=09; html += ""button"; document.getElementById("test").innerHTML = html;

function StartPrint() { var beforePrint = function () { $("#div1").hide();//인쇄전 숨김 $("#div2").show();//인쇄전 보이기 }; var afterPrint = function () { $("#div1").show();//인쇄후 보이기 $("#div2").hide();//인쇄후 숨김 }; if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function (mql) { if (mql.matches) { beforePrint(); } else { afterPrint(); } }); } window.onbef..

상단의 이미지와 같이 바 그래프와 라인그래프를 혼합하는 방식의 Chart.js 활용법 이다. 단일 그래프시 기본 타입만 설정하면 끝이다. (바 그래프 = type:"bar"/라인 그래프 = type:"line") 1.html에서 해당 태그를 추가한다(실질적으로 차트가 들어가게 되는 공간에) 2.스크립트 부분: //차트 데이터 속성 설정 var chartdata = { labels: [], datasets: [ { label: "label1", lineTension: 0.1, borderColor: 'rgba(255, 99, 132, 0.1)', backgroundColor: '#2196F3', pointBorderColor: "rgba(75,192,192,1)", pointBorderWidth: 1, p..

퍼센트 게이지에 따라 상기와 같은 모양의 유동적인 바를 구현하는 방법이다. HTML bar CSS : base에 해당하는 bar와 유동적으로 변하는 퍼센트 바의 기본 스타일 지정 .bar-container {//회색바 width: 100%; background-color: #f1f1f1; text-align: center; color: white; border-radius: 5px; } .bar {//색깔 바 height: 20px; background-color: #2196F3; border-radius: 5px; } SCRIPT : 퍼센트바의 Width를 설정해 퍼센트 바의 채워지는 정도 설정(다음 코드는 임의적으로 Width를 설정한 것이지만 계산에 따라 퍼센트바를 유동적으로 변하게 할수 있다.) ..

테이블의 타이틀행만 고정하고 싶을때 사용한다. tableHeadFixer라이브러리를 사용했다. 1.tableHeader라이브러리 추가한다.(tableHeadFixcer.js파일은 구글링으로 찾을수 있다.) tableHeadFixcer.js 파일이 있는 경로를 참조 추가한다. 스크립트 초기 이벤트 로딩시 적용할 테이블 아이디 활용해 tableHeaderFixer 호출 한다. $("#테이블아이디명).tableHeadFixer(); 기본 옵션으로 테이블의 thead를 고정하며 옵션에 따라 상하좌우 어떤 컬럼을 고정할지 설정 할 수 있다. 옵션에 따라 첫번째 타이틀 행,좌우 특정 컬럼지정 역시 가능 하다. tableHeadFixer옵션: head: 테이블에서 thead를 고정함(기본값:true) $("#테이블아..

아이디나 클래스 요소의 display를 visible 혹은 invisible 하고싶을때 아이디일경우 javascript document.getElementById("id").style="block"; document.getElementById("id").style="none"; 클래스일 경우 document.getElementsByClassName을 활용 document.getElementsByClassName("classname").style="block"; document.getElementsByClassName("classname").style="none"; JQUERY $("#id").show(); $("#id").hide(); $(".class").show(); $(".class").hide();