콩콩한 하루

' 대신 &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();

화면 줌설정 자바스크립트 document.body.style.zoom = '120%'; //원하는 값 설정 제이쿼리 아이디는 # 클래스는 . $("#dom").css({zoom:120%});

window.onload시 해당코드 적용 document.oncontextmenu=function(){return false;}

RGB코드란? RGB코드란 빛의 삼원색인 빨간색(Red), 초록색(Green), 파란색(Blue)을 이용해 색을 표기하는 방식이라고 한다. 그래서 빛의 삼원색의 스펠링 앞글자를 따서 RGB코드라고 표현한다. HEX코드란? 2진수로(0,1) 표현되는 바이너리코드와 함께 컴퓨터에서 자주 쓰이는 코드로 HEX코드는 16진수로 표현된다. 0부터 F까지 표현할수 있다.(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) 예를 들어 빨간색을 색상코드를 표현한다고 했을때 RGB코드인 경우 R(Red)의 컬러만 들어가있기 때문에 R:255,G:0,B:0 으로 표현되는 반면 HEX코드의 경우 #FF0000으로 표현된다. 각 색상의 코드표를 보고 싶다면 네이버 색상코드표에서 손쉽게 RGB및 HEX코드에 해당하는 색..