OK DDODDO LAB

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