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..

IR(image replacement) 란? 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 하며, 단순히 스크린리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다. * 의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법입니다. 간단하게는 아래와 같이 img 태그 내 alt 속성을 넣는 방법이지만 background-image 를 사용하는 경우도 많기 때문에 IR 방법을 알고 계시면 좋을 것 같습니다. IR 작성 방법 1. display:none 2.visibility:hidden 3. overflow:hidden 1. display:none는 센스리더, Jaws, NVDA에서 모두 내용을 읽지 못함 2. visibility: hidd..

컴퓨터 포멧을 수시로 하기때문에 잊지 않기위해서 공유 합니다. 제가 작업 할때 사용하는 vscode 확장 프로그램 입니다.

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데, sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. 사용예시 .container..

HTML chk1 chk2 chk3 chk4 radio1 radio2 radio3 radio4 CSS input[type="checkbox"], input[type="radio"] { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; -webkit-border-radius: 0; outline: none; } .list-btn { list-style: none; display: flex; flex-wrap: wrap; margin: -0.375rem -0.1875rem; } .list-btn > li { position: re..