본문 바로가기

WWWEB138

svg path 따라다니는 글자 https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths 패스 - SVG: Scalable Vector Graphics | MDN 엘리먼트는 SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다. developer.mozilla.org 샘플 하나 만들어 봄. HELLO, SVG WORLD 2022. 6. 16.
모던자바스크립트 핵심 가이드 pdf (complete guide to modern javascript) 책이 심플하니 훑어보기 좋은 것 같다. 그리고 찾아본 alberto Montalesi 깃헙과 pdf https://github.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript GitHub - AlbertoMontalesi/The-complete-guide-to-modern-JavaScript: A comprehensive, easy-to-follow ebook to learn everything fro A comprehensive, easy-to-follow ebook to learn everything from the basics of JavaScript to ES2022. Read more on my blog https://inspiredw.. 2022. 5. 25.
[자료] 알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념 알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념 https://morning-heart-e2a.notion.site/JavaScript-f037c206e538471f9a9f1915b2139a60 알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념 A new tool for teams & individuals that blends everyday work apps into one. morning-heart-e2a.notion.site # 머리말과 저자소개 Notion 링크, PDF 파일 및 QR 코드 https://www.notion.so/Notion-PDF-QR-92909f3557df43bebed5028ed8ef63e5 1. 초심자가 알면 좋은 JS 생태계 ht.. 2022. 5. 16.
git 협업 ##git 협업 1. git clone "깃헙주소" 2. git branch "브랜치 이름" 3. git checkout "브랜치 이름" -- 작업 -- [ push ] 1. git add . 2. git commit -m {작업 내용} 3. git checkout master 4. git merge {브랜치 이름} -- git pull -- 5. git push origin master [ push 오류 시 : ! [rejected] master -> master (fetch first) ] git pull --rebase {원격 저장소 이름} master [ pull ] 1. git checkout master 2. git pull origin master 3. git checkout {브랜치 이름}.. 2020. 9. 21.
css3 포토샵 효과: mix-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode 2020. 9. 10.
[WAI-ARIA] radio button #작성중.... #기존 코드 문제점 라디오버튼의 디자인 변경을 위해서 요소는 CSS의 opacity 속성으로 화면에서 보이지 않도록 처리한후 배경이미지를 활용하여 원하는 라디오버튼의 디자인을 적용하는 방법이 있고, 또 하나는 요소을 사용하지 않고 이나 요소, 또는 , 요소를 사용하여 마크업하고 이를 CSS로 디자인 하는 경우를 들 수 있다. 이렇게 제작된 코드는 기본 라디오버튼과 동일하게 키보드 인터랙션이 보장되어야 한다. 예를 들면, 라디오 버튼임을 인식할 수 있어야 하고, 선택과 해제된 상태를 구분할 수 있어야 한다. 또한 키보드의 스페이스바로 선택이 가능해야 하지만 이런 부분을 간과하고 제작하는 경우가 많다. role=“radiogroup”은 그룹이므로 그룹의 제목을 함께 제공해야 한다. 주로 제목.. 2020. 7. 21.
[WAI-ARIA] button 요소 속성/상태 설명 버튼. 엔터키나 스페이스바로 선택 aria-disabled="true | false" 사용할 수 없는 버튼 상태는 true, 사용할 수 있으면 false aria-pressed="true | false" 버튼이 선택된 상태면 true, 해제되어 있으면 false aria-labelledby="" 그룹의 제목을 제공하기 위한 것으로 제목 요소의 id값과 연결 role=“button”은 해당 요소의 역할을 버튼으로 정의하고, 선택적으로 aria-describedby 속성을 사용하여 버튼에 추가 설명을 삽입할 수 있다. 버튼이 비 활성화 되었거나 더 이상 사용할 수 없을 때 aria-disabled 속성을 사용하여 현재의 상태 정보를 스크린리더에게 알려줄 수 있다. 토글 버튼은 눌려져 있.. 2020. 7. 21.
[WAI-ARIA] multi form 기본 컨트롤이 아닌 커스텀 컴포넌트 등을 사용하는 경우와 같이 과 요소를 사용하지 못하는 경우가 발생할 수 있는데, 이러한 경우 WAI-ARIA의 group 역할(role)을 사용하면 과 동등한 의미를 전달할 수 있고, 여기에 aria-labelledby 속성을 사용함으로 요소가 가지는 의미 또한 전달이 가능해진다. 물론 당연히 HTML의 기본 요소 과 를 사용하는 것이 항상 우선이다. WAI-ARIA의 적용은 이것이 불가할 경우에 대한 차선책으로 선택할 수 있는 보조 기술이다. 요소 역할 속성/상태 설명 div group 폼에 공통적인 레이블을 참조할 수 있는 필드의 논리적 집합을 그룹핑 div aria-labelledby 그룹의 레이블에 해당하는 요소의 ID를 설정 DOCTYPE html> multi.. 2020. 7. 20.
[WAI-ARIA] id/password input 아이디를 생성하는 입력상자에 어떻게 입력해야 하는지 알 수가 없고, 잘못 입력하고 발생하는 에러 메시지를 통해서만 "5~20자의 영문 소문자, 숫자와 특수기호만 사용가능합니다" 라는 것을 알 수 있게 된다. 또한 비밀번호도 오류가 발생한 후에 입력도움을 알 수 있기 때문에 스크린리더 사용자는 상당한 불편을 겪게 된다. 이렇게 입력 지침을 에러메시지를 통해서만 제공하는 방법을 스크린리더 사용자에게 좋지 않은 경험이 된다. "에러베시지"의 잘못된 예와 같이 스크린리더 사용자는 에러가 발생해도 에러가 발생 된 상황을 전혀 알 수 없기 때문에 "1111"이라고 아이디를 입력했지만, 그것이 입력 기준에 맞지 않는지는 알 수가 없다. 이때 입력 서식인 요소에 aria-label 또는 aria-labelledby와 .. 2020. 7. 17.
728x90
반응형

티스토리툴바