예방이의 개발일기

SCSS 공식 사이트 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 1. Extensions > Live Sass Compiler 설치 2. vscode -> setting.json 3. 설정값 입력 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css/", "savePathReplacementPairs": null } ], - format ..

Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build

작성시 높은 순서대로 작성 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (max-width:7..

Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 미디어 쿼리 사용법 /* 미디어쿼리 구문은 대소문자 구별 X */ @media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) { CSS 작성... } 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 not tv : tv를 제외한 모든 미디어 유형에만 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함 [media type] screen (화면대상) tv (티비) print (인쇄물) all (모든 디바이스 대상) projection, handheld..

코드를 이쁘게 꾸며서 이미지로 저장할 수 있는 사이트들 모음 블로그 쓸 때 은근 유용했다. 1. SNIPPET SHOT Snippet Shot: Beautiful code screenshots www.snippetshot.com 2. CodeZen 3. Ray.so 4. Carbon 5. 그 외 추천 사이트들 https://ourcodeworld.com/articles/read/1451/top-7-best-online-tools-to-create-elegant-code-screenshots Top 7: Best Online Tools To Create Elegant Code Screenshots See our review of 7 of the Best Online Tools To Create Elegan..

yarn berry를 쓰면서 아래와 같은 에러가 났을 때 해결방법 1. 터미널에 아래 명령어 입력한다. yarn add -D eslint-config-react-app 2. 젤 상위 폴더에 .yarnrc.yml 파일을 생성한다. 3. 해당 파일에 아래 내용을 띄어쓰기 주의해서 작성해준다. (파일명만 바꾸면 됨 맨앞에 점 붙이기) packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 4. 위에 과정 후 계속 에러가 난다면 터미널에 아래 명령어를 차례대로 입력해준다. yarn cache clean yarn install yarn start

react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..

참고 문서 https://www.chartjs.org/docs/latest/samples/legend/html.html HTML Legend | Chart.js HTML Legend This example shows how to create a custom HTML legend using a plugin and connect it to the chart in lieu of the default on-canvas legend. const getOrCreateLegendList = (chart, id) => { const legendContainer = document.getElementById(id); let li www.chartjs.org https://www.chartjs.org/docs/latest..

chart.js tooltip custom 하기 기본 공식문서 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 참고한 공식문서 부분 발췌 https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips Tooltip | Chart.js Names..