kasumil의 코딩 공작소

차트.JS 옵션에 대한 설명서가 필요했는데, 그것을 깔끔하게 설명한 내용이 이어서 가져와봤다. Chart.js ver 3.0 이상 적용코드이다. 원래는 내용을 그대로 안가져오는 편이긴하나 가끔 원본 글을 삭제하거나 비공개 처리해서 해당 코드를 못 보는 경우가 있어 가져왔다. 1️⃣anchor - 데이터레이블의 위치 👉🏻영어로는 '닻을 내리다, 정박하다'이다. 즉 데이터레이블이 차트 축에서 얼마나 떨어져있는지 정한다. start: 차트에서 가장 가까이 있다. center: default값이고 차트에서 중간 거리만큼 떨어져있다. end: 차트에서 가장 멀리 떨어져있다. start - center - end 👉🏻차례대로 속성을 start, center, end로 줬을 때이다.(미세한 차이!) 2️⃣clamp ..

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: 'Dataset', data: [ 5, 20, 45, 50, 60, 80, 150], backgroundCo..

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: ['', "January", "February", "March", "April", "May", "June", "July", ''], datasets: [ { label: 'Dataset', data: [, 5, 20, 45, 50, 60, 80, 150], bac..

5,000.000 USDT Deposit 2022-09-28 Start 2022-09-28 2,600.000 USDT Expire 2022-09-28 /* step bar */ .stepbar { counter-reset: step; width: 100%; display: flex; align-items: center; justify-content: space-between; } .stepbar li { list-style: none; width: 32%; position: relative; text-align: center; cursor: pointer; margin-top: 1em; } .stepbar li:nth-child(1)::before { content: ""; width: 11px; hei..

회사 소개 사이트가 완성된지는 꽤 오래되었는데, 해당 사이트 최적화 이슈가 터졌다. 모바일은 너무 느리다고... 원인을 찾아보니 첫번째. 영상의 크기가 너무 컸다. 두번째. 영상의 로딩시 임시로 띄울 화면이 없었다.(poster 속성 미기재) 세번째. 이미지들이 너무 컸기에 문제가 있었다. 네번째. js와 css 호출하는 데 있어 blocking때문에 그러했다. 1번의 경우 영상이 50mb 이상의 파일을 2개이상이나 호출하고 있었다. 2. poster 속성의 이미지를 미기재 할 경우 load단계에서 동영상 다운로드 문제로 대역폭이 좁아져 자연스럽게 blocking이 된다. ㄴ poster를 기재하면, 일단 load단계에서 poster이미지를 호출하고, 브라우저 load작업이 끝나면, 그때부터 동영상을 호..

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형으로 고쳣더니 화면에 따라 테두리가 사라지는 버그가 있었다. 그러다가 겨우 찾았다. 정답은 index가 아닌 value 값을 통해 해당 line을 찾는 것이었다. 이러한 질문을 보고 원개발자가 해당 기능을 추가하겠다고 적었다. https://github.com/chartjs/Chart.js/issues/10007 Radar graph - grid customization · Issue #10007 · chartjs/Chart.js I'm using a Radar graph and I would like..

사이트를 개발하는데 있어 생뚱 맞은 게 왔다. 무려 keyframe을 통한 애니메이션 구동... 이게 내가 만드려고 해보니 너무 어려웠다. 왜냐하면 x축 이동만 있는 게 아니라 y축도 이동시키면서 이동시 모습은 해당 부분이 보이지 않아야 하므로 그래서 기본 코드에서 기존 3개에서 4개로 밀어넣는 부분을 고쳤고, 해당 넓이를 찾기위해서 message 태그 위치에서 개발자 도구로 top, width를 넣어가며 해당 태그의 길이와 위치를 일일히 찾아야만 했다. 그리고 overflow hidden, animation css를 꺼둔 상태로. 해야 이동되지 않음. code epen에서 위치랑 실제 구동 되는 위치가 달라서 원본 소스코드로는 -3, -6, -9, -12.5em으로 잡야한다. 좀 많이 어려웠지만 ani..

progress { -webkit-appearance: none; height: 4px; text-align: left; position:relative; } progress::-webkit-progress-bar { height: 4px; margin:0 auto; background: lightblue; border-radius: 5em; } progress::-webkit-progress-value { background-color: #19E0A7; display:inline-block; float:left; height: 5px; border-radius: 5em; margin:0px -10px 0 0; } progress:after { margin:-26px 0 0 -7px; padding: 4..

프로그레스바 중에 각 단계별 진행되는 바를 스텝바(step)라고 하는 것을 방금 알았다. 이를 나중에 또 찾기 귀찮으니 기록한다. 내가 만든 css중 li:after에 z-index를 뺐더니 보더 색상이 다를 경우 해당 선이 원형(동그라미) 위에 올라오는 문제가 생긴다. 일단 보더 색상을 일치하는 것으로 진행했지만 그게 안되는 경우 어떻게 해봐야 할 듯... 결과물 https://jsfiddle.net/gvnwqp4d/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net CSS /* step bar */ .stepbar { counter-reset: step; } .stepbar li { list-style: none; display: inline-block;..

별건 없고, 그냥 css 적용할때 알게된 사실을 적기위해 적는다. https://jsfiddle.net/92qvegtr/2/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net progress { -webkit-appearance: none; // 이부분이 있어야 기본적으로 먹힌 색상을 수정할 수 있다. height: 5px; } progress::-webkit-progress-bar { background: "lightblue"; border-radius: 5em; } progress::-webkit-progress-value { background-color: #19E0A7; border-radius: 5em; } 프로그레스바 커스텀.