본문 바로가기

전체 글38

웹접근성 배우기 좋은 유튜브 채널 추천 한국지능정보사회진흥원(NIA)이 운영하는 Youtube 채널 https://www.youtube.com/@AOA11Y AOA11Y 정보접근성 인식개선 및 기술기반 확산을 목표로 한국지능정보사회진흥원(NIA)이 운영하는 Youtube 채널 www.youtube.com 2023. 10. 23.
자바스크립트 애니메이션 라이브러리 Velocity.js http://velocityjs.org/ Velocity.js Overview At only 3Kb zipped, the UI pack is a must-have for improving your animation workflow. It exposes two functions: $.Velocity.RegisterEffect() and $.Velocity.RunSequence(). The former allows you to combine multiple Velocity calls into a a single effe velocityjs.org mo.js https://mojs.github.io/ mo.js mojs.github.io anime.js https://animejs.com.. 2023. 6. 30.
크로스브라우징 검사 도구 https://www.browserstack.com/list-of-browsers-and-platforms/live 3000+ Desktop & Mobile Browsers for Cross-Browser Testing Windows 8.1 (64-bit) www.browserstack.com 2023. 5. 8.
odometer.js -숫자 카운팅 애니메이션 js 라이브러리 리소스 예제 2023. 5. 8.
웹접근성 검사 도구 추천 명도대비 확인 및 대체색상 추천 사이트 https://app.contrast-finder.org/?lang=ko Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색 Contrast-Finder는 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. 그래서 색의 명암비와 관련된 웹 접근성(a11y) 테스트를 충족시키는 데 도움을 드립니다. Contras app.contrast-finder.org Colour Contrast Checker 프로그램 https://www.tpgi.com/color-contrast-checker/ Color Contrast Checker - TPGi TPGi's ADA Color Cont.. 2023. 5. 8.
반드시 사용해야 하는 VSCode extension Meterial Icons Theme 파일 아이콘 테마. 직관적이고 이쁘다. Metarial Theme 코딩은 간지 FontSize Shortcuts 워크스페이스에서의 폰트 사이즈만 조절할 수 있다. ui의 폰트사이즈는 그대로인채로. Increcement Selection 여러 줄의 코드를 잡아서 숫자를 한꺼번에 증가시킬 수 있다. px to rem px을 rem으로 계산없이 단축키로만 변환할 수 있다. 2023. 4. 25.
[CSS] 자동으로 번호 매기기 알아야하는 CSS 속성 counter-reset counter-increment content 소스코드 HTML 삽입 미리보기할 수 없는 소스 아침 점심 점심 2023. 4. 7.
웹접근성 (한국형 웹 콘텐츠 접근성 지침 2.2) 한국형 웹 콘텐츠 접근성 지침 2.2 문서 웹접근성을 준수하는 것은 꽤나 까다로운 작업을 요한다. 하지만 모두가 사용할 수 있는 사이트를 만드는 것은 중요하기 때문에, 웹접근성 마크를 획득이 목적이 아니어도 기본적으로 웹접근성을 준수하여 제작하는 습관을 길러야 하겠다. 그리고 타자치다가 마우스로 이동하지 않고 키보드 탭으로만 운용하는 것은 편리하다! 출처 : 한국웹접근성인증평가원 2023. 4. 7.
bxslider 웹접근성 대응 $('.mainSlider').bxSlider({ auto: true, autoControls: true, stopAutoOnClick: true, pager: true, speed:500, autoControlsCombine: true, responsive: true, pause: 5000, // 웹접근성 대응 onSliderLoad: function(){ $(".bx-clone").find("a").prop("tabIndex","-1"); }, onSlideAfter: function(){ $(".mainSlider").children("li").each(function(){ if($(this).attr("aria-hidden") == "false"){ $(this).find("a").attr("ta.. 2023. 4. 7.
[css] 마우스로 드래그했을 때 배경색, 글씨색 바꾸기 마우스로 글씨 드래그 했을 때 배경색, 글씨색 바꾸기 코드소스 HTML 삽입 미리보기할 수 없는 소스 알아야하는 css 속성 ::seclction 2023. 4. 7.

티스토리툴바