OK DDODDO LAB

실행 npm install vue-router --save 에러 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: navtest@0.1.0 npm ERR! Found: vue@2.7.16 npm ERR! node_modules/vue npm ERR! vue@"^2.7.16" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.2.0" from vue-router@4.3.1 npm ERR! node_modules/vue-router npm ERR! v..

에러 error Component name "Header" should always be multi-word ( 구성 요소 이름 "***"는 항상 여러 단어로 이루어져야 합니다.) * 해결 * export default { name: "Header", >> 변경 " HeaderItem " }; 네이밍을 할때는 카멜 케이스, 파스칼 케이스, 케밥 케이스 으로 네이밍 단어를 구분해줘야만 여러 단어로 인식한다! 참고 eslint-plugin-vue 공식문서

에러 0 errors and 29 warnings potentially fixable with the `--fix` option. * 해결 * npm run lint -- --fix

HTML 1 2 3 4 5 ◀ ▶ CSS * { margin:0; padding:0; } li { list-style: none; } .slide { /* layout */ display: flex; flex-wrap: nowrap; /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */ overflow: hidden; /* position */ /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offs..

HTML HELLO slide hover CSS /* 버튼 */ .button-box { /* height: 100vh; */ /* display: flex; justify-content: center; align-items: center; */ } .button-box .btn { font-size: 25px; padding: 15px 30px; color: #000; border: 3px solid #000; border-radius: 30px; text-transform: uppercase; letter-spacing: 4px; transition: all 0.4s; } .button-box .btn:focus { outline: none; } .button-box .btn:hover { backg..

chart.js를 사용하면 되는데 안쓴다고 하여 간단하게 작업한 내용을 기록해 보겠습니다. HTML 기본 24 CSS /* chart */ .chart-wrap { padding: 5px; display: flex; font-size: 12px; } .chart-wrap .chart-sec .chart-desc > p {margin: 0;} .chart-wrap .chart-sec .chart-box .chart-bar { min-height: 12px; width: 70px; border-radius: 6px; margin: 0 auto; background: linear-gradient(to top, #6352ff 0%, #6b95ff 100%); } JS //차트 퍼센트 비율 구하기 $(functi..