-
HTML | CSS | Javascript
debounce 함수
짧은 시간에 여러 번 호출되는 함수를 일정 시간 간격을 두고 한 번만 실행하게 만드는 함수.ex) resize 이벤트때 실행되는 함수는 창 크기를 바꿀때 초당 수십~수백번 발생하기 때문에 부하 발생, debounce 함수를 통해 마지막 호출 이후 ~ms가 지나면 한 번만 실행하도록 조절 function debounce(func, wait) { let timeout; return function() { clearTimeout(timeout); // 이전 타이머 취소 timeout = setTimeout(func, wait); // 새 타이머 시작 };}// 사용예시: resize 이벤트에 적용$(window).on('resize', debounce(function(..
-
HTML | CSS | Javascript
intelliJ css 수정사항 실시간 반영 안될때
로컬에서 서버 기동후 css를 수정한 후,아무리 ctrl + f5를 눌러도 반영이 안되고 간혹 서버 재기동을 해야만 반영되어 보일때 해결방안 참고 : https://ynzu-dev.tistory.com/entry/intellij-html-jsp-css-javascript-Live-reload실시간-반영-새로고침적용하기1. Run > EditConfiguration 2. Build and run 옆쪽에 Modify options 클릭 3. On 'Update' action 은 Update trigger file 선택 4. On frame deactivation은 Update resources 선택 5. 서버 재기동
-
HTML | CSS | Javascript
webp와 png 동시에 사용하기
브라우저 지원 여부를 확인해 webp를 지원하는 브라우저에서는 webp를, 아닌곳에서는 png를 로드 https://fourwingsy.medium.com/webp-이미지-사용하기-dde09ae6500f WebP 이미지 사용하기 구글에서 개발한 WebP는 이미지를 손실 압축하는 대신 용량을 획기적으로 줄여주는 이미지 포맷입니다. JPEG 포맷보다 압축률이 30% 정도 높다고 하지만, 제가 생각하는 최대의 장점은 PNG를 사용해 fourwingsy.medium.com
-
HTML | CSS | Javascript
모바일에서 100vh 오류 해결방법
1. 새로운 단위 사용하기 https://s0ojin.tistory.com/56 [React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법 문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이 s0ojin.tistory.com 여기서 해결방법 2 참고. + 해결방법 2의 단위에 대한 내용 : https://web.dev/blog/state-of-css-2022?hl=ko#viewport_units 2022년 CSS 현황 | Blog | web.dev Google IO 2022에서 확인할 수 있는 현재와 미래의 웹 스타일 지정 기능 및 ..
-
HTML | CSS | Javascript
반응형 이미지 비율 유지하기
html css .image-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다 2:1 : padding-top: 50% 1:2 : padding-top: 200% 4:3 : padding-top: 75% 16:9 : padding-top: 56.25% 어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ
-
HTML | CSS | Javascript
모바일에서 클릭시 연한 파란색 bg 없애기
https://gahyun-web-diary.tistory.com/77 [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com
-
highchart
label이 있는 gauage차트 highchart guage chart with label
See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..
-
highchart
5단계 gauage chart highchart 5steps guage chart
See the Pen highchart 5steps guage chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size: '15..
-
highchart
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기)
series: [{ name: '데이터1', data: [100, 70], enableMouseTracking: false, // 차트에 mouseover 액션 false }, { name: '데이터2', data: [50, 20], // 데이터 값 설정 visible: false, // 초기에 차트영역에서 숨김 "showInLegend": false, // legend에서 보이지 않게 숨김 }]
