euncho.medium.com/%EB%AA%A8%EB%91%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%A0%91%EA%B7%BC%EC%84%B1-cd2045b70f02 기술의 발전은 사람들이 쉽게 콘텐츠에 접근할 수 있게 하였지만, 한편으로 사람들이 어렵게 콘텐츠에 접근할 수 있게 해주었다. 우리가 사는 세상에는 다양한 사람이 존재한다. 언어, 신체, 문화, 가치관 등이 모두 다른 많은 사람들이 이 세상을 살아가고 있으며, 우리 모두가 그 사실을 인지하고 있다. 접근성이란, '누구나 콘텐츠를 이용할 수 있어야 한다'에 가깝기 때문에, 접근성 지침을 준수하고 개선해나가는 작업을 다르게 풀이하자면, 더 나은 사용성을 준다는 것에 가깝다. 접근성 관련 문서는 다음과 같다. 한국형 웹 접근..
ARIA는 기존의 요소 의미 체계를 수정하거나 네이티브 의미 체계가 없는 요소에 대해서 의미 체계를 추가할 수 있다. 메뉴나 탭 패널처럼, HTML에는 전혀 존재하지 않는 의미 체계 패턴을 표현할 수도 있다. ARIA를 사용하면 일반 HTML로 불가능한 위젯 형식의 요소를 만들 수 있을 떄까지 많다. 1. ARIA는 보조 기술 API에만 노출되는 여분의 레이블 및 설명 텍스트를 추가할 수 있다. 2. ARIA는 특정 영역을 제어하는 사용자설정 스크롤 바와 같은 표준 상위/하위 연결을 확장하는 요소 간의 의미 체계 관계를 표현할 수 있다. . . . 3. ARIA는 페이지 중 일부를 '라이브' 상태로 만들어 이런 부분이 바뀔 떄 즉시 보조 기술에 그 사실을 알릴 수 있다. GOOG: $400 ARIA 시스..
developers.google.com/web/fundamentals/accessibility/semantics-aria?hl=ko native HTML 요소가 포커스, 키보드 지원, 기본 제공 의미 체계를 제공하기 때문에, 지금까지는 네이티브 HTML 요소 사용을 권장해왔다. 하지만 단순한 레이아웃과 네이티브 HTML로는 작업을 수행하지 못할 때가 있다. 예를 들어서, 현재는 매우 일반적인 UI 구조인 팝업 메뉴에 대해 표준화된 HTML 요소가 없다. 또한, '사용자가 가급적 빨리 이 점에 대해서 알아야 함'과 같은 의미 체계상 특성을 제공하는 HTML 요소 역시 없다. 그럼 HTML이 단독으로 표현할 수 없는 의미 체계를 표현은 어떻게 해야할까? Web Accessibility Initiative(w..
ARIA는 요소에 레이블과 설명을 추가하기 위한 여러가지 매커니즘을 제공한다. 사실 aria는 액세스 가능한 도움말이나 설명 텍스트를 추가할 수 있는 유일한 방법이다. aria가 액세스 가능한 레이블을 생성하기 위해 사용하는 속성을 살펴보자. - aria-label 1. aria-label을 사용하여 액세스 가능한 레이블로 사용할 문자열을 지정할 수 있다. 2. aria-label은 label요소처럼 다른 네이티브 레이블링 매커니즘을 모두 무시한다. 3. 텍스트 대신 그래픽을 사용하는 버튼과 같이, 요소의 목적을 시각적으로 표시할 때, aria-label 속성을 사용할 수 있다. - aria-labelledby 1. aria-labelledby 를 사용하면 어떤 요소의 레이블로서 DOM에 있는 다른 요소..
위에 좋은 예제가 있다. 과연 정답은 무엇일까? content box 위의 정답은 기본적으로 오른쪽처럼 그려지게 된다.width를 200px으로 설정했어도, 전체 너비가 200px이 되는것이 아니라, 거기에 padding, border-width가 더해져서 그려지게 되기 때문이다. 이런 계산법을 content-box라고 하며, box-sizing 속성 content-box로 주게 되면 위와 같이 게산하게 된다. 즉, content-box가 기본값이다. border-box 만약 위 그림에서 왼쪽 처럼 렌더링하고 싶다면 어떻게 해야할까? box-sizing 속성을 border-box로 주면된다. (단, IE8 이상에서만 사용가능) 왜 border-box를 사용하는가? CSS에서width 속성을 100%로 주..
Debounce 기계적 스위치 센서나, 터치 센서같은것을 다룰 때, 순간적으로 스위치의 접점에서 on/off가 여러 번 반복되는 현상이 있는데, 이를 바운싱 현상이라고 한다. 이런 바운싱 현상을 없애는 것이 바로 디바운싱이다. Debounce는 이벤트를 그룹화 하여 특정 시간이 지난 후, 하나의 이벤트만 발생하도록 하는 기술이다. 즉, 순차적으로 호출을 하나로 '그룹화'할 수 있다. 그레서 연속적으로 호출되는 함수 중 마지막 함수 또는 제일 처음만 호출할 수 있다. debounce는 보통 ajax(asynchronous javascript and XML) 요청에 사용된다. let debounce; const $searchInput = document.querySelector("#input"); $sear..
1. firebase CLI 설치 firebase.google.com/docs/cli?hl=ko#install_the_firebase_cli Firebase CLI 참조 firebase.ml.naturallanguage.translate firebase.google.com 위 사이트를 참고하여 설치한다. max, linux는 터미널에 아래 코드 입력하면 된다. curl -sL https://firebase.tools | bash 2. firebase 로그인 firebase login 터미널에 위 명령어 입력하여 로그인한다. (구글 로그인) 3. 호스팅하고자 하는 폴더로 이동한다. cd javascript-youtube-classroom/ 4. 호스팅 세팅 명령어를 입력한다. firebase init ho..
- 액션 규칙 액션은 어떤 형태의 액션이 행해질지 가리키는 type 필드를 가져야 함 타입은 상수로 정의되고 다른 모듈에서 불러와질수 있음. 문자열은 직렬화될 수 있기 때문에 타입으로 Symbols 보다는 문자열을 쓰는 것이 좋음 액션 객체에서 type외의 다른 부분은 마음대로. - 리듀서 규칙 식별되지 않은 모든 상태에 대해서는 첫 인수로 주어진 state를 그대로 반환해야함 state가 undefined로 주어지면 반드시 해당 리듀서의 초기 상태를 반환해야함 반드시 리듀서가 undefined를 상태로 받더라도 제대로 작동하는지 확인필요 리듀서에서 Object.assign(state, newData) 같은 것을 반환하는 대신 Object.assign({}, state, newData)를 반환하기 (이를..
