전체 글 132

[css] @media print 머릿글 바닥글 삭제 및 다음 페이지 여백 주기

print-hide : 화면에서는 보이나, 출력 시 숨김 처리 print-show : 화면에서는 보이지 않으나, 출력 시 노출 처리 출력 시, 머릿글, 바닥글 미노출 처리 @media print { @page {margin:0 1.3cm} } @page 에서 margin:0으로 설정 해야, 머릿글 / 바닥글 가려짐. 하지만 2Page이상 상단 여백도 사라짐 그래서, 기본적으로 @page에 margin을 주고, 첫 페이지에 top, bottom margin을 0으로 처리 @page {margin:1.3cm 1.3cm} @page :first {margin:0 1.3cm}

toast-chart(TUI-Chart) tooltip 서비스와 비슷 하게 구현

// tooltip 커스텀 const options = { tooltip: { template: (model, defaultTooltipTemplate, theme) => { const { body, header } = defaultTooltipTemplate; const { background } = theme; let bHtml = '' for(const data of model.data) { if(data.value != 0) { bHtml += '' bHtml += ' ' bHtml += ' ' bHtml += ' ' +data.label+ '' bHtml += ' ' bHtml += ' ' +data.value+ '' bHtml += '' } } bHtml += '' return ` ${mode..

카테고리 없음 2021.10.26

tui-char bar chart 범위 조정, 범례 체크박스 삭제, bar 색상 처리, 추출메뉴 삭제

const chart = toastui.Chart; const el = document.getElementById('chart-bar'); const data = { categories: ['연산', '사고력', '도형'], // 카테고리 series: [ { name: '평균 점수', data: [ 1.1, 2.7, 1.5 ], }, { name: '나의 점수', data: [ 0.1, 0.1, 0.1 ], }, ], }; const theme = { series: { barWidth: 20, colors: ['#d4d4d4', '#99a6e9'], // bar1 색상(그레이), bar2 색상(보라) areaOpacity: 1, }, }; const options = { legend: { visible..

카테고리 없음 2021.10.26

[script] modal 열기, 닫기, 닫기 이벤트처리 및 해제

열기(open) : $('#modalID').modal('show') 닫기(close) : $('#modalID').modal('hide') modal 종료 시, 이벤트 처리 $('#modalID').on('hidden.bs.modal', function (e) { // function }) modal 종료 시, 이벤트 처리 해제 $('#modalID').off() modal 오픈 시, 이벤트 처리 $('#modalID').on('shown.bs.modal', function (e) { // function; }) example 1. 모달로 alert 창 생성 (+종료 시 focus 처리) /** * alert('이름은 필수 입니다.', $('[name=name]')); // 모달창 종료 시, name에..